Як створити свій шаблон сторінки для сайту на WordPress

Типи постів на WordPress є широким полем діяльності для розробників. Спочатку WordPress включає 5 основних типів постів: запис, сторінка, вкладення, ревізія і навігаційне меню.

Записи та сторінки є основними типами постів для розміщення контенту на сайті. І між ними є кілька відмінностей.

Дивіться також:

• Що слід знати про формати постів у WordPress
• Що таке Формати постів у WordPress і для чого вони потрібні
• Як користуватися форматами постів WordPress
• Посібник з кастомних типів записів WordPress
• Custom Post Types: таксономії, фільтри та архіви в WordPress

Записи, як правило, відображаються у зворотному порядку на головній сторінці блогу, а сторінки відображаються без дати публікації. Категорії та теги також можуть бути прив'язані до записів, а до сторінок немає (хоча це можна зробити в налаштуваннях).

Сторінки можна структурувати по порядку. Це особливо корисно для організації контенту для власників сайту та відвідувачів.

Дизайн сторінок також легко можна змінити, якщо використовувати різні шаблони сторінок. Вони дозволять змінити стиль будь-якої сторінки на вашому сайті.

Давайте розглянемо детальніше, які шаблони сторінок існують, і як їх можна використовувати для сайту.

Чому не використовувати різні шаблони сторінок?

У темах WordPress зазвичай використовується шаблон page.phpщо визначає стиль усіх сторінок сайту. Більшість розробників тем створюють шаблон початкової сторінки за таким же принципом. У цьому шаблоні відображається контент сторінки і за замовчуванням визначається, які елементи дизайну будуть на ній (наприклад, шапка, сайдбар, футер, інше).

За замовчуванням шаблон сторінки (page.php) налаштований таким чином, що весь потрібний контент відображається на сторінці.

Створення унікального шаблону сторінки дозволяє вийти за рамки стандартів WordPress та змінити відображення вмісту на сайті на власний розсуд. Наприклад, ви могли б змінити дизайн сторінок, вилучивши сайдбар. Також можна змінити звичний шрифт та використовувати іншу шапку, а не ту, яку пропонує домашня сторінка.

Найбільш відомий користувальницький шаблон сторінки - це архів (шаблон архівної сторінки archive.php). Він є у багатьох темах WordPress та містить весь контент сайту, який поділений на сторінки, категорії, теги, дати архівів, авторські архіви.

Багато шаблонів архівів також відображають повний список записів у блозі та полі для пошуку записів на сайті. По суті шаблон архіву - це карта сайту, за допомогою якої користувач може знайти те, що шукає.

У темах можна знайти й інші типи шаблонів сторінок, наприклад:

• Контактну форму
• Сторінки без сайдбару (бічної панелі)
• Лендінгову сторінку (посадкову сторінку)
• Індекс блогу

Можливості шаблонів сторінок безмежні. Все залежить від того, наскільки зручним ви хочете зробити свій сайт для користувача.

Як вибрати шаблон для сторінки?

Додати шаблон для сторінки дуже просто. У редакторі сторінки праворуч ви побачите віконце (віджет) під назвою «Атрибути сторінки». Воно розміщене під віконцем.Опублікувати».

В атрибутах сторінки можна вибрати батьківську сторінку та порядок її розміщення на сайті у відповідному полі. А опція між ними дозволяє змінити шаблон. Все, що потрібно зробити - це вибрати шаблон для сторінки та оновити її.

Шаблон також можна змінити в інший спосіб – через список усіх сторінок. Потрібно тільки натиснути на «Властивості».

Потім змінити шаблон в опціях меню праворуч.

Опції шаблону не відображатимуться, якщо у вашій темі використовується лише стандартний шаблон сторінки.

Створюємо базовий шаблон сторінки для сайту

Створити новий шаблон сторінки для вашого сайту WordPress легше, ніж ви думаєте. Для цього не потрібно мати досвід у розробці та створенні тем чи плагінів.

Потрібно лише використовувати код page.php вже існуючого шаблону теми як основу нового шаблону сторінки. Наприклад, ви використовуєте стару стандартну тему Двадцять дванадцять. Файл page.php має наступний код:

<?php
/**
 * The template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
 
get_header(); ?>
 
    <div id="primary" class="site-content">
        <div id="content" role="main">
 
            <?php while ( have_posts() ) : the_post(); ?>
                <?php get_template_part( 'content', 'page' ); ?>
                <?php comments_template( '', true ); ?>
            <?php endwhile; // end of the loop. ?>
 
        </div><!-- #content -->
    </div><!-- #primary -->
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

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

/*
Template Name: My Custom Page Template
*/

Шаблон вашої сторінки буде виглядати так:

<?php
/*
Template Name: My Custom Page Template
*/
 
Далее идет код шаблона страницы

Давайте розглянемо процес створення базового шаблону сторінки та спробуємо створити шаблон сторінки на повну ширину без використання сайдбару. Тема Twenty Twelve спочатку включає шаблон в повну ширину, але ми вдамо, що це не так, тому що нам це потрібно для нашого навчання.

У стандартному шаблоні сайдбар сторінки відображається праворуч:

Стандартний шаблон сторінки у темі Twenty Twelve

Створити новий шаблон сторінки без сайдбара просто.

Спочатку потрібно створити новий файл, використовуючи будь-який текстовий редактор (Блокнот або Notepad++ підійде). Його можна назвати якось по-простому, наприклад, nosidebar-page.php або full-page.php (про назви файлів поговоримо трохи пізніше). Потім завантажте файл на ваш сайт таким чином, щоб він був поруч із файлом page.php.

По суті, наш шаблон - це шаблон від page.php теми Twenty Twelve, тільки з віддаленим кодом?php get_sidebar(); ?>.

Він виглядає так:

<?php
/*
Template Name: Full Width Page with No Sidebar
*/
 
get_header(); ?>
 
    <div id="primary" class="site-content">
        <div id="content" role="main">
 
            <?php while ( have_posts() ) : the_post(); ?>
                <?php get_template_part( 'content', 'page' ); ?>
                <?php comments_template( '', true ); ?>
            <?php endwhile; // end of the loop. ?>
 
        </div><!-- #content -->
    </div><!-- #primary -->
 
<?php get_footer(); ?>

Після завантаження файлу шаблону у тему його можна використовувати для всіх сторінок. Можна також прив'язати сторінку до цього шаблону, щоб видалити сайдбар.

Але це ще не все. Поки що ми тільки видалили сайдбар. Нам треба зробити так, щоб контент розміщався по всій ширині сторінки. А поки що він займає лише дві треті сторінки:

Якщо ви подивіться код нашого шаблону, то побачите, що основна частина контенту знаходиться під дією певного класу CSS:

<div id="primary" class="site-content">

За стиль основної частини контенту відповідає друга частина class="site-content". Якщо перевірити файл стилів (style.css) теми, то можна помітити, що цей клас знаходиться майже в самому низу:

.site-content {
        float: left;
        width: 65.104166667%;
    }

Для того, щоб розширити контент на всю сторінку, нам потрібно змінити ширину області контенту з 65% на 100%. Не потрібно змінювати клас контенту сайту, т.к. він, як і раніше, використовується в інших шаблонах, як, наприклад, стандартна сторінка page.php та шаблон записів single.php. Зміна відсотка для контенту сайту вплине на всі записи і сторінки на вашому сайті, які займають всю ширину сторінки.

Тому нам потрібно створити новий клас, який вживається спеціально для сторінок із повною шириною:

.site-content-fullwidth {
        float: left;
        width: 100%;
    }

Після оновлення файлу style.css з вищевказаним класом нам потрібно змінити наш шаблон з повною шириною сторінки і бути впевненими, що ми створили посилання на клас CSS із шириною 100%:

<div id="primary" class="site-content-fullwidth">

Наш фінальний шаблон виглядатиме так:

<?php
/*
Template Name: Full Width Page with No Sidebar
*/
 
get_header(); ?>
 
    <div id="primary" class="site-content-fullwidth">
        <div id="content" role="main">
 
            <?php while ( have_posts() ) : the_post(); ?>
                <?php get_template_part( 'content', 'page' ); ?>
                <?php comments_template( '', true ); ?>
            <?php endwhile; // end of the loop. ?>
 
        </div><!-- #content -->
    </div><!-- #primary -->
 
<?php get_footer(); ?>

Цей оновлений шаблон підтверджує, що контент на нашому сайті відображатиметься на всю сторінку:

Тепер контент на сайті відображається по всій сторінці

Все, що зазначено вище, можна зробити у будь-якій темі WordPress. Для цього видаліть сайдбар із створеного шаблону сторінки та переконайтеся, що ви змінюєте потрібний клас таблиці стилів.

Як називати шаблони сторінок

Згідно з Ієрархія шаблонів WordPress, WordPress відображає шаблони для сторінки в наступному порядку:

• Шаблон користувача (Custom Template)
• page- {slug} .php
• page-{id}.php
• page.php
• index.php

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

Цей порядок означає, що на WordPress завжди відображатиметься шаблон для сторінки, якщо він був прикріплений до неї. Якщо до сторінки не було додано жодного із шаблонів, то WordPress буде шукати page-{slug}.php.

Якщо шаблон page-{slug}.php не знайдено, WordPress шукає шаблон на ID сторінки. Наприклад, якщо ID сторінки = 15, WordPress буде шукати шаблон сторінки з назвою 15.php.

Якщо шаблон не прив'язаний до сторінки і немає збігів з ID сторінки, WordPress шукає за стандартним шаблоном сторінки page.php. І якщо сторінки шаблону page.php немає, то для пошуку використовується index.php.

Багато розробників називають свої шаблони теми, використовуючи формат page-name.php. Наприклад, шаблон сторінки контактів називають page-contact.php. За великим рахунком, ви можете давати шаблонам назви на свій розсуд і використовувати будь-які конфігурації, будь то page-name.php, name-page.php або name.php. У будь-якому випадку, у майбутньому ви зможете змінити ці назви.

Джерело: elegantthemes.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/