Создаем тему WordPress на базе статического HTML: Создаем шаблон страницы
На данный момент я уже показала вам, как создать полностью рабочую тему WordPress из статического HTML-файла.
Мы рассмотрели следующие шаги:
- Подготовка разметки под WordPress;
- Конвертация HTML в PHP и разделение HTML-файла на файлы шаблонов;
- Редактирование стилей и загрузку темы в WordPress;
- Добавление цикла в ваш индексный файл;
- Добавление мета-тегов, обращения wp_head, а также заголовка и описания сайта в файл заголовка;
- Добавление меню навигации;
- Добавление области виджетов в заголовок и боковую панель;
- Добавление области виджетов и обращения wp_footer в файл футера.
Сейчас ваша тема имеет только один файл шаблона для вывода контента - index.php. Важной особенностью WordPress является возможность применения шаблонов для различных видов контента.
В этой статье я расскажу вам о файлах шаблонов и о том, как вы можете использовать их. Затем я покажу, как создать наиболее распространенный файл шаблона - page.php, который используется для вывода статических страниц.
А потом расскажу, как создать другой файл шаблона страницы, который будет занимать всю ширину страницы, без боковой панели.
Что вам потребуется:
- Редактор по вашему выбору;
- Браузер для проверки результатов;
- Установленный на локальном или удаленном сервере WordPress;
- Если вы работаете на локальном сервере, вам потребуется MAMP , WAMP или LAMP, чтобы активировать тему WordPress;
- Если вы работаете удаленно, вам потребуется FTP доступ к вашему сайту, плюс права доступа администратора к установленному WordPress.
Обзор файлов шаблонов
Тема WordPress может содержать различные файлы шаблонов для отображения различного вида контента.
В том числе:
- Файл index.php, который имеет важное значение для работы темы и будет использоваться WordPress при отсутствии файла шаблона, который соответствует определенному типу контента;
- Файл page.php, который используется для отображения статических страниц (то есть не записей);
- Файл single.php для отображения одиночных записей;
- Файл archive.php для отображения архива записей - вы создадите его позже;
- Файлы шаблонов для постов и записей определенного типа;
- Файлы шаблонов для сообщений, принадлежащих конкретным категориям, тегам или библиотекам терминов;
- Файлы архивов для архивов контента разного типа (категории, теги, библиотеки терминов, списки сообщений, списки дат и так далее).
Для получения информации о том, какие еще шаблоны вы можете использовать в ваших темах, и том, как WordPress определяет, какие из них использовать в конкретной ситуации, ознакомьтесь с разделом Кодекса об Иерархии шаблонов.
1. Создание шаблона страницы
Первым шагом является создание файла шаблона для статических страниц.
В папке темы создайте пустой файл page.php.
Добавьте в него следующий код:
<?php
/**
* Шаблон для вывода всех страниц.
*/
get_header(); ?>
<div class="two-thirds" id="content"></div>
<!-- #content-->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Это создает основу вашего файла с обращениями к включаемым файлам заголовка, подвала и боковой панели, которые подключаются почти так же, как в файле index.php. Обратите внимание, что я открыла и закрыла #content div так же, как в файле index.php.
Примечание: Вы можете также создать файл шаблона для страниц без боковой панели, который не будет содержать обращения к боковой панели. Я покажу вам, как это сделать чуть позже.
2. Добавление цикла
Шаблон страницы не будет работать без цикла, который вызывает содержимое страницы из базы данных.
Внутри #content div, добавьте следующий код:
<?php
// Запуск цикла страницы, который выводит содержимое.
if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>">>
<?php if ( ! is_front_page() ) { ?>
<h2 class="entry-title"></h2>
<?php } ?>
<section class="entry-content">
<?php the_content(); ?>
</section><!-- .entry-content -->
</article>
<!-- #post-## -->
<?php endwhile; ?>
Ваш шаблон страницы готов!
Теперь посмотрим, как выглядят статические страницы вашего сайта:

Как вы видите на скриншоте, моя статическая страница теперь выглядит немного по-другому.
Она не включает в себя метаданные, а на домашней странице нет заголовка. Заголовок исключается из домашней страницы с помощью тега условия if ( ! is_front_page() ), который проверяет, не является ли страница главной - если не является, ставится восклицательный знак, и тогда на ней выводится заголовок.
3. Создание второго шаблона страницы
Иногда, вам может потребоваться, чтобы содержимое страницы охватывало всю ширину экрана без боковой панели. Или же, чтобы содержимое страницы по-разному отображалось на разных страницах.
Для этого вы можете создать дополнительные шаблоны страниц. Они могут называться как угодно, только в названии должен присутствовать суффикс page-. В сам файл вы включаете текст комментариев, в котором WordPress указывается, что используется пользовательский шаблон страницы.
Начнем с того, что создадим копию файла page.php и назовем ее page-full-width.php.
Теперь откройте этот файл и добавьте следующий текст комментариев в начало файла, ниже открытия тега <?php:
/**
* Название шаблона: Страница на всю ширину, без сайд-бара
*/
Это сообщает WordPress имя шаблона страницы, теперь вы можете выбрать его в панели редактирования страницы. На данный момент ваш новый шаблон страницы идентичен шаблону по умолчанию, вам нужно будет его изменить.
Найдите следующую строку кода:
<div class="two-thirds" id="content">
Измените ее следующим образом:
</pre>
<div class="full-width" id="content">
Примечание: Этот класс работает с помощью OOCSS, которую я использую в своей теме. Возможно, чтобы сделать это, вам придется добавить дополнительный стиль в таблицу стилей.
Теперь найдите следующую строку:
<?php get_sidebar(); ?>
Удалите ее и сохраните файл.
4. Использование шаблона страницы на всю ширину экрана
Последним шагом является назначение нового альтернативного шаблона страницы для выведения содержимого страницы. На своем сайте я создам страницу под названием Контакты.
В панели редактирования «Страница», вы найдете в выпадающем списке «Атрибуты страницы» пункт «Шаблон».
Здесь вы можете выбрать свой шаблон страницы на всю ширину, как это показано на скриншоте:

Сохраните страницу и просмотрите ее в браузере. Боковая панель отсутствует, и ваш контент охватывает всю ширину страницы:

Заключение
Шаблоны страниц - это действительно полезная функция WordPress. Они помогают отображать содержимое статических страниц именно так, как вы хотите. С помощью собственных шаблонов страниц вы можете представлять содержимое различных страниц по-разному.
Есть еще очень много моментов, которые касаются пользовательских шаблонов страниц в WordPress.
Например:
- Добавление дополнительного содержимого в некоторые шаблоны страниц, либо в виде второго цикла с использованием WP_Query или статического HTML-кода;
- Как задать вывод характерного изображения только в определенных шаблонах страниц, и не выводить его в других шаблонах;
- Использование разных боковых панелей и подвалов с разными шаблонами страниц. Для более продвинутых разработчиков добавление пользовательских функций или обращений к определенным шаблонам страницы, чтобы изменить данные, которые выводятся на странице, или то, как, они выводятся.