Java, UX, HTML, CSS, WEB-design

Как создать мета-боксы Wordpress

Краткое описание по статье Как создать мета-боксы Wordpress

Название: Как создать мета-боксы Wordpress . Краткое описание: [ad_1] ⭐ Джастин . Дата публикации: 20.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Джастин Тэдлок

  • 0 Комментарии

Как создать мета-боксы Wordpress

  • 11 минут чтения

  • WordPress, Функции, Методы (WP)

Краткое резюме ↬

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

Эта статья последний раз обновлялась 13 апреля 2017 г.

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

  • Создание метабоксов.
  • Использование метабоксов с любым типом сообщений.
  • Обработка проверки данных.
  • Сохранение пользовательских метаданных.
  • Получение пользовательских метаданных во внешнем интерфейсе.

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

Что такое почтовый метабокс?

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

Как правило, в метаполя вводятся два типа данных:

  • Метаданные (например, настраиваемые поля),
  • Термины таксономии.

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

Еще после прыжка! Продолжить чтение ниже ↓

Что такое метаданные публикации?

Метаданные публикации — это данные, которые сохраняются в wp_postmeta таблица в базе данных. Каждая запись сохраняется в виде четырех полей в этой таблице:

  • meta_id: уникальный идентификатор для этих конкретных метаданных.
  • post_id: идентификатор сообщения, к которому прикреплены эти метаданные.
  • meta_key: Ключ, используемый для идентификации данных (вы будете часто с ним работать).
  • meta_value: значение метаданных.

На следующем снимке экрана вы можете увидеть, как это выглядит в базе данных.

Если разобраться, метаданные — это просто пары ключ/значение, сохраненные для определенного поста. Это позволяет вам добавлять все виды пользовательских данных к вашим сообщениям. Это особенно полезно, когда вы разрабатываете пользовательские типы сообщений.

Единственным ограничением является ваше воображение.

Примечание. Следует помнить, что один мета-ключ может иметь несколько мета-значений. Это не обычное использование, но оно может быть чрезвычайно мощным.

Работа с метаданными поста

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

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

  • add_post_meta()»): добавляет метаданные записи.
  • update_post_meta()»): обновляет метаданные публикации.
  • delete_post_meta()»): удаляет метаданные поста.
  • get_post_meta()»): извлекает метаданные сообщения.

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

Установка

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

Я начну с того, что научу вас разрабатывать собственный код, который делает несколько очень простых вещей:

  • Добавляет поле ввода для добавления пользовательского класса сообщений (метаполе).
  • Сохраняет пост-класс для smashing_post_class мета ключ.
  • Фильтрует post_class крючок, чтобы добавить свой пользовательский класс сообщений.

Вы можете делать гораздо более сложные вещи с метабоксами, но сначала вам нужно изучить основы.

Весь код PHP в следующих разделах входит либо в ваш пользовательский файл плагина, либо в файл вашей темы. functions.php файл.

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

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

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

/* Fire our meta box setup function on the post editor screen. */
add_action( 'load-post.php', 'smashing_post_meta_boxes_setup' );
add_action( 'load-post-new.php', 'smashing_post_meta_boxes_setup' );

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

Следующий фрагмент кода добавит функцию создания метабокса в add_meta_boxes крюк. WordPress предоставляет этот хук для добавить метабоксы.

/* Meta box setup function. */
function smashing_post_meta_boxes_setup() {

  /* Add meta boxes on the 'add_meta_boxes' hook. */
  add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );
}

Теперь можно заняться интересным.

В приведенном выше фрагменте кода вы добавили smashing_add_post_meta_boxes() функция для add_meta_boxes крюк. Целью этой функции должно быть добавление мета-боксов сообщений.

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

Прежде чем продолжить, давайте посмотрим на add_meta_box() функция:

add_meta_box( $id, $title, $callback, $page, $context="advanced", $priority = 'default', $callback_args = null );
  • $id: это уникальный идентификатор, присвоенный вашему метабоксу. Он должен иметь уникальный префикс и быть допустимым HTML.
  • $title: Название метабокса. Не забудьте интернационализировать это для переводчиков.
  • $callback: функция обратного вызова, которая отображает вывод вашего метабокса.
  • $screen: экран или экраны, на которых должно отображаться окно (например, тип сообщения, linkили comment). Принимает один идентификатор экрана, WP_Screen объект или массив идентификаторов экрана. По умолчанию это текущий экран.
  • $context: Где на странице должно отображаться мета-окно. Доступные варианты normal, advancedа также side.
  • $priority: Насколько высокий/низкий метабокс должен иметь приоритет. Доступные варианты default, core, highа также low.
  • $callback_args: массив настраиваемых аргументов, которые вы можете передать $callback функционировать как второй параметр.

Следующий код добавит метабокс класса поста на экран редактора поста.

/* Create one or more meta boxes to be displayed on the post editor screen. */
function smashing_add_post_meta_boxes() {

  add_meta_box(
    'smashing-post-class',      // Unique ID
    esc_html__( 'Post Class', 'example' ),    // Title
    'smashing_post_class_meta_box',   // Callback function
    'post',         // Admin page (or post type)
    'side',         // Context
    'default'         // Priority
  );
}

Однако вам все равно нужно отобразить HTML-код метабокса. Вот где smashing_post_class_meta_box() приходит функция($callback параметр сверху).

/* Display the post meta box. */
function smashing_post_class_meta_box( $post ) { ?>

  <?php wp_nonce_field( basename( __FILE__ ), 'smashing_post_class_nonce' ); ?>

  <p>
    <label for="smashing-post-class"><?php _e( "Add a custom CSS class, which will be applied to WordPress' post class.", 'example' ); ?></label>
    <br />
    <input class="widefat" type="text" name="smashing-post-class" id="smashing-post-class" value="<?php echo esc_attr( get_post_meta( $post->ID, 'smashing_post_class', true ) ); ?>" size="30" />
  </p>
<?php }

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

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

Однако метабокс пока ничего не делает. Например, он не сохранит ваш пользовательский класс сообщений. Именно этому посвящен следующий раздел этого руководства.

Сохранение данных метабокса

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

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

/* Save post meta on the 'save_post' hook. */
add_action( 'save_post', 'smashing_save_post_class_meta', 10, 2 );

Итак, эта функция на самом деле будет выглядеть так:

/* Meta box setup function. */
function smashing_post_meta_boxes_setup() {

  /* Add meta boxes on the 'add_meta_boxes' hook. */
  add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );

  /* Save post meta on the 'save_post' hook. */
  add_action( 'save_post', 'smashing_save_post_class_meta', 10, 2 );
}

Новый код, который вы добавляете, говорит WordPress, что вы хотите запустить пользовательскую функцию на save_post крюк. Эта функция сохранит, обновит или удалит вашу пользовательскую мета-публикацию.

При сохранении метаданных записи ваша функция должна пройти через ряд процессов:

  • Проверьте одноразовый номер, установленный в функции мета-поля.
  • Убедитесь, что у текущего пользователя есть разрешение на редактирование сообщения.
  • Возьмите опубликованное входное значение из $_POST.
  • Решите, следует ли добавить, обновить или удалить метаданные на основе опубликованного значения и старого значения.

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

/* Save the meta box’s post metadata. */
function smashing_save_post_class_meta( $post_id, $post ) {

  /* Verify the nonce before proceeding. */
  if ( !isset( $_POST['smashing_post_class_nonce'] ) || !wp_verify_nonce( $_POST['smashing_post_class_nonce'], basename( __FILE__ ) ) )
    return $post_id;

  /* Get the post type object. */
  $post_type = get_post_type_object( $post->post_type );

  /* Check if the current user has permission to edit the post. */
  if ( !current_user_can( $post_type->cap->edit_post, $post_id ) )
    return $post_id;

  /* Get the posted data and sanitize it for use as an HTML class. */
  $new_meta_value = ( isset( $_POST['smashing-post-class'] ) ? sanitize_html_class( $_POST['smashing-post-class'] ) : ’ );

  /* Get the meta key. */
  $meta_key = 'smashing_post_class';

  /* Get the meta value of the custom field key. */
  $meta_value = get_post_meta( $post_id, $meta_key, true );

  /* If a new meta value was added and there was no previous value, add it. */
  if ( $new_meta_value && ’ == $meta_value )
    add_post_meta( $post_id, $meta_key, $new_meta_value, true );

  /* If the new meta value does not match the old value, update it. */
  elseif ( $new_meta_value && $new_meta_value != $meta_value )
    update_post_meta( $post_id, $meta_key, $new_meta_value );

  /* If there is no new meta value but an old value exists, delete it. */
  elseif ( ’ == $new_meta_value && $meta_value )
    delete_post_meta( $post_id, $meta_key, $meta_value );
}

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

Использование метаданных из мета-боксов

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

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

Помните, что get_post_meta() функция из более раннего урока? Вам это тоже понадобится.

Следующий код добавляет пользовательский класс сообщений (если он задан) из вашего пользовательского мета-поля.

/* Filter the post class hook with our custom post class function. */
add_filter( 'post_class', 'smashing_post_class' );

function smashing_post_class( $classes ) {

  /* Get the current post ID. */
  $post_id = get_the_ID();

  /* If we have a post ID, proceed. */
  if ( !empty( $post_id ) ) {

    /* Get the custom post class. */
    $post_class = get_post_meta( $post_id, 'smashing_post_class', true );

    /* If a post class was input, sanitize it and add it to the post class array. */
    if ( !empty( $post_class ) )
      $classes[] = sanitize_html_class( $post_class );
  }

  return $classes;
}

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

исходный код после класса

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

Безопасность

Одна вещь, которую вы должны иметь в виду при сохранении данных, — это безопасность. Безопасность — это длинная тема, которая выходит за рамки этой статьи. Тем не менее, я подумал, что лучше хотя бы напомнить вам о безопасности.

Ранее в этом руководстве вам уже была дана ссылка, объясняющая одноразовые номера. Еще один ресурс, который я хочу вам предоставить, — это руководство WordPress Codex по проверке данных. Эта документация будет вашим лучшим другом при изучении того, как сохранять метаданные сообщений, и предоставит вам инструменты, которые вам понадобятся для обеспечения безопасности ваших плагинов/тем.

Бонусные баллы тому, кто сможет назвать все меры безопасности, использованные в этом руководстве.

Создайте собственный метабокс

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

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

Дальнейшее чтение

  • Расширьте возможности WordPress с помощью настраиваемых полей
  • Лучшее управление изображениями с WordPress
  • Советы по WordPress Power для разработчиков шаблонов и консультантов
  • Как интегрировать Facebook с WordPress
  • Подробное руководство по шаблонам пользовательских страниц WordPress
  • Создание пользовательской страницы архива для WordPress
  • Как использовать автозагрузку и контейнер плагинов в плагинах
  • Полное руководство по пользовательским типам записей
Сокрушительная редакция
(ал, иль)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Как создать мета-боксы Wordpress

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

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

Ваш адрес email не будет опубликован.

Кнопка «Наверх»