Метабоксы WordPress — Краткое руководство

Метабоксы WordPress — это перетаскиваемые поля, которые отображаются на экране редактирования и используются для обработки дополнительных данных, таких как термины таксономии. В этой статье мы рассмотрим метабоксы WordPress и посмотрим, как мы можем создавать свои собственные, узнаем, как сохранить сделанные нами изменения и как мы можем отобразить их содержимое в интерфейсе нашего веб-сайта.

Давайте начнем!

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

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

Метаданные

Метаданные поста — это дополнительная информация о посте, которая хранится в таблице postmeta базы данных.

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

Настраиваемые поля

Есть поля, предопределенные WordPress, такие как изображение функции, которые технически являются настраиваемыми полями. Другие могут быть добавлены с помощью плагина или пользовательского кода и определены пользователем-администратором. Вы можете узнать больше о настраиваемых полях, прочитав нашу статью «Начало работы с настраиваемыми полями WordPress».

Метабоксы

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

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

В качестве дальнейшего примера давайте посмотрим на мета-окно Featured Image. Обычно это находится на правой боковой панели экрана администратора сообщения. Там вы можете легко изменить изображение. Когда вы делаете это, вы фактически обновляете _thumbnail_id метаданных этого сообщения.

Мета-поле настраиваемого поля, такое как «источник» (которое мы добавили в нашем руководстве по настраиваемым полям), обычно можно найти под основным редактором сообщений.

Создание метабокса для нашего пользовательского типа поста

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

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

Шаг 1 – Зарегистрируйте метабокс

Чтобы добавить мета-поле в наш пользовательский тип записи, мы используем функцию add_meta_box , предоставленную WordPress. Вот структура функции с аргументами, которые мы будем использовать:

 add_meta_box( $id, $title, $callback, $screen, $context )

В качестве уникального идентификатора мы будем использовать is_vegan а в качестве заголовка метабокса — строку Is Vegan .

Функция обратного вызова для отображения содержимого коробки будет display_vegan_meta_box . Атрибут $screen относится к экрану администратора, на котором будет отображаться мета-окно. В нашем случае это область редактирования сообщения рецепта, поэтому это будет уникальное имя типа сообщения, которое, как упоминалось ранее, является recipes . Параметр $context зависит от экрана администратора.

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

Таким образом, используя параметры, определенные выше, код, который мы должны добавить в наш my-custom-post-type.php , должен выглядеть следующим образом:

 function my_metabox() { add_meta_box( 'is_vegan', 'Is Vegan', 'display_vegan_meta_box', 'recipes', 'side' ); } add_action( 'admin_init', 'my_metabox' );

Как вы увидите, мы использовали хук admin_init , который срабатывает перед любым другим хуком, когда пользователь получает доступ к области администратора.

Теперь, если вы посетите страницу редактирования сообщения с рецептом, вы должны увидеть поле на боковой панели. Конечно, содержимое в настоящее время пусто.

Следующим шагом является заполнение коробки желаемым содержимым.

Шаг 2. Отображение основного содержимого метабокса

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

Пожалуйста, продолжайте и добавьте фрагмент кода ниже в функцию my_metabox :

 function display_vegan_meta_box( $recipe ) { ?> <span class="title">Vegan recipe?</span> <span class="content"> <label for="vegan_checkbox"> <input type="checkbox" name="vegan_checkbox" value="yes" /> </label> </span> <?php }

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

Шаг 3 — Сохраните значение метабокса в базе данных

Чтобы сохранить значение полей ввода метабокса, мы используем хук действия save_post , который WordPress предоставляет следующим образом:

 function update_vegan_box( $post_id ) { if( !current_user_can( 'edit_post' ) ) return; if ( 'recipes' == get_post_type() ) { if ( isset( $_POST['vegan_checkbox'] ) && $_POST['vegan_checkbox'] != '' ) { update_post_meta( $post_id, 'is_vegan', $_POST['vegan_checkbox'] ); }else { update_post_meta( $post_id, 'is_vegan', "no" ); } } } add_action( 'save_post', 'update_vegan_box' );

Внутри функции update_vegan_bo x с аргументом $post_id мы включили некоторые условия. Сначала мы хотим проверить, есть ли у пользователя разрешение на редактирование сообщения, а также убедиться, что мы редактируем тип сообщения recipes .

Итак, если пост относится к типу recipes , проверяем значение чекбокса. Помните, что по умолчанию, когда флажок установлен, в базе данных сохраняется значение «да», а если нет, то значение равно NULL. Мы немного подправили это, чтобы значение «нет» сохранялось, когда мы сохраняем пост со снятым флажком веганского мета-поля.

Здесь мы использовали функцию WordPress update_post_meta( $post_id, $meta_key, $meta_value, $prev_value = '' )

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

Шаг 4 – Уточните код содержимого Meta Box

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

 function display_vegan_meta_box( $recipe ) { $is_value = esc_html( get_post_meta( $recipe->ID, 'is_vegan', true ) ); $checked; if ( $is_value == "yes" ) { $checked = "checked"; } else if ( $is_value == "no" ) { $checked = ""; } else { $checked="";} ?> <span class="title">Vegan recipe?</span> <span class="content"><label for="vegan_checkbox"> <input type="checkbox" name="vegan_checkbox" value="yes" <?php echo $checked; ?> /> </label></span> <?php }

Итак, сначала мы извлекаем мета-значение is_vegan , а затем, если это необходимо, checked значение будет передано в переменную $checked и будет отражено в выводе HTML.

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

Вывод

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

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