КАК СОЗДАТЬ ШАБЛОН ДЛЯ СТРАНИЦ WORD PRESS

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

Например, для визуализации боковой панели используется шаблон с именем sidebar.php. За вывод отдельной записи отвечает файл single.php, а за “шапку” — header.php. Благодаря этому, можно довольно гибко настроить отображение тех или иных элементов WordPress-сайта.

Система шаблонизации в WordPress позволяет также создавать шаблоны для отдельных страниц. Например, внешний вид страницы Об авторе может отличаться от остальных. Так, на ней можно убрать с глаз посетителя лишние элементы сайта (например, панель виджетов), сосредоточив его внимание на биографии автора или предоставляемых им услугах.

Для начала нужно еще раз напомнить, что из себя представляет Страница в WordPress.

Создать отдельный шаблон для той или иной страницы можно несколькими способами. Они используют разные инструменты реализации, но дают один и тот же результат. Рассмотрим наиболее популярные среди WordPress-пользователей и разработчиков.

Ещё читайте про создание произвольного типа записей в WordPress через register post type.

Способ 1. Подключение файла шаблона через админ-панель

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

Для начала необходимо перейти в каталог Вашей активной WordPress-темы, которая находится по адресу wp-content hemesНАЗВАНИЕ_ТЕМЫ. В ней нужно создать PHP-файл шаблона с его названием. Например:

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

Дальше в файл следует добавить специальный код, который сообщает системе, что доступен новый шаблон:

Директива Template Name как раз и указывает на то, что есть доступный к выбору шаблон страницы. После двоеточия указывается само название (тоже произвольное).

На следующем этапе нужно создать (или выбрать уже существующую) страницу, для которой и будет применен созданный шаблон. Это можно сделать в админ-разделе Страницы.

В правой части окна редактора страницы можно увидеть панель Атрибуты страницы, где есть опция Шаблон.

Именно в ней и задается шаблон. Видно, что по умолчанию используется значение Базовый шаблон. За него отвечает файл page.php. Если щелкнуть по этому значению, то можно заметить, что там также присутствует созданный нами шаблон.

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

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

Способ 2. Подключение файла шаблона через иерархию шаблонов

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

Мы можем воспользоваться этим, создав необходимый файл шаблона для конкретной страницы. Определить страницу можно двумя способами: либо задать ее слаг, либо уникальный идентификатор (ID). В обоих случаях нужно будет создать PHP-файл с необходимым шаблоном.

Преимуществом такого способа является то, что система автоматически, найдя этот файл, применит его к нужной странице.

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

Способ 3. Подключение файла шаблона через фильтр template_include

Способ предусматривает добавление специального PHP-кода в файл functions.php Вашей активной WordPress-темы.

Если Вы не знаете, как редактировать functions.php, то в этом случае Вам поможет плагин .

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

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

Как уже было сказано в самом начале, все способы успешно решают одну и ту же задачу. Какой из них выбрать — решать только Вам.

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

Поддержка шаблонов для постоянных страниц — записей типа page была неизменна аж 12 лет. И помогала разработчикам удобно создавать шаблоны для страниц, но была всегда ограничена только типом записи page. Однако с версии WordPress 4.7 положение дел изменилось и теперь можно создавать шаблоны для абсолютно любых типов записей.

Шаблоны страниц (записей типа page)

После этого на странице редактирования постоянной страницы в разделе «Свойства страницы» появится возможность выбрать этот шаблон.

Файл шаблона можно поместить и во вложенную папку в корне темы, WP его найдет. Например, в корне темы можно создать папку templates и все шаблоны складывать туда.

Шаблоны для записей произвольного типа

С версии WordPress 4.7 функционал шаблонов страниц расширился. И теперь можно создавать шаблоны для страниц любого типа.

Чтобы указать, что создаваемый файл шаблона поддерживается типом записи, название этого типа записи нужно указать в заголовке: Template Post Type: Несколько типов записей можно указать через запятую.

Теперь на страницах редактирования записей типов: post, page, product, можно будет выбрать шаблон «Мой шаблон страницы».

Заметки разработчикам

В этом уроке мы с вами разберёмся, как создать свою тему для WordPress с нуля. Ну почти с нуля – мы же планируем натягивать на WordPress свою HTML-вёрстку.

Первым делом вам нужно будет определиться, хотите ли начинать разработку на основе стартовых тем или же полностью с нуля. Про стартовые темы мы обязательно поговорим, но я не привык их использовать, поэтому не буду использовать и в уроке тоже.

Что будет в видеоуроке?

В видеоуроке мы сразу же начнём работать с готовой вёрсткой, которая выглядит вот так:

Для доступа к файлам вёрстки необходимо приобрести курс.

Сделаем первые шаги по натяжке этой вёрстки на WordPress, заменим статичные данные в HTML на динамичные при помощи таких функций WordPress, как wp_head(), wp_footer(), get_stylesheet_directory_uri(), get_stylesheet_uri(), bloginfo(), wp_get_document_title(), language_attributes(). Объясняю принцип действия каждой функции.

Cтартовые темы. Что это такое и для чего они нужны?

Когда мы создаёт тему с нуля, мы ручками создаёт директорию, в ней потом создаём два файла – index.php и style.css – смотрите следующий шаг.

Возможно стартовые темы придумали те люди, которые, так же как и я, не умеют создавать файлы на MacOS 😅

Первоначально стартовые темы задуманы для упрощения этого процесса – чтобы вам вроде как пришлось меньше писать один и тот же код. Вроде как. Когда я только начинал свою карьеру в создании WordPress-тем, и когда даже не знал о существовании стартовых тем (а может их и вовсе не было), я задумывался о создании своего собственного «темплейта», то есть стартовой темы, при помощи которой я бы мог сэкономить себе время.

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

Тем не менее, если вдруг вы приноровитесь к использованию какой-либо стартовой темы в своей работе – круто, молодцы! Я ничего не имею против, к тому же самую популярную стартовую темы Underscores разработали ребята из Automattic (компания, которая стоит за WordPress.com). Если вы почувствовали некоторый эмоциональный подтекст в моих словах, это только потому что я встречал людей, которые считают, что разрабатывать нужно ТОЛЬКО на стартовых темах, и обучаться тоже на них.

Приступаем к созданию темы. Файлы index. php и style. css

Для начала создайте какую-нибудь папку в /wp-content/themes — это и будет ваша будущая тема, я например создал kurs (очень оригинально). Каждая тема должна содержать по крайней мере 2 файла — это index.php и style.css — создаём их внутри этой папки.

Если же отсутствует файл index.php, то:

Тут WordPress ещё что-то болтает про дочерние темы, не обращайте внимания, вам про них ещё рано читать.

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

До тех пор, пока мы ещё не изучили другие файлы шаблона, index.php у нас будет отвечать за вывод любой страницы сайта, а style.css, понятное дело, содержать стили (хоть это и не обязательно), но главное, чтобы в файле style.css вы добавили метаданные и описание темы.

Параметры (метаданные) темы

/*
* Theme name: Тема для курса
* Author: Миша
* Author URI: https://misha.agency
* Version: 1.0
*/

Но дело в том, что существуют и другие параметры темы, которые вы можете использовать, вот их список:

Описание темы, которое будет отображаться в админке.

Версия темы, например 1.0

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

URL на сайт автора, позволит превратить имя автора в ссылку в админке WordPress.

Если вы создаёте под WordPress, рекомендую почитать немного про лицензию GPL

А в этом параметре указывается ссылка на страницу с лицензией.

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

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

Параметр только для дочерних тем, подробнее тут.

Изображение темы

Для того, чтобы в качестве изображения темы не отображался «фотошоповский фон», мы создадим файл screenshot.png и отправим его прямиком в папку с темой (рекомендуемое разрешение 1200px на 900px).

Что касается расширения файла, то сгодится и jpg и gif, и jpeg, но в официальной документации WP рекомендуется всё же использовать screenshot.png.

Вот что у меня получилось:

После того, как вы начинаете добавлять первый HTML в теме, то вам сразу же нужно сделать две вещи:

Что-то типо этого:

Это обязательное условие для всех тем WordPress, благодаря этим функциям работают плагины (даже банально плагин для вставки кода Google Analytics на сайт), подключаются различные дополнительные CSS и JS в тему и так далее. Чуть более подробно описываю предназначение этих функций на видео.

Functions. php

Трудно представить тему для WordPress, в которой отсутствует файл functions.php, он используется для включения каких-либо функций темы, например:

Также он сам может содержать какой-то дополнительный функционал, ну либо файлы, подключенные в него через include() / require().

Главное правило по functions.php — сам по себе файл не должен ничего выводить! 💀 То есть никогда не оставляем первую строку пустой! 👿

И никогда не обрываем PHP-код пустыми строками где-то посередине кода! 👿

Это очень распространённая ошибка. Очень!

Пока что можете создать пустой файл functions.php в папке с вашей темой.

Пример работы с functions. php. Что делать, если админ-панель наехала на вёрстку сайта?

После того, как мы вставили в наш шаблон функции wp_head() и wp_footer(), у нас появилась админ панель сверху сайта, которая налезла на вёрстку.

Такое случается практически всегда, когда в вашей вёрстке присутствуют фиксированные меню.

В видеоуроке я решил не заморачиваться и просто скрыл админ-панель при помощи этой строки кода в functions.php:

Также я показал, как это делать через настройки сайта. Однако, как поступить, если она вам нужна и вы не хотели бы её скрывать?

В этом случае нужно сделать некоторые небольшие изменения в CSS вёрстки, когда у нас фиксированное меню, оно имеет CSS-свойство top:0, верно?

После добавления соответствующих CSS-стилей вы можете заметить, что изменения применяются даже тогда, когда админ-панель не отображается на сайте! (например для незарегистрированных пользователей). Что делать?

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

Что делать, если в процессе создания темы WP у вас всё сломалось и отображается белый экран?

Как известно для категорий и страниц можно задавать свои шаблоны. Мануал по иерархии шаблонов wordpress тут.
В нужных случаях можно создавать шаблоны и для Записей.

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

Плагин Clone S. P. C. делает копию файла шаблона:

Для шаблонов страниц, плагин автоматически добавляет код в начало файла, чтобы его можно выбрать в списке тем для страниц.

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

Пример названия нового шаблона для страницы:
page-contacts.php (в форму вы должны ввести только слово contacts, слово означает название шаблона)

Пример названия нового шаблона для категории:
category-1.php (в форму вы должны ввести только цифры указывающие ID рубрики.)

Данный плагин так же дает возможность делать копии шаблон single.php для отдельных записей из определенной категории. К примеру для категории с (ID = 4 или SLUG = articles) у всех записей нам нужен отдельный шаблон отображения записей.

Как подключить возможность манипуляции с шаблонами single.php:

У каждой категории есть свой ID и SLUG.
ID – представляет из себя «уникальный порядковый номер» категории
SLUG – это название категории на английском языке

В файл functions.php вашей темы нужно прописать один из ниже представленных кодов, первый определяет шаблон для всех записей находящихся в категории по SLUG, а второй по ID:

Установка:
1. Скачиваем плагин по этой ссылке
2. Активируем плагин
3. Смотрим в раздел Параметры, жмем на Clone SPC.

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

В WordPress можно создавать страницы (page) и записи (post). Отличаются они тем, что записи: попадают в ленту на главной странице; для записей указываются категории; записи не могут быть древовидными, а страницы: используются для такого содержимого как «Обо мне», «Контакты», «Карта сайта»; не имеют категорий, а имеют древовидную структуру. Записи обычно предназначены для хронологической информации (по времени добавления), а страницы для древовидной структуры не зависимой от времени. Для примера, эта статья опубликована как «запись» в рубрике «Кодекс», а ссылки в меню шапки ведут на страницы: Функции.

Страницы похожи на записи — они расположены в одной таблице базы данных и данные у них почти одинаковы: заголовок, текст, дополнительные поля и т.д.

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

Создание страниц в WordPress

Часто нужно создать отдельный шаблон страницы, чтобы вывод информации отличался от остальных страниц. Создавая шаблон страницы в WordPress, можно совершенно изменить страницу: удалить сайдбар, подвал, шапку, можно изменить страницу до неузнаваемости. Например, на этом сайте так изменяется страница на которой выводятся коды файлов WordPress.

Шаблон страницы через файл с произвольным названием (классический способ)

Это самый распространенный способ создать шаблон страницы в WordPress. Для этого нужно создать .php файл, например, tpl_my-page.php в папке темы и в самом начале файла вписать метку, что созданный файл является шаблоном для страниц:

Теперь при создании страницы в админ-панели в блоке «Свойства страницы» мы сможем выбрать «шаблон»:

/*
Template Name: Мой шаблон страницы
Template Post Type: post, page, product
*/

Подробнее читайте в отдельной статье.

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

Как это работает:

Когда вы заходите в админ-панель на страницу редактирования записи древовидного типа, WordPress просматривает все .php файлы в корневой папке темы и в всех вложенных папках (просматривается один уровень) на наличие следующей строки (строка может располагаться где угодно и как угодно в файле):

Template Name: ***

Все файлы с подобными строками собираются и выводятся в выбор шаблона в блок «Атрибуты страницы».

При публикации страницы, в произвольное поле _wp_page_template записывается название файла шаблона или default, если шаблон не указан:

_wp_page_template = default
_wp_page_template = tpl_my-page.php

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

Локализация названия шаблона

/**
* Template Name: Мой шаблон страницы
* Template Post Type: post, page, product
*/
__( ‘Мой шаблон страницы’, ‘my-theme’ );

my-theme — это ID перевода — параметр Text Domain:, который указывается в заголовках темы и при подключении файла перевода, см. load_theme_textdomain().

Шаблон страницы через файл с конкретным названием (иерархия файлов шаблона)

При создании страницы ей устанавливается ярлык (слаг, альтернативное название). Он используется в УРЛ страницы. И его можно изменить:

Изменение слага страницы

Для создание шаблона этим способом, вам нужно узнать слаг страницы и создать файл в папке темы. Допустим, наш слаг как на картинке равен contacts, тогда создадим в теме файл page-contacts.php. и заполним его нужным кодом (можно скопировать содержимое из файла шаблона page.php и отредактировать под себя). Все, теперь при посещении страницы мы должны увидеть новый шаблон. Аналогично можно взять ID (пусть 12) страницы и создать файл page-12.php.

Нет необходимости заходить в админ-панель и устанавливать файл шаблона. Шаблон начинает работать сразу после создания файла. Удобно при разработке.

Шаблон создается только для одной, конкретной страницы. Зависит от слага страницы, если он изменится шаблон работать не будет. Если использовать ID, то зависимость от слага пропадает, но становится непонятно в файла темы, к какой странице относится шаблон (если несколько шаблонов с ID).

Практически бесполезен при написании шаблонов, а тем-более плагинов. Его можно использовать, когда правишь свой сайт, в котором слаг или ID страницы известны заранее.

WordPeress подбирает какой файл использовать в следующем порядке (файлы должны быть в корне темы):

Шаблон страницы через фильтр «template_include» (коддинг)

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

Еще Примеры

Шаблоны позволяют управлять разметкой страниц. В отличие от тем, которые задают дизайн всего веб-сайта, шаблон влияет на внешний вид и восприятие отдельных записей и страниц (или групп записей и страниц). В этом руководстве рассказывается о том, как работать с шаблонами страниц.

Знакомство с шаблонами

Шаблон управляет отображением страницы.

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

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

Смена шаблона страницы влияет только на эту страницу, а не на весь веб-сайт.

Стандартные типы шаблонов

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

Самые распространённые шаблоны перечислены ниже.

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

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

Изменение шаблона

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

Чтобы редактировать шаблон, выполните описанные далее шаги.

Шаг 1. Выбор шаблона

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

Замедлите или ускорьте воспроизведение видео с помощью элементов управления в правом нижнем углу после нажатия кнопки «Воспроизведение»

Редактор шаблона также доступен при редактировании отдельной страницы или записи.

Изменения, внесённые в шаблон, будут применены ко всем страницам, на которых используется этот шаблон.

Завершив редактирование, нажмите стрелку «назад» в левом верхнем углу, чтобы вернуться на страницу, с которой вы работали. При публикации страницы вам также будет предложено сохранить изменения, внесенные в шаблон.

Шаг 2. Просмотр структуры шаблона

На экране редактирования шаблона вы увидите название редактируемого шаблона, а в разделе «Настройки» — «Шаблон».

Как понять, что вы редактируете шаблон

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

Представление в виде списка в редакторе шаблона

Шаг 3. Редактирование блоков шаблона

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

Возможности безграничны! Подробнее о том, как работает редактор WordPress, читайте здесь.

Шаг 4. Сохранение изменений

Закончив редактирование, нажмите Сохранить в правом верхнем углу.

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

Создание нового шаблона

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

В редакторе сайта

Slow down or speed up the video using the controls in the lower right corner after clicking Play

Из редактора страниц

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

Применение шаблона

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

Шаблоны по умолчанию

Некоторые шаблоны применяются автоматически и не могут быть применены к обычной странице.

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

Сбросить шаблон

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

Замедлите или ускорьте воспроизведение видео с помощью элементов управления в правом нижнем углу после нажатия кнопки «Воспроизведение».

Чтобы сбросить шаблон на экране редактирования, выполните следующие действия.

Когда и почему вы будете использовать шаблоны страниц WordPress?

Ваша тема WordPress должна включать все необходимые стандартные шаблоны страниц. Обычно для страниц используется файл page.php, для архивов — archive.php и т. д

Итак, зачем нужны пользовательские шаблоны страниц?

Существует два основных варианта использования шаблонов:

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

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

Хорошо, давайте посмотрим, как редактировать и создавать собственные шаблоны страниц WordPress с помощью встроенного редактора шаблонов.

В этом уроке мы будем использовать Twenty Twenty-Two (Blue), вариант стандартной темы WordPress Twenty Twenty-Two.

Проверьте, есть ли в вашей теме уже шаблоны

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

Самый простой способ начать — просто открыть страницу в редакторе страниц, а затем найти раздел «Шаблон» на панели «Сводка» с правой стороны. Нажмите на раскрывающееся меню, чтобы увидеть другие доступные параметры.

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

Когда вы нажмете на логотип WordPress в верхнем левом углу, откроется новое меню с параметрами «Шаблоны» и «Части шаблонов».

Здесь вы можете найти список шаблонов страниц, доступных на вашем сайте.

Для этой темы это включает в себя такие стандарты, как страница 404, архив, страница и шаблон одного сообщения, а также некоторые варианты.

С другой стороны, экран «Части шаблона» содержит такие вещи, как вышеупомянутые варианты верхнего или нижнего колонтитула.

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

Номер один — из меню «Редактор сайта», где WordPress перечисляет доступные шаблоны на вашем сайте. Просто нажмите на один из них, и откроется экран редактора шаблонов.

Если ваша цель — просто редактировать назначаемые пользовательские шаблоны, вы также можете сделать это из редактора страниц. Когда вы получаете доступ к списку шаблонов справа и выбираете там один из списка, вы также найдете опцию «Редактировать шаблон» внизу.

Нажмите на нее, и вы попадете на слегка уменьшенную версию того же экрана, что и раньше.

В примере ниже мы будем придерживаться именно этого.

Чтобы показать вам, как все работает, мы внесем некоторые изменения в один из доступных шаблонов пользовательских страниц. В данном случае это будет страница с именем «Страница (большой заголовок)». Вот как это выглядит по умолчанию.

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

Первое, что нам нужно сделать, это выбрать его, щелкнув по нему. Затем щелкните меню параметров на появившейся панели задач (три точки) и выберите «Заменить большой заголовок темным фоном».

Откроется меню с доступными частями шаблона для заголовка.

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

Вот и всё! Теперь вы можете прокрутить страницу вниз и сделать то же самое для нижнего колонтитула.

Сохраните изменения

Если вы удовлетворены своими изменениями, чтобы сделать их постоянными и перевести на свой сайт, вам необходимо их сохранить.

При использовании редактора шаблонов, доступного из редактора страниц, вы, возможно, уже заметили, что после внесения каких-либо изменений в шаблон кнопка «Опубликовать/Обновить» в правом верхнем углу получает небольшой индикатор, показывающий несохраненные изменения.

Когда вы нажмете на него, чтобы сделать их постоянными, вам будет предложено подтвердить это.

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

Сделайте свой выбор и нажмите кнопку «Сохранить», если вы уверены. Вот и все. Вот как шаблон страницы выглядит после:

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

Создать новый шаблон

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

Просто щелкните по нему и вернитесь обратно в редактор шаблонов. Редактируйте свой новый шаблон по своему усмотрению, пока он не будет готов к использованию.

С другой стороны, если ваша цель — создать шаблон для иерархии шаблонов, вам нужно сделать это из меню «Редактор сайта». Давайте рассмотрим два примера, чтобы показать вам оба пути.

Создайте страницу «О нас»

Чтобы добиться этого, было бы неплохо сделать его дружелюбным и привлекательным. Вот как мы попытались добиться этого в этом примере:

Вот результат:

Не так уж и плохо, правда?

Настройка пользовательской страницы 404

Вот как выглядит стандартная страница 404 в теме Twenty Twenty-Two:

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

Вот как после этого выглядит страница с ошибкой 404:

Отныне любой, кто попадет на несуществующую страницу сайта, увидит эту более полезную версию.

Однако сначала небольшое предупреждение: если вы собираетесь это сделать, избегайте внесения изменений непосредственно в файлы вашей основной темы. В противном случае вы потеряете всю свою работу при следующем обновлении (или создадите угрозу безопасности, не обновив ее). Поэтому всегда вносите эти изменения, сначала создавая дочернюю тему и внося в нее изменения. Чтобы изменить файлы шаблонов, вам также потребуется доступ к вашему серверу через FTP.

Найдите шаблон по умолчанию

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

Самый простой способ выяснить, какой файл шаблона страница, которую вы хотите изменить, работает в фоновом режиме, — это использовать один из плагинов, специально созданных для этой цели:

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

Скопируйте и переименуйте файл шаблона

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

Если это не ваша цель, вам придется дать файлу другое имя. Здесь тоже зависит от ваших планов.

Если вы хотите, чтобы WordPress автоматически использовал файл для определенной страницы, вам необходимо назвать его в соответствии с иерархией шаблонов (например, указать страницу по идентификатору или пулу). В качестве альтернативы, если вы планируете назначить шаблон страницы вручную, вы можете просто назвать его как хотите, желательно как-нибудь описательно (например, custom-page-header-template.php).

Как только вы закончите с этим, пора приступить к работе.

Настройте заголовок файла шаблона

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

Зачем тебе это менять?

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

Почему это важно?

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

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

Внесение изменений в Кодекс

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

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

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

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

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

Куда это девается?

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

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

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

Шаблоны пользовательских страниц WordPress — мощный инструмент

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

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

Мы надеемся, что вы примените свои новые знания с пользой!

Хотите больше советов? Получайте уведомления о новых публикациях по электронной почте.

Ты в хорошей компании

Совершенно новые блоггеры, представители малого бизнеса и крупные бренды, такие как TIME, TED и Spotify, — все называют WordPress.com своим домом.

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

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

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