Создание темы Вордпресс. Подключение шаблонов и стилей.

Эта статья является продолжением Создание темы Вордпресс

В ней я кратко описал:

• как создать тему вордпресс;
• что сделать, чтобы увидеть и активировать ее в админке;
• роль wp_head() и wp_footer().

Но, как я уже упомянул, наша тема пока ущербна.

Почему?

В ней пока нет ничего, кроме чистого HTML. Для полноты счастья нам не хватает: стилей, скриптов, некоторых настроек в админ панели. Но обо всем этом последовательно.

Подключение стилей и скриптов. Хук wp_enqueue_scripts

Кратко о том, что такое хуки и зачем они.

Говоря языком сухого определения — это способ модификации и взаимодействия вашего кода с ядром Вордпресс.

Сразу не очень понятно.

Хук(от англ. — крюк).

Примеры в жизни: Капитан Крюк из мультфильма Питер Пэн с крюком вместо кисти, удар в боксе.

Т.е. где-то в каком-либо месте кода стоит конструкция do_action('action_name');. Это и есть хук, за который можно вцепиться и выполнить свой код, в момент исполнения хука.

Создадим в корне нашей темы файл functions.php, и напишем в нем свой первый хук.


add_action( 'wp_enqueue_scripts', 'my_first_theme_styles_scripts' );
function my_first_theme_styles_scripts() {
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
}

wp_enqueue_scripts — имя хука за который мы цепляемся.
my_first_theme_styles_scripts — имя нашей функции, которая, что-то будет выполнять, а именно, подключит файл стилей нашей темы styles.css.
И теперь, мы сможем стилизовать нашу тему.

Но, какая свадьба без невесты, а современные темы без скриптов js?

Создадим в корне темы файл my-first-theme-script.js.

В этой же функции добавим


add_action( 'wp_enqueue_scripts', 'my_first_theme_styles_scripts' );
function my_first_theme_styles_scripts() {
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
wp_enqueue_script('my-first-script', get_template_directory_uri() . '/my-first-theme-script.js', array('jquery'), '1.0', true);
}

Немного пояснений:
wp_enqueue_script — подключение скрипта;
my-first-script — хэндлер, его имя, которое можно увидеть в исходном коде страницы(должно быть уникальным);
get_template_directory_uri() — замечательная функция, которая на выходе даст нам путь к папке нашей темы, и останется дописать, оставшийся путь к файлу:
array('jquery') — жестко проследить, чтобы наш скрипт был подключен именно после Jquery(одна из версий которой входит в комплект поставки WordPress), если в этом есть необходимость. Если нет, просто оставим пустые кавычки на месте этого массива.
1.0 — версия вашего скрипта, если оставить кавычки — то WP подставит туда свою текущую версию.
true — подключить наш скрипт в футере (здесь и поможет хук wp_footer(), который отвечает за вывод всех скриптов и стилей выводимых в футере ).

Подключение шаблона страницы page.php и шаблона блога index.php

Файл page.php отвечает за вывод страниц, а файл index.php — за вывод постов(новостей и не только) блога.
Файл index.php мы создали в прошлой статье, осталось создать page.php.
В оба файла добавим одинаковый код:

<?php get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
while ( have_posts() ) : the_post();
the_content(); // вывод контента поста / страницы
endwhile;
?>
</main>
</div>
<?php get_footer(); ?>

Теперь идем в админ панель, Страницы, и создаем там новую страницу с именем Главная, и с произвольным контентом и пустую страницу Блог.

А теперь переходим в раздел Настройки, Чтение.

И делаем выбор Главной страницы и страницы блога.

Теперь на главной странице будет отображаться Главная, а по ссылке http://ваш.сайт/blog/ — Блог.

Все!

Тема готова. И насколько полноценной она будет зависит от вас! Не забывайте чтить и читать кодекс Вордпресс.

Спасибо за внимание!