Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Динамические шаблоны страниц в WordPress, часть 3

by
Difficulty:AdvancedLength:LongLanguages:
This post is part of a series called Dynamic Page Templates in WordPress.
Dynamic Page Templates in WordPress, Part 2

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

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

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

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

  • Простая контактная форма
  • Архив блога

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

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

В этом уроке мы рассмотрим много всего, поэтому давайте начнем!

Настройка темы

Мы снова будем использовать тему WordPress Twenty Seventeen child, как и во второй части этой серии уроков, чтобы добавить наш динамический шаблон страницы. Начнем с пустой дочерней темы.

Создайте папку дочерних тем, называемую twentyseventeen-child  и добавьте следующие файлы:

  • functions.php
  • style.css

Внутри style.css добавьте:

И внутри functions.php добавьте:

Добавьте дочернюю тему в каталог тем WordPress, как и раньше. Если вы не знаете, как это сделать, обратитесь к части 2 этой серии руководств.

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

Динамический шаблон страницы формы

Наша первая реальная реализация динамического шаблона страницы - простая форма контакта. Мы добавим следующие поля:

  • Заголовок
  • Имя
  • Предмет
  • Эл. адрес
  • Номер телефона

Эти поля ввода текста, кроме заголовка, который является стандартным тегом заголовка HTML.

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

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

Page Attributes

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

В классе DPT_Twenty_Seventeen_Child зарегистрируйте два новых хука действия в методе init и новый метод page_template_meta_boxes.

Хуки действия load-post.php и load-post-new.php выполняются всякий раз, когда сообщение (любого типа) редактируется или создается. Когда это произойдет, мы зарегистрируем еще один хук действия add_meta_boxes, который инициирует создание нашего настраиваемого мета-поля, который выполняется с помощью функции обратного вызова add_page_template_meta_boxes. Давайте реализуем эту функцию прямо сейчас.

Фактический рендеринг элементов мета-окна будет обрабатываться через функцию обратного вызова display_form_page_template_meta_box, которая была указана выше как один из аргументов add_meta_box().

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

Form Page Template Meta Box

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

Мы включаем поле nonce для безопасности, которое будет проверено позже, незадолго до сохранения значений формы в базе данных.

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

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

Form Page Template Meta Box with Options

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

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

Наши флажки теперь полностью функциональны, поэтому мы можем продолжить и реализовать фактический шаблон страницы! Внутри корневой папки дочерней темы добавьте новую папку под названием page-templates и добавьте к ней новый файл с именем form-page-template.php.

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

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

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

Затем мы можем добавить код формы. Для каждого поля формы это выглядит похожим. Давайте посмотрим на код поля name.

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

После отправки формы мы отправим электронное письмо администратору сайта и отобразим сообщение на экране. Объединив все это, у нас будет финальный код шаблона страницы.

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

Looking at the template on the front-end

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

Changing options for the front-end

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

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

Организация элементов управления на нашей странице

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

The meta boxes

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

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

В частности, нам необходимо:

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

Начнем с добавления css и js-папок в корневую папку дочерней темы. Внутри папки css создайте файл style.css, а в папке js создайте файл script.js. Однако вы можете назвать их как хотите. Просто не забудьте записать имена файлов, если это так, и заменить их в коде сценариев очереди.

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

Обратите внимание на то, как мы настраиваем таргетинг на тип публикации page, а затем на страницы администрирования post-new.php или post.php. Итак, в основном, если мы не находимся в редакторе страниц, наши скрипты не загрузятся, что нам и нужно.

Пойдем теперь и начнем добавлять CSS и JavaScript для настройки элементов шаблона страницы формы. Во-первых, скрыть весь мета-поле формы с помощью CSS, добавив это в style.css:

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

Теперь JavaScript. Добавьте это в script.js.

Я не собираюсь подробно описывать JavaScript, но вот небольшой обзор.

Сначала мы кэшируем несколько селекторов CSS и перемещаем элементы управления администратором в мета-поле Page Attributes. Затем у нас есть функция displayControls(), которая либо скрывает, либо отображает элементы управления формой в зависимости от текущего значения раскрывающегося списка шаблона страницы. Мы вызываем displayControls() при загрузке страницы, а затем каждый раз, когда выпадающий список изменяется, чтобы убедиться, что мы всегда находимся в синхронизации.

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

All of the page attributes

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

Динамический шаблон страницы поста в блоге

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

Начните с добавления нового мета-поля в add_page_template_meta_boxes().

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

Давайте сломаем это. Сначала мы определяем переменную для хранения списка выбранных категорий публикаций (если есть) с момента последнего обновления сообщения. Другая переменная хранит массив всех существующих категорий.

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

Затем мы перебираем список категорий сайта, заполняя раскрывающийся список. Любая категория, которая была выбрана ранее, снова выбирается, чтобы синхронизировать все.

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

Функция q() является вспомогательной функцией, которая позволяет нам проверять текущий элемент списка на массив сохраненных категорий.

Для каждой категории идентификатор категории передается в q() вместе с сохраненным массивом категорий. Если текущая категория находится в списке сохраненных категорий, то текущая категория возвращается в selected() и будет соответствовать первому аргументу. Это приведет к тому, что selected() будет отмечать текущую категорию как выбранную. Это элегантный способ обработки нескольких параметров для одного элемента управления.

Все, что нам нужно сделать, это обновить save_page_template_meta(), чтобы справиться с сохранением категорий поста в блоге. Добавьте этот код, чтобы сделать это.

Теперь нам нужно создать шаблон страницы постов блога. Внутри папки page-templates вашей дочерней темы создайте новый файл с именем blog-page-template.php и добавьте следующий код.

Единственное реальное отличие от нашего предыдущего динамического шаблона страницы - это код внутри тега <main> HTML, поэтому давайте сейчас подробнее его рассмотрим.

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

Главное здесь, что мы можем точно контролировать, какие категории передаются объекту запроса, путем выбора, сделанного в мета-окне редактора страниц.

Все, что нам нужно сделать, это скрыть мета-окно категорий блога и переместить элемент управления списком в мета-поле Page Attributes. Как и раньше.

Внутри style.css обновите стили, чтобы скрыть поле метаданных в блогах:

Для файла script.js требуется добавить еще немного кода. Вот полностью обновленный файл.

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

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

An example of dynamic page templates

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

Шаблоны страниц для всех

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

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

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

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

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

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

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

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

Наконец, обновите save_page_template_meta(), чтобы была возможность поддерживать несколько типов сообщений так же, как и для enqueue_editor_scripts(). Вот и все!

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

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

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

Вывод

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

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

Если вы ищете другие утилиты, которые помогут вам развить свой растущий набор инструментов для WordPress или для изучения кода и более внимательного изучения WordPress, не забудьте посмотреть, что у нас есть на Envato Market.

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.