Как добавить шаблон страницы WordPress. 3 популярных способа

от

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

Существует несколько способов добавить собственный шаблон страницы в WordPress:

  1. Через файл темы: Создайте новый файл в папке вашей темы и добавьте в него необходимые функции и HTML-код. Начинайте файл с комментария, определяющего шаблон: 
    <?php
/*
Template Name: Имя вашего шаблона
*/
?>
  2. Используя конструкторы страниц: Многие плагины, такие как Elementor или Beaver Builder, позволяют создавать уникальные страницы без необходимости редактирования кода. Вы просто тянете и бросаете элементы на страницу, что делает процесс более удобным.
  3. С помощью дочерней темы: Если вы хотите вносить изменения в шаблон, не затрагивая основной, создайте дочернюю тему. Это позволит вам изменять шаблоны и стили без риска потерять изменения при обновлении основной темы.

Каждый из этих способов имеет свои преимущества, и выбор метода зависит от ваших целей и уровня комфорта с кодированием. Не забудьте протестировать различные вариации шаблонов, чтобы найти идеальное оформление для вашего сайта!

Страница и запись в WordPress

По умолчанию в WordPress возможно создание двух типов записей: страниц (page) и записей (post). В контексте блога записи типа post играют ключевую роль. Они отображаются на главной странице, представлены в архивах и классифицируются по категориям. Страницы чаще всего используются для таких разделов, как О компании, Обо мне, Контакты, Карта сайта, Информация о доставке и так далее. Эти страницы не отображаются в архиве и не попадают в список всех записей на главной странице. Добавить страницы можно в навигационное меню сайта, боковую панель или подвал. В административной панели существует отдельный раздел для управления записями и страницами.

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

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

Иерархия файлов страниц

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

  • .php (если используется шаблон страницы)
  • page-.php
  • page-.php
  • page.php
  • singular.php
  • index.php

Это означает, что перед тем как вывести страницу на сайте, система WordPress ищет соответствующие файлы в шаблоне в указанной последовательности. Как только файл найден, он будет выведен на сайте.

К примеру, если в вашей теме имеются файлы page-contacts.php и page.php, согласно иерархии, на сайте будет использован файл page-contacts.php.

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

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

Также стоит упомянуть, что в WordPress есть возможность применять фильтры и хуки для изменения поведения иерархии шаблонов. Например, разработчик может использовать хук ‘template_include’, чтобы изменить путь к файлу шаблона или даже создать полностью динамическое отображение контента.

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

Как создать шаблон страницы WordPress?

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

Создание через файл шаблона

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

Чтобы создать файл, необходимо подключиться к вашему сайту по FTP и перейти в папку с шаблоном site.ru/wp-content/themes/your-template.

Хотелось бы напомнить, если вы используете шаблон, который часто обновляется, все изменения следует вносить в дочернюю тему.

Вы можете создать файл и в папке шаблона, однако для файлов шаблонов рекомендую создать отдельную директорию, например templates. В ней создайте новый файл php. Имя файла может быть любым, но старайтесь выбирать понятные названия.

Например, создадим шаблон для страницы Контакты. Определим файл templates/contacts.php. Теперь откройте его для редактирования и в начале добавьте специальный код, который сообщает ядру WordPress, что это шаблон страницы.

После этих строк можно начать писать код для шаблона страницы. Я рекомендую скопировать весь код из файла page.php и внести изменения в новом файле.

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

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

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

Плюсы и минусы:

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

Добавление шаблона для конкретной страницы

Каждая страница в WordPress имеет уникальные идентификаторы: id и slug. Зная их, вы сможете создать шаблон для определенной страницы.

Slug обозначает URL адрес страницы и его можно найти в правой колонке во время редактирования.

ID — это уникальный номер записи. Его можно узнать, взглянув на URL страницы редактирования.

Если ваш slug страницы составляет contacts, создайте новый файл с именем page-contacts.php в каталоге темы. При переходе на страницу Контакты должен загружаться новый шаблон.

Подобным образом можно создать шаблон, основываясь на ID. Например, если id вашей страницы равен 19, необходимо добавить файл page-19.php в папку с шаблонами. Этот файл будет отвечать за содержание страницы с указанным ID.

Плюсы и минусы:

  • Возможность работы исключительно с файлами шаблонов без необходимости редактирования страниц в админской панели.
  • Такой шаблон будет применяться лишь к одной странице. Если есть намерение использовать его на нескольких страницах, данный метод не будет подходящим.
  • При изменении slug страницы, шаблон с именем файла page-.php перестанет функционировать.

Замена файла шаблона страницы с помощью хука template_include

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

Создайте файл в папке с шаблонами. Имя файла вы можете выбрать произвольно, но желательно, чтобы оно было понятным, например, template-contacts.php.

Затем откройте файл functions.php в вашей теме и в конце добавьте следующий код:

add_filter( 'template_include', 'override_page_template' );
function override_page_template($template) {
if (is_page('contacts')) {
$template_contacts = locate_template(['template-contacts.php']);
if ($template_contacts) return $template_contacts;
}
return $template;
}

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

Таким образом, применяя условную логику в функции override_page_template, вы можете заменить любой файловый шаблон.

Плюсы и минусы:

  • Универсальный метод, позволяющий реализовать любую логику загрузки файлов шаблона.
  • Сложность реализации. Нужны навыки программирования и понимание работы WordPress.

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

Рекомендации по созданию шаблонов

При создании шаблонов страниц рекомендуется следить за тем, чтобы структура кода оставалась понятной. Используйте комментарии в коде, чтобы объяснить, какие функции выполняются в каждом разделе шаблона.

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

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

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

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

Файл front-page.php

Форматирование главной страницы обеспечивает файл front-page.php. Если такого файла в вашей теме нет, создайте его и настройте по своему усмотрению. В этом файле вы можете использовать HTML, CSS и PHP для создания уникального дизайна, добавления виджетов, изображений и других элементов, соответствующих вашему бренду.

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

После создания файла зайдите на главную страницу сайта, чтобы проверить его функциональность.

Опция «На главной странице отображать»

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

Перейдите в админке по пути Настройки > Чтение. Установите флажок для опции Статическая страница и в выпадающем списке выберите страницу, которая должна отображаться на главной. Убедитесь, что эта страница содержит актуальный контент, такой как описание вашей компании, услуги или контактную информацию для удобства пользователей.

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

Также, если вы используете плагины, такие как Elementor или WPBakery, вы можете значительно упростить процесс редактирования и настройки дизайна главной страницы с помощью визуального редактора.

Оставьте комментарий