Эта статья является продолжением Создание темы Вордпресс
В ней я кратко описал:
- как создать тему вордпресс;
- что сделать, чтобы увидеть и активировать ее в админке;
- роль
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/ — Блог.
Все!
Тема готова. И насколько полноценной она будет зависит от вас! Не забывайте чтить и читать кодекс Вордпресс.
Спасибо за внимание!