Предполагается, что вы знаете html, css и базово php. По ходу пхп подтянем с помощью этих вордпресс-уроков.
Также предполагается, что вы уже собрали свой проект на html и css, осталось только натянуть его на движок!
Начнем с того, с чего начинают все. Если локальный сервер у вас не установлен, но есть доступ к какому-нибудь онлайн-серверу, то установим туда вордпресс.
Заглянем в папку.
Нам для работы нужна папка wp-content > themes.
По умолчанию я обычно ставлю бесплатную тему twentyfourteen. Их там несколько на twenty — twentyfourteen, twentyfifteen и т.п. Скачать можно здесь https://ru.wordpress.org/themes/twentyfourteen/.
То есть структура вордпресса такова:
wp-admin — для административной панели;
wp-includes — черт его знает )), туда не лезем;
wp-content — та, что нам нужна
В данный момент мы займемся натягиванием верстки (дизайна) на вордпресс на основе готовой бесплатной темы, поэтому и идём в папку themes.
Если папка «темы» (themes) пуста, положите в нее бесплатную тему, например, twentyfourteen.
На этих бесплатных темах от разработчиков WordPress легче всего учиться, так как они просты и прозрачны. Платные темы — это чаще всего огромное количество папок, шаблонов и предустановленных плагинов, код вшит глубоко, копать приходится долго.
В общем, открыли папку с темой и видим там знакомую структуру:
css
images
js
Остальные папки и их предназначение — позже.
Из файлов нас сейчас интересуют
header.php
footer.php
index.php
page.php
Первое, что нужно понять: WordPress использует индексный файл для блога (по умолчанию), то есть — для вывода постов в виде превью или целиком. Если главная страница вашего сайта — не новостная лента (блог), а статичная страница, то за нее отвечает page.php.
С точки зрения повторяемых на всех страницах областей — все как в Битриксе — за шапку и левый сайдбар отвечает header.php, за правую колонку и футер отвечает footer.php.
То есть, чтобы воткнуть логотип и меню — открываем header.php, для вывода копирайта — footer.php.
Теперь интересная часть. По правилам, в вордпрессе вы включаете стили и ява-скрипты не в хедере и футере, а в файле functions.php.
О, этот functions.php!
Этот файл отвечает за все. Не только за то, что выводится на фронт-енде, но и за то, что мы получаем в административной панели!
В этот трудный для нас час нам нужно только одно — прицепить свои стили и ява-скрипты.
Для ленивых:
К черту правила! Включим стили в header.php.
Делается это также, как в Битриксе — только по-другому выводим путь к файлам:
<link rel="stylesheet" href='<?php echo get_stylesheet_directory_uri() ?>/css/my_style.css ' type='text/css' media='all' />
PHP:
Вот эта строчка php-кода отвечает за вывод ПУТИ к файлу. Чтобы не писать полный путь к папке со стилями, мы говорим кодом: «вывести директорию листа стилей».
<?php echo get_stylesheet_directory_uri() ?>
Иначе при переносе темы на другой домен вам придется переписывать все пути всех листов стилей и всех ява-скриптов. Кстати, о ява-скриптах. Выводим те, что нам нужны, в хедере или футере — в зависимости от требований. Некоторые ява-скрипты работают только будучи в хедере.
Вроде бы хорошей манерой последние несколько лет было выводить ява-скрипты в футере, чтобы они не мешали загрузке всей остальной страницы.
Но времена меняются, ява-скрипты приобрели теги async и defer. Не все браузеры пока их поддерживают, но необходимо знать, к чему идет веб. Например, facebook держит ВСЕ свои ява-скрипты в хедере. Подробнее об async и defer можно посмотреть здесь: http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html.
Итак, куда бы то ни было, мы включаем наши скрипты таким образом
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri() ?>/js/my_js_file.js"></script>
Где мы видим уже знакомый нам путь — <?php echo get_stylesheet_directory_uri() ?>
перед папкой js, где лежит наш ява-скрипт-файл.
Включать стили и скрипты нужно после строки <?php wp_head(); ?>, эта строка тянет все стили, объявленные в functions.php, то есть, в теме. Так как приоритет у стилей, которые стоят последними, то свои вы должны поставить свои после остальных.
Кстати — это витально при создании дочерних тем, но об этом позже.
Для правильных:
Открываем файл functions.php
И в самый конец добавляем код:
function wpb_adding_scripts() { /* css */ wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/ my_style.css', false, '', 'all' ); /* js */ wp_enqueue_script( 'isotope', get_template_directory_uri() . '/js/mine/ my_js_file.js', '', '', true ); } add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
Понятно, что my_style.css и my_js_file.js нужно изменить на названия ВАШИХ файлов.
На этом примере, кстати, можно увидеть структуру любых вордпресс hooks и actions- функций, которые меняют работу вордпресса.
Сначала мы пишем функцию:
function wpb_adding_scripts() {
}
Затем вызываем ее:
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
где ‘wp_enqueue_scripts’ — «родная» функция вп, а ‘wpb_adding_scripts’ — название нашей функции, которую мы добавляем к «родной» — add_action переводится как «добавить действие».
Естественно, внутрь функции можно добавить сколько угодно листов стилей и ява-скриптов.
Рассмотрим значения после названия стиля. Последнее значение all для нас важно — это то, что выводится в коде как media:
<link rel='stylesheet' href='http://my_site.com/wp-content/themes/my_theme/css/my_style.css' ' type='text/css' media='all' />
В коде добавления ява-скрипта важно значение true или false в самом конце. true означает, что скрипт будет выводится в футере.
Все остальные кавычки и запятые копируйте как здесь, иначе значение true не будет обработано.
На этом первый урок окончен.
Важная информация — по правилам, все стили и ява-скрипты нужно объявлять в functions.php. Хотя, честно говоря, все и так работает… Но так как с файлом функций нам придется часто сталкиваться, начнем с малого.
Да! Еще очень важно — если вы работаете с темой, и даже если вы пишете свою тему, оставьте лист стилей по умолчанию в покое! У вас есть в корне темы файл style.css. Без этого файла невозможно запустить тему, так как вордпресс читает в нем закомментированную область — название темы и автора на самом верху. И этот файл тянет всю верстку готовой темы. Делайте СВОЙ файл! Так как темы постоянно обновляются и перезатирают любые ваши изменения. Скажем так — это правило хорошего тона для любого разработчика, который будет после вас! Позже мы будем делать дочерние темы, опять же, со своими скриптами и стилями, где кастомная верстка хранится совершенно отдельно от основной в целях ее безопасности и сохранности. Но начните хотя бы с того, чтобы хранить свои стили и скрипты отдельно от чужих. Вам же проще будет потом идентифицировать их и редактировать.
You must be logged in to post a comment.