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

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

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

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

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

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

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

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

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

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

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

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

Для разработчика это также более удобно, так как у него есть только один шаблон страницы для поддержки, а не три! Это следует принципу «Не повторяйте себя» (DRY).

Должны ли все шаблоны страниц быть динамическими?

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

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

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

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

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

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

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

Элементы управления, которые мы добавим в ближайшее время:

  • Текстовое окно
  • Текстареа
  • Чекбокс
  • Radio buttons
  • Выпадающий список

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

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

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

Чтобы отобразить наш мета-бокс на экране редактора страниц, добавьте хуки load-post.php и load-post-new.php в метод init() дочерней темы, которую мы создали в первой части.

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

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

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

  • Методы класса page_template_meta_box() и add_page_template_meta_box() регистрируют мета-поле с помощью WordPress.
  • В add_page_template_meta_box() параметр page указывает, что этот мета-поле будет отображаться только в редакторе постов типа 'page' в админке WordPress.
  • Метод класса display_page_template_meta_box() отображает мета-поле и устанавливает nonce, чтобы сделать элементы управления формы более безопасными.

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

A new page meta box

На данный момент это выглядит немного пусто, поэтому давайте добавим некоторые элементы управления.

Добавление пользовательских элементов управления

Если вы помните, то мы собираемся добавить текстовое поле, текстовую область, чекбокс, радио кнопку и селект и в мета-бокс. Начните с добавления следующего кода к методу display_page_template_meta_box() под функцией nonce.

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

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

Однако этого не произойдет, если мы не сохраним текущие данные управления метаданных в базу данных WordPress.

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

Метод класса save_page_template_meta() обрабатывает данные элементов управления. Он сохраняет только данные метаданных, если проверено значение nonce, текущие пользователи могут редактировать сообщения, и мы находимся на экране администратора редактора страниц.

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

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

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

Adding controls to the meta box

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

Populating the meta box

Полный исходный код для файла functions.php дочерней темы показан ниже.

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

Убедитесь, что «Test Page Template» является выбранным в данный момент шаблоном страницы и просмотрите страницу на фронтенде.

Viewing the output of the meta box

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

Вывод

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

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

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

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.