Посібник із теми 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()) {
...

Все, що вам потрібно, це коментар на самому початку файлу з «Назва шаблону:» і ім’я вашого шаблону після нього. Це воно! Увійдіть в адмін, відредагуйте сторінку, і ви побачите опцію вибрати «Fullwidth» як шаблон.

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

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

Відредагуйте публікацію, і ви побачите нове метабокс «Атрибути публікації», де ви можете вибрати шаблон Fullwidth. приємно!

Зміна коду в нашому шаблоні сторінки

Тепер давайте відредагуємо шаблон сторінки, щоб він справді мав щось інше, ніж перегляд однієї сторінки. Давайте видалимо запит на шаблон бічної панелі: (я прокоментував це, щоб зробити його більш видимим, але ви можете просто видалити рядок).

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

Давайте зробимо ще одну річ, щоб зробити наш шаблон сторінки легшим для стилізації. Коли ви додаєте CSS, вам часто потрібно знати, чи є на сторінці бічну панель чи ні, щоб налаштувати стовпці/макет. Пам’ятайте body_class, який надає цілу низку корисних класів для елемента body? Що, якби ми додали спеціальний клас до 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'))

Ви самі вирішуєте, скільки шаблонів сторінок ви хочете та що вони мають містити. Це був лише простий вступ. Якщо вас цікавить, як надсилати запити іншим публікаціям у шаблонах сторінок, подивіться на наступний крок.