Как создать собственный метабокс WordPress
Опубликовано: 2015-06-09Что такое настраиваемый метабокс WordPress?
Пользовательские мета-поля позволяют добавлять дополнительную информацию к сообщениям, страницам и пользовательским типам сообщений, помимо стандартных мета-полей, которые автоматически доступны для использования прямо «из коробки» в WordPress, которые включены в ядро WordPress.
Знали вы об этом или нет, но вы уже некоторое время используете метабоксы. Такие вещи, как виджеты панели инструментов, редактор, настраиваемые поля, избранное изображение, категории и теги, являются примерами метаблоков.
Как создать собственный метабокс WordPress
Что происходит, когда вам нужно создать дополнительный метабокс, может быть, что-то более индивидуальное для вашего проекта? Существуют существующие плагины, которые помогают создавать собственные мета-боксы, что может быть отличным вариантом. Даже если вы решите, что собираетесь идти по этому пути, все равно важно понимать основные концепции того, что происходит под капотом пользовательских мета-боксов.
Используйте спрайты CSS, чтобы сделать ваш логотип адаптивным
Помните CSS-спрайты? Это группа различных изображений, объединенных в один файл, и мы будем использовать их для создания адаптивного логотипа. Это метод, используемый для оптимизации производительности браузера...
Мы будем рассматривать концепции на очень высоком уровне, когда будем создавать этот очень простой метаблок. Когда мы закончим, у нас будет настраиваемое мета-поле, которое позволит нам ввести название продукта.
Несмотря на то, что мы начинаем с простого, имейте в виду, что эту идею можно расширить для более сложных нужд. Существует множество опций и дополнительных функций, которые можно включить в настраиваемое мета-окно. Такие вещи, как флажки, загрузка файлов и т. д., — все это возможные функции пользовательского мета-бокса. В этом руководстве предполагается, что вы знакомы с CSS, который необходим для стилизации полей. Мы не будем вдаваться в подробности при обсуждении стилей, но это можно легко сделать после того, как ваш метабокс настроен и работает.
Разработка пользовательского метабокса
Пользовательский код для мета-боксов может быть включен в functions.php или в плагин. Этот пример будет включать необходимый код в виде плагина. Его можно копировать шаг за шагом, чтобы создать полный файл, готовый к использованию.
Кодекс — ваш помощник
Кодекс станет вашим лучшим другом, если он еще им не стал. Разные аргументы имеют разные варианты, и Кодекс объяснит это очень подробно. Стоит отметить, что Кодекс — это то, что вы должны хорошо знать.
Сначала проверьте локально
Вот один и единственный отказ от ответственности для этого урока. Сначала попробуйте это в локальной среде разработки. Хотя все мы ценим небольшие приключения в нашей жизни, никто не любит белый экран смерти, особенно на живом сайте. Мы собираемся шаг за шагом пройти этот учебник, и по мере его прохождения возникают зависимости. Из-за этого есть большая вероятность, что сохранение на полпути может вызвать ошибку.
Шаг первый: создайте и поместите заголовок в плагин
Создание плагина может показаться сложным, но не все плагины должны состоять из сотен строк. Плагины могут быть очень простыми, и это отличный пример этого. Если вы перейдете в папку wp-content , вы увидите папку с плагинами . Создайте новую папку под названием custom-post-meta-box с файлом custom-post-meta-box.php . Это файл, с которым вы будете работать.
При создании плагина убедитесь, что эта информация отображается перед любым вашим пользовательским кодом:
<?php /* Plugin Name: Custom Meta Box Plugin URI: www.yourwebsite.com Description: Creates a meta box in WordPress Version: 1.0.0 Author: Your Name Author URI: www.yourwebsite.com License: GPL2 */
Активировать плагин
Несмотря на то, что мы еще не добавили туда никакого кода, мы можем активировать плагин, перейдя в «Плагины», найдя «Пользовательский метабокс» и выбрав «Активировать». Пожалуйста, имейте в виду, что пока ничего не изменится.
Дополнительный CSS
Это необязательно, но если вы планируете добавить пользовательский CSS, скопируйте его в файл плагина. Убедитесь, что файл .css находится в папке css вашего плагина.
function cmb_add_admin_styles() {
wp_enqueue_style('cmb-admin', plugins_url( 'custom-post-meta-box/css/admin.css' ) );
}
add_action( 'admin_enqueue_scripts', 'cmb_add_admin_styles' );
Шаг второй: добавление метабокса
Функция add_meta_box используется для создания пользовательских мета-боксов. Эта функция отвечает только за регистрацию и отображение пользовательских мета-полей.
function cmb_add_meta_box() {
add_meta_box(
'custom_post_metabox',
'Our Products',
'cmb_display_meta_box',
'post',
'normal',
'high'
);
}
add_action( 'add_meta_boxes', 'cmb_add_meta_box' );
Взгляните на панель инструментов, заголовок «Наши продукты» отображается, но нет текстового поля для ввода нашего текста.
Шаг третий: добавление поля мета-поля в админку
Нам нужно убедиться, что есть метка и поле для информации. С помощью html это возможно.
function cmb_display_meta_box( $post ) {
wp_nonce_field( plugin_basename(__FILE__), 'cmb_nonce_field' );
$html = '<label id="product-title" for="product-title">';
$html .= 'Product Title';
$html .= '</label>';
$html .= '<input type="text" id="product-title" name="product-title" value="' . get_post_meta( $post->ID, 'product-title', true ) . '" placeholder="What is the Product Title?" />';
echo $html;
}
// this echoes a single stream of html
Видите, как вещи упакованы в <label> ? Мы видим описательный текст «Название продукта», который помогает пользователю понять, что это за поле и какой тип информации следует вводить. Также обратите внимание на текст-заполнитель, который также добавляет полезную информацию.
Ваш ввод может быть не таким широким. Был сделан некоторый пользовательский css, чтобы можно было показать весь текст-заполнитель; метка имеет ширину 100%.
Шаг четвертый: Сохранение данных и важность использования одноразового номера
Возможно, вы ввели текст на третьем шаге и поняли, что на самом деле он не сохраняется и не отображается на странице. На этом шаге действительно происходит все волшебство.
function cmb_save_meta_box_data( $post_id ) {
if ( cmb_user_can_save( $post_id, 'cmb_nonce_field' ) ) {
if ( isset( $_POST['product-title'] ) && 0 < count( strlen( trim( $_POST['product-title'] ) ) ) ) {
$product_title = stripslashes( strip_tags( $_POST['product-title'] ) );
update_post_meta( $post_id, 'product-title', $product_title );
}
}
}
add_action( 'save_post', 'cmb_save_meta_box_data' );
function cmb_display_product( $content ) {
if ( is_single () ){
$html = 'The Product Title is: ' . get_post_meta( get_the_ID(), 'product-title', true );
$content .= $html;
}
return $content;
}
add_action('the_content', 'cmb_display_product');
function cmb_user_can_save( $post_id, $nonce ) {
$is_autosave = wp_is_post_autosave( $post_id );
$is_revision = wp_is_post_revision( $post_id );
$is_valid_nonce = ( isset( $_POST[ $nonce ] ) && wp_verify_nonce( $_POST [ $nonce ], plugin_basename( __FILE__ ) ) );
return ! ( $is_autosave || $is_revision ) && $is_valid_nonce;
}
Здесь происходит несколько вещей. По сути, функция cmb_save_meta_box_data — это то, что нам нужно для сохранения. Мы сосредоточимся на безопасности со значением nonce. Это мера безопасности, которая гарантирует, что данные для сохранения поступают из правильного источника. Также мы хотим убедиться, что пост не является автосохранением или ревизией. Затем одноразовый номер будет проверен, и пользователь сможет сохранить его.
Теперь, когда мы можем безопасно сохранить, метаинформация выглядит так на странице. Как видите, его можно легко стилизовать, но он работает и данные сохраняются.
Дальнейшее чтение и домашнее задание
Как видите, всего за несколько шагов вы можете создать собственное мета-поле. Как и в большинстве проектов разработки, существует несколько способов достижения одной и той же цели, поэтому вы можете найти другие подходы к одной и той же задаче.
Мы рассмотрели пользовательские мета-боксы на очень высоком уровне, поэтому вы можете глубже изучить эти концепции. Если вы обнаружите, что вам больше нужны настраиваемые мета-боксы, вот несколько отличных источников для дальнейшего изучения:
- Дополнительная информация о nonce
- Плагин метабокса
- Опции для функции add_meta_box