Учебное пособие по темам WordPress для начинающих — Часть 2: Шаблоны
Этот урок по теме WordPress для начинающих научит вас структурировать основные строительные блоки темы и начать создавать шаблоны. Мы начнем создавать некоторый вывод HTML и как включать строительные блоки в шаблоны нашей темы. На предыдущем шаге мы настроили минимум темы WordPress и активировали ее. Но на данный момент он мало что делает и даже не содержит действительного HTML для веб-страницы. Давайте исправим это.
Строительные блоки верхнего и нижнего колонтитула (и боковой панели)
В наших файлах шаблонов нам нужен действительный HTML. Мы могли бы написать полную структуру HTML (начиная с <html>, <head>и полностью <body>) в index.php, но это становится непрактичным при поддержке нескольких файлов шаблонов в вашей теме. Представьте, что вы создали кучу шаблонов, а затем понимаете, что вам нужно небольшое изменение в части заголовка; затем вам нужно будет отредактировать все шаблоны, чтобы они оставались согласованными. Это не умно.
Решение состоит в том, чтобы разделить всю структуру HTML на осмысленные части; строительные блоки. Каждый блок находится в своем собственном файле, и всякий раз, когда они нам нужны в шаблоне, мы их включаем. Наиболее распространенные и разумные блоки — один для заголовка, один для нижнего колонтитула и один для контента, но если ваша тема имеет боковую панель, боковая панель также должна быть отдельным зданием.
Те из вас, кто больше знаком с PHP, вероятно, знакомы с методами include()или require(). Это именно то, что мы будем делать, однако мы будем использовать функции WordPress для включения других файлов, поскольку они имеют дополнительные преимущества.
В этом уроке мы создадим верхний и нижний колонтитулы и боковую панель в качестве строительных блоков. Однако боковые панели становятся все менее и менее распространенными на веб-страницах, но мы по-прежнему будем реализовывать правую боковую панель в нашей теме. Эти три строительных блока являются обычной практикой во всех темах WordPress — и на самом деле это настолько распространено, что WordPress предлагает автоматизацию для этих трех вещей.
Создание шаблонов шапки, футера и боковой панели
Давайте создадим новый пустой файл с именем header.phpв папке нашей темы. Сейчас мы добавим очень простой HTML (не волнуйтесь, позже мы добавим более правильный HTML).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A White Pixel Theme</title>
</head>
<body>Создайте новый файл с именем footer.phpв каталоге вашей темы. Все, что нам нужно (на данный момент) в этом файле, — это закрытие нашей HTML-структуры.
</body>
</html>И, наконец, создайте новый пустой файл с именем sidebar.php. Мы добавляем только тег HTML <aside>внутри.
<aside class="sidebar">
</aside>В том числе строительные блоки
Вернемся к нашему index.phpфайлу. Все, что нам нужно сделать сейчас, это указать WordPress, куда мы хотим включить файлы верхнего и нижнего колонтитула. Очевидно, мы хотим загрузить заголовок в самом начале и нижний колонтитул в самом конце этого файла.
WordPress предлагает простые функции для включения этих строительных блоков; get_header()и get_footer()для файла заголовка и нижнего колонтитула соответственно. Довольно интуитивно верно? Давайте добавим их в наш index.php и посмотрим, что произойдет.
<?php get_header(); ?>
Hello :)
<?php get_footer(); ?>Обновите внешний интерфейс и проверьте или просмотрите исходный HTML-код, чтобы убедиться, что мы объединили несколько строительных блоков в полную структуру HTML.
Теперь вы можете редактировать содержимое index.phpнезависимо от верхнего и нижнего колонтитула!
Давайте также добавим боковую панель. Имейте в виду, что в вашей теме вы можете рассмотреть варианты и шаблоны, в которых вам не нужна боковая панель, например главная страница.
Включить боковую панель так же просто, как верхний и нижний колонтитулы; для этого мы используем get_sidebar(). Давайте добавим это в index.php прямо перед получением нижнего колонтитула.
<?php get_header(); ?>
Hello :)
<?php get_sidebar(); ?>
<?php get_footer(); ?>Обновите, и вы должны увидеть исходный код HTML, включая наш файл <aside>. Не волнуйтесь, на следующем этапе мы узнаем, как преобразовать его в настоящую боковую панель, в которую вы можете поместить виджеты.
Наша тема сейчас довольно статична. В следующем уроке из этой серии руководств по темам WordPress мы, наконец, начнем правильно изучать функции WordPress, чтобы динамически загружать контент и информацию из WordPress в наши шаблоны.