Учебное пособие по темам WordPress для начинающих — Часть 11: Пользовательские шаблоны страниц

В этом уроке по теме WordPress для начинающих мы узнаем о шаблонах страниц, что они собой представляют, как их создавать и передовые методы. В качестве примера мы сделаем полноразмерный шаблон. Попутно мы также добавляем класс в тело, спрашивая, использует ли страница определенный шаблон страницы.

Что такое шаблоны страниц

Шаблоны страниц полезны в тех случаях, когда вам нужен другой макет или настройка для определенной страницы. Типичными примерами использования шаблонов страниц являются перечисление сообщений в пользовательском типе сообщений (например, портфолио, книги или услуги), наличие совершенно другого контента или макета (например, внутри столбцов) или даже просто создание страницы на всю ширину (без боковой панели).

Удобство использования шаблонов страниц уменьшилось после версии WordPress 5.x (Gutenberg). Новый редактор Gutenberg обеспечивает большую гибкость при создании таких страниц без использования шаблонов страниц. Тем не менее, мы узнаем, как добавить пользовательский шаблон страницы в нашу тему.

Внутри метабокса «Атрибуты страницы» для страниц отображается выбор шаблона страницы. Но параметр шаблона появится только в том случае, если в активной теме есть хотя бы один шаблон страницы.

Шаблоны страниц можно использовать для постов и пользовательских типов постов. После WordPress 4.7 и выше вы можете определить, для каких типов записей должен быть доступен шаблон. WordPress автоматически добавит необходимый метабокс «Атрибуты страницы» к этим типам записей.

Именование и размещение шаблона страницы

Для начала вы обычно делаете копию любого файла шаблона, наиболее близкого к тому, чего вы хотите достичь с помощью шаблона страницы. В большинстве случаев это page.php. Что касается названия вашего шаблона страницы, это зависит от вас. Но есть некоторые правила и немного здравого смысла.

Заманчиво просто назвать свой шаблон страницы, например page-books.php, для шаблона со списком книг пользовательского типа. Никогда не добавляйте к шаблону страницы префикс ‘ page-‘! Если вы помните из иерархии шаблонов WordPress, WordPress будет искать page-<slug>.phpперед попыткой page.php, и пользователи вашей темы могут столкнуться с неожиданным поведением.

Хорошей практикой является префикс вашего шаблона страницы с чем-то, что не является частью имен шаблонов страниц WordPress. Например ‘ pagetemplate-', pt-‘, или просто полное имя ‘ fullwidth-template.php‘. Также рекомендуется хранить их во вложенной папке; /page-templates/однако это нехорошо, если вы хотите, чтобы ваша тема была доступна для расширения дочерней темой. Дочерняя тема не может переопределять шаблоны страниц, размещенные во вложенной папке родительской темы.

После того, как вы определились с шаблоном именования, давайте продолжим и создадим шаблон страницы.

Создание шаблона страницы

Сделайте копию page.phpи переименуйте его в pagetemplate-fullwidth.php. Чтобы превратить его в шаблон страницы, вам нужно только добавить комментарий в самом начале, который сообщает WordPress, что это шаблон страницы:

<?php 
/*
Template Name: Fullwidth 
*/
get_header(); ?>
<?php 
if (have_posts()) {
...

Все, что вам нужно, это комментарий в самом начале файла с «Имя шаблона:» и имя вашего шаблона после него. Вот и все! Зайдите в админку, отредактируйте страницу, и вы должны увидеть возможность выбрать «Полная ширина» в качестве шаблона.

Я упоминал, что в WordPress 4.7 вы можете определить, для каких типов записей вы хотите, чтобы шаблон страницы был доступен. Прямо сейчас это доступно только для страниц, но, скажем, вы хотите, чтобы сообщения также отображались на полную ширину? В этом случае добавьте «Тип сообщения шаблона:» внутри того же блока комментариев и укажите типы сообщений, разделенные запятой. Например, сделать его доступным как для постов, так и для страниц;

<?php 
/*
Template Name: Fullwidth 
Template Post Type: post, page
*/
get_header(); ?>
<?php 
if (have_posts()) {
...

Отредактируйте сообщение, и вы должны увидеть новый метабокс «Атрибуты сообщения», где вы можете выбрать шаблон полной ширины. Хороший!

Изменение кода в нашем шаблоне страницы

Теперь давайте отредактируем шаблон страницы, чтобы он фактически делал что-то отличное от представления одной страницы. Удалим запрос на шаблон сайдбара: (я закомментировал его, чтобы он был более заметен, но вы можете просто удалить строчку).

...
    ?><p><?php _e('No posts, sorry.', 'wptutorial'); ?></p><?php
}
//get_sidebar(); 
get_footer(); ?>

Давайте сделаем еще одну вещь, чтобы упростить оформление нашего шаблона страницы. Когда вы добавляете CSS, вам часто нужно знать, есть ли на странице боковая панель или нет, чтобы настроить столбцы/макет. Помните body_class, что предоставляет целую кучу полезных классов для элемента body? Что, если мы добавим в тело пользовательский класс, который сообщает нам, есть ли на текущей странице боковая панель или нет?

Фильтроватьbody_class

Примечание. Возможно, вы заметили, что любая страница или запись, использующая шаблон страницы, уже получает определенный класс тела; «page-template-» — в нашем примере "page-template-pagetemplate-fullwidth". Это довольно длинный класс, и, кроме того, мы хотим сделать нашу тему более гибкой — и разрешить использование полной ширины в других шаблонах, кроме тех, которые используют шаблон страницы. Например, обычно вам не нужна боковая панель на главной странице, верно?

Примечание. Это только добавляет класс к телу, поэтому стиль упрощается, но фактически не отключает вывод боковой панели. Вы должны помнить, чтобы удалить get_sidebar()везде, где вы не хотите.

Давайте добавим фильтр для body_classдобавления пользовательского класса боковой панели в наш functions.php, чтобы вы могли позже добавить к нему больше в других случаях, когда вам не нужна боковая панель. В WordPress есть хороший условный тег для проверки того, используется ли шаблон страницы; is_page_template()где вы указываете имя шаблона вашей страницы в качестве параметра. Мы хотим добавить класс, если это не так, поэтому добавляем реверс с помощью «!»:

add_filter('body_class', 'wptutorial_body_class_filter');
function wptutorial_body_class_filter($classes) {
    if (!is_page_template('pagetemplate-fullwidth.php')) {
        $classes[] = 'has-sidebar';
    }
    return $classes;
}

Скорее всего, при разработке шаблонов вы будете время от времени сталкиваться с шаблонами, в которые не хотите добавлять класс боковой панели, и по мере продвижения добавляйте эти случаи в этот файл if. Например, если вы не хотите, чтобы класс боковой панели отображался на главной странице, вы можете добавить !is_front_page(). Это добавит класс has-sidebar на все страницы, кроме главной страницы и шаблона страницы:

if (!is_front_page() && !is_page_template('pagetemplate-fullwidth.php'))

Вам решать, сколько шаблонов страниц вы хотите и что они должны содержать. Это было простое знакомство. Если вам интересно, как запрашивать другие сообщения внутри шаблонов страниц, взгляните на следующий шаг.