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

18
14223

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

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

Если Вы хотите создать полностью новый тип записи в WordPress почитайте эту статью.

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

Создание Мета-полей для WordPress


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-input (текстовое поле)

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

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

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

Case: checkbox (чекбокс-флажок)

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

Case: Select (всплывающий список)

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

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

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

4) Дополнительно: Массив из чекбоксов

Спасибо Иннокентий Божевников за информацию.

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

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

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

 

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

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

Пользовательские дополнительные поля для WordPress

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

 

Продолжение урока: Выводим дополнительные поля в запись WordPress.

18 КОММЕНТАРИИ

  1. […] сайте была полностью посвящена созданию данных полей: Создаем свои дополнительные поля (metaboxes) в WordPress. Сегодня наша задача научится их выводить в нужном […]

  2. Большое спасибо за статью. У меня возник вопрос. Допустим я вывожу,
    произвольное текстовое поле. Например, такое

    <?php
    $my_meta = get_post_custom_values( 'cena', $ID );
    if ( $my_meta)
    {
    echo '’;
    foreach ( $my_meta as $val_key => $val_val ) echo $val_val . »;
    }
    ?>

    Мне необходимо, чтобы при определённом значении текстового поля цена, например, «300», у меня
    под полем с ценой отображался определённый текст, например, «в стоимость
    включена доставка». То есть, если цена = «300», то выводится текст «в стоимость
    включена доставка», если цена = «200», то выводится текст «без учёта доставки».
    Заранее спасибо.

    • В теле foreach сделайте проверку. if($price == 300) echo ‘include delivery’;

  3. Массив из чекбоксов, дополнение к функции
    array(

    ‘label’ => ‘Доступные размеры’,

    //’desc’ => ’48 — 50 RUS’,

    ‘id’ => ‘mycheckbox’,

    ‘type’ => ‘checkbox’, // Указываем тип поля.

    ‘value’ => array (’46-48 RUS’,’48-50 RUS’,’50-52 RUS’,’52-54 RUS’,’54-56 RUS’)

    ),
    ——————————————————————
    case ‘checkbox’:

    foreach ($field[‘value’] as $value){

    echo »;}

    echo ».$value.»;

    }

    break;

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

    ID, ‘mycheckbox’, true);

    echo »;

    foreach ($mass as $value) {echo ».$value.»;}

    echo »;?>

  4. Ребята спасибо за ваши труды! Есть вопрос к вам: Вот я создал собственную категорию, создал поле, как мне теперь вывести выпадающим списком термины этой категории в этом поле? а затем вывести это поле на странице?

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

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

    Хочу попробовать этот механизм для того чтобы изображение в twitter-cards выводить

    Это необходимо для того, чтобы для каждого поста кастомизировать свою twitter cards

    • Если я правильно понял, то мы используем для этих целей type = «thumbs» для вывода в админке input с типом «file», а для вывода в шаблоне

      Но вот как в админке при прикреплении файла к полю, заставить его сохранять на сервере?

  6. А как можно сделать чекбокс по дефолту уже активированным?

    Все грамотно написано и много полезной информации,
    спасибо за ваш труд.

  7. А как будет обновляться checkbox? Если убрать галочку с checkbox в переменной $_POST его не будет, и он ругается undefined index.
    Вот в этом месте $new = $_POST[$field[‘id’]];

ОСТАВЬТЕ ОТВЕТ

Пожалуйста оставьте комментарий!
Введите ваше имя