Предполагается, что вы знаете 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. Без этого файла невозможно запустить тему, так как вордпресс читает в нем закомментированную область — название темы и автора на самом верху. И этот файл тянет всю верстку готовой темы. Делайте СВОЙ файл! Так как темы постоянно обновляются и перезатирают любые ваши изменения. Скажем так — это правило хорошего тона для любого разработчика, который будет после вас! Позже мы будем делать дочерние темы, опять же, со своими скриптами и стилями, где кастомная верстка хранится совершенно отдельно от основной в целях ее безопасности и сохранности. Но начните хотя бы с того, чтобы хранить свои стили и скрипты отдельно от чужих. Вам же проще будет потом идентифицировать их и редактировать.