Создаем тему 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-кода;
• Как задать вывод характерного изображения только в определенных шаблонах страниц, и не выводить его в других шаблонах;
• Использование разных боковых панелей и подвалов с разными шаблонами страниц. Для более продвинутых разработчиков добавление пользовательских функций или обращений к определенным шаблонам страницы, чтобы изменить данные, которые выводятся на странице, или то, как, они выводятся.