wordpress meta boxes
Wordpress

Создаем кастомные поля (metaboxes) в WordPress

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

Или представьте что Вы работаете над проектом клиента, который хочет иметь на сайте свой собственный, обширный каталог музыкальных альбомов. Посмотрев на стандартный функционал WordPress из коробки, вы замечаете, что стандартных возможностей для вывода нужной клиенту информации не хватает, конечно, он может использовать основные возможности: Категории, Метки, Заголовки, Миниатюра записи и т.д., но не хватает таких полей, как Продюсер, Дата выпуска, Список песен в альбоме и т.д. Здесь на помощь приходят metaboxes — дополнительные или, по-другому, кастомные поля.


Вот пример дополнительных полей:



1) Создаем собственную дополнительную секцию для мета полей

Открываем файл function.php, который расположен в директории с темой вашего сайта.

wp-content/themes/ваша_тема/function.php

И пишем внизу функцию добавления секции для мета-поля:

$callback — это функция вызова, которая отображает наши поля. Мы опишем её в 3 шаге.
$context — место, где будет отображаться дополнительное поле.

  • «normal» будет отображать запись ниже редактора записи.
  • «side» поместить поле в правую часть, там где Рубрики, Метки и т.д.
  • «advanced» также поместит их в колонку справа, но в самый низ.

$priority — не является важным аргументом, он говорит wordpress’у приоритет размещения:

  • hight — высокий,
  • default — по умолчанию,
  • low — низкий.


2) Создаем нужные поля

Продолжаем делать новые записи в файл function.php
Сейчас нам нужно создать сами поля, как вам известно, существуют разные виды полей, например, text, textarea, checkbox, select и т.д. Мы создадим все перечисленные виды, приступим:

Таким образом, мы создали все требуемые нам поля, дали им название и краткое описание. Важно! Используйте уникальный id для каждого поля или используйте префикс например «my», чтобы избежать совпадений с внутренними, системными идентификаторами. Все требуемые поля и информацию о них мы поместили в массив $meta_fields Используя данный принцип, вы можете размещать сколько угодно различных полей.



3) Выводим наши поля на экран

Сейчас мы опишем функцию callback, которую мы задавали в 1 шаге.

Теперь по порядку о каждом действии:

  1. Выводим скрытое поле для сверки, когда мы будем сохранять данные. В это поле будет помещен проверочный код, который мы создаем через функцию wp_create_nonce(). Этот уникальный код поможет нам обезопасится от межсайтового скриптинга (XSS атак).
  2. Начинаем таблицу и запускаем цикл, который будет перебирать все наши поля из массива $custom_meta_fields.
  3. Получаем значение поля, если раньше оно уже было сохранено, то мы выведем это значение в поле.
  4. Далее, используя конструкцию switch-case, мы будем выводить каждое поле отдельно, т.к. у каждого поля имеются свои атрибуты и теги для вывода. (textarea и input — разные теги).
  5. В конце мы завершаем цикл, закрываем таблицу, и закрываем функцию.


Теперь давайте разберем каждый case, мы будем перебирать каждое поле по его типу (textarea, text, checkbox) и для каждого типа будем делать свой вывод, через определенные html теги. Для того, чтобы показывать ранее введенную информацию мы использовали выше переменную($meta), в которую мы будем получать эти данные, если они есть, будем их показывать, если нет, показываем пустое поле. Поехали:

Case: text (текстовое поле)

Здесь все просто: если тип поля "text", тогда мы выводим тег input и подставляем данные из нашего массива в атрибуты тега, затем делаем перенос строки <br /> и выводим описание поля.


Case: textarea (Зона текста)

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


Case: checkbox (чекбокс)

Использование $meta в чекбоксе обусловлено тем, что нам необходимо  выводить ранее сохранённый выбор пользователя (если таковой есть) и давать этому полю атрибут checked.


Массив из чекбоксов

В массив с элементами:

В конструкцию switch-case:

Вывод на странице:


Case: Select (список)

В данном случае мы, пробегаем по массиву options и выводим наши <option></option>. Не забываем, что если ранее данные были сохранены, то мы показываем их.



4) Сохраняем введенные в поля данные

  1. Принимаем старое значение поля, если оно есть, в переменную $old
  2. Принимаем текущее, новое значение с поля в переменную $new
  3. Если новые данные отличаются от старых, обновляем данные
  4. Если новое значение поля пустое, удаляем запись об этом поле
  5. Если ничего не изменилось — ничего не изменяем


5) Заключение

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

wordpress meta boxes

 


Весь код написанный нами за весь урок выглядит так:

Продолжение урока: позднее…



Добавить комментарий