Advertisement
  1. Code
  2. Theme Development

Шаблон метабокса для многоразового использования. Часть 1: Введение и основные поля

by
Length:MediumLanguages:

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

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

Создание метабокса

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

Этот код добавит метабокс на экран Write/Edit Post.

  • $id добавляется в виде идентификатора в метабокс, чтобы облегчить доступ к нему для таблиц стилей и других функций
  • $title будет отображаться в заголовке метабокса
  • $callback — функция, которую мы будем использовать для определения выходных данных внутри метабокса
  • $page используется для выбора типа записи, в которой будет использоваться метабокс
  • $context, используется чтобы определить, в каком месте метабокс будет отображаться на странице
  • Установив $priority на “high” мы располагаем метабокс, так близко к редактору, как можем, учитывая другие поля добавленые ядром wordpress и сторонними плагинами.

Создание массива с полями

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

Важно учесть, что ваши метабоксы имеют уникальный ключ, и мы определяем $prefix, чтобы легко прикрепить его к каждому идентификатору поля. Затем мы создаем массив массивов, где каждый элемент определяет новое поле с лейблом, описанием, уникальным идентификатором и типом поля. Поле select имеет дополнительные данные, для того, чтобы добавить все необходимые параметры для этого поля. С помощью этого шаблона можно добавить столько типов полей, сколько необходимо. Они отобразятся в метабоксе в том порядке, в котором вы добавите их к массиву.


Вывод полей

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

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

  • Выводим скрытое поле nonce для проверки полей, когда мы будем сохранять их позже
  • Создаем таблицу и проходим циклом через каждое поле из массива $custom_meta_fields.
  • Получаем значение поля, если оно было сохранено для текущей записи так, что мы можем вывести его в поле
  • Начинаем строки таблицы с двумя ячейками: <th> для лейбла поля и <td> для самого поля.
  • Затем мы добавляем переключатель switch case.
  • Наконец закрываем строки таблицы, цикл и таблицу перед окончанием функции

Case: Text Input

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

Идея довольно проста.

  • Если тип поля «text», вывести html-код, с помощью массива параметров этого поля
  • Идентификатор поля используется для имени, которое создаст уникальный ключ мета поля и используется для идентификатора нужного нам поля, чтобы мы могли связать лейбл с полем, а также, если мы захотим использовать его в нашей таблице стилей позже
  • Значение поля будет выводить переменную $meta, которая является пустой, если это поле еще не было сохранено в этой записи.
  • После поля мы выводим описание для объяснения того, для чего ожидается использовать это поле

Case: Textarea

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

Case: Checkbox

С check box немного сложнее, потому что значение $meta используется для определения установлен ли флажок. В нашем коде мы используем встроенное условное выражение, которое выводит атрибут «checked», если значение $meta существует и ничего не выводит, если не существует. Отличие здесь заключается в том, что мы используем описание поля в другом лейбле так, что для пользователя появляется большая кликабельная область.

Case: Select Box

Вывод select box решается совершенно по-новому.

  • Открываем поле select
  • Перебираем каждый из вариантов, которые мы определили в нашем массиве
  • Используем встроенное условное выражение, чтобы определить является ли текущий параметр сохраненным для записи и выводим атрибут «selected»
  • Закрываем поле select и добавляем описание

Сохранение данных

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

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

  • Получаем значение поля, если оно было сохраненно раньше и сохраняем его как $old
  • Получаем текущее значение, которое было введено и сохраняем его как $new
  • Если имеется значение $new, и оно не такое же, как старое, обновляем метабокс записи со значением $new
  • Если значение $new является пустым и имеется значение $old, удаляем значение $old метабокса записи
  • Если изменений нет, ничего не происходит

Заключение

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

Custom Meta Box

Мы начали с создания маленькой библиотеки и шаблона для создания настраиваемого метабокса с несколькими массивами. Теперь вы можете легко поместить этот код в любую тему или плагин и использовать массив для добавления текстовых полей, textarea, чексбоксов и select boxes, в необходимом количестве. В следующих частях этой серии мы начнем работать с более сложными полями и даже с парой веселенких, которые связаны с jQuery UI. Не пропустите их!

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.