Как создавать пользовательские метабоксы с помощью CMB2

Опубликовано: 2016-07-25

Пару лет назад я искал способ запрашивать сообщения и показывать место, где сообщение было написано на карте Google. В своем исследовании я наткнулся на сообщение в блоге о том, как создать локатор магазинов с помощью CMB2 и Google Maps. С тех пор CMB2 стал одним из моих любимых плагинов и используется в большинстве моих проектов.

Во-первых, что такое CMB2?

Что ж, CMB — это аббревиатура от Custom Meta Boxes, и, согласно описанию на странице плагина, «CMB2 — это метаполе, настраиваемые поля и библиотека форм для WordPress, которые поразят вас». Он был разработан Джастином Штернбергом из WebDevStudios и находился в репозитории плагинов чуть более двух лет. Тем не менее, в феврале прошлого года хорошие ребята из репозитория плагинов WordPress признали, что они оплошали, и одобрили CMB2 в качестве плагина, хотя этого делать не следовало.

Видите ли, плагины обычно могут делать что-то прямо из коробки; у них есть некоторая встроенная функциональность. CMB2 на самом деле является фреймворком. Как однажды объяснил Штернберг: «Это фреймворк для разработчиков, позволяющий легко создавать формы и поля для ваших тем и плагинов». На самом деле при установке CMB2 ничего не произойдет. Вы не получите страницу администратора и пользовательский интерфейс администратора. Чтобы использовать CMB2, вы должны уметь писать код и добавлять его в свой файл functions.php . По этой причине я называю его «не подключаемым модулем».

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

Как настроить CMB2

Чтобы начать работу, вам нужно найти файл example-functions.php в каталоге плагина и скопировать его в свою тему. Его можно скопировать непосредственно в корневую папку темы, но чтобы ваш проект был хорошо организован, я предлагаю скопировать его в папку, такую как /lib/ или /includes/ . Если вы уже знаете, как вы хотели бы использовать CMB2, вы можете пойти дальше и переименовать файл во что-то более подходящее. Например, если вы хотите использовать его для создания настраиваемых полей для страницы отзывов, вы можете назвать его testimonial-functions.php .

Затем вам нужно будет убедиться, что WordPress находит новый файл, добавив оператор require_once в ваш файл functions.php . Это будет выглядеть примерно так:

require_once( dirname(__FILE__) . '/lib/testimonial-functions.php');

Теперь пришло время покопаться. Откройте файл testimonial-functions.php (или как вы его назвали). Вы заметите, что Джастин не только создал пример практически всех возможных типов полей, но также создал функции для отображения полей по домашней странице, категории, идентификатору сообщения и т. д.

Как загрузить JavaScript в WordPress

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

Примечание. Цель этой статьи — познакомить вас с CMB2; это не будет полным руководством о том, как использовать все его аспекты, и поскольку это фреймворк, который был разработан для помощи программистам, вы должны иметь базовое представление о PHP и внутренней работе WordPress. Если вы ищете плагин Custom Meta Box с пользовательским интерфейсом администратора, вы можете попробовать плагин Advanced Custom Fields.

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

Работая в файле testimonial-functions.php , вам нужно будет найти раздел для регистрации и добавления вашей новой функции. Этот код выглядит примерно так.

add_action( 'cmb2_admin_init', 'yourprefix_register_demo_metabox' );

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

add_action( 'cmb2_admin_init', 'register_testimonial_metabox' );
/**
 * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook.
 */
function register_testimonial_metabox() {

Я также предлагаю вам переименовать префикс.

// Start with an underscore to hide fields from custom fields list
$prefix = '_yourprefix_'; //note, you can use anything you'd like here, but you need to remember what you use, because you will be using it again later.

Существует несколько различных типов полей на выбор. Я собираюсь использовать:

'type' =&amp;amp;gt; 'textarea_small' // for the author field
'type'    =&amp;amp;gt; 'wysiwyg' // for the testimonial in case we want to include html
'type' =&amp;amp;gt; 'file' // for the image of the project or author

$cmb_demo-&amp;amp;gt;add_field( array(
	'name' =&amp;amp;gt; __( 'Testimonial Author', 'cmb2' ),
	'desc' =&amp;amp;gt; __( 'Who is the testimonial from', 'cmb2' ),
	'id'   =&amp;amp;gt; $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' =&amp;amp;gt; 'textarea_small',
	) );

$cmb_demo-&amp;amp;gt;add_field( array(
	'name'    =&amp;amp;gt; __( 'Testimonial', 'cmb2' ),
	'desc'    =&amp;amp;gt; __( 'add the testimonial here', 'cmb2' ),
	'id'      =&amp;amp;gt; $prefix . 'testimonial', //Note, I renamed this to be more appropriate
	'type'    =&amp;amp;gt; 'wysiwyg',
	'options' =&amp;amp;gt; array( 'textarea_rows' =&amp;amp;gt; 5, ),
	) );

	$cmb_demo-&amp;amp;gt;add_field( array(
	'name' =&amp;amp;gt; __( 'Author Image', 'cmb2' ),
	'desc' =&amp;amp;gt; __( 'Upload an image or enter a URL.', 'cmb2' ),
	'id'   =&amp;amp;gt; $prefix . 'image', //Note, I renamed this to be more appropriate
	'type' =&amp;amp;gt; 'file',
	) );

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

add_action( 'cmb2_admin_init', 'register_testimonial_metabox' );
/**
 * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook.
 */
function register_testimonial_metabox() {

 // Start with an underscore to hide fields from custom fields list
    $prefix = '_yourprefix_'; //note, you can use anything you'd like here

/**
 * Start field groups here
 */

$cmb_demo-&amp;amp;gt;add_field( array(
	'name' =&amp;amp;gt; __( 'Testimonial Author', 'cmb2' ),
	'desc' =&amp;amp;gt; __( 'Who is the testimonial from', 'cmb2' ),
	'id'   =&amp;amp;gt; $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' =&amp;amp;gt; 'textarea_small',
	) );

$cmb_demo-&amp;amp;gt;add_field( array(
	'name'    =&amp;amp;gt; __( 'Testimonial', 'cmb2' ),
	'desc'    =&amp;amp;gt; __( 'add the testimonial here', 'cmb2' ),
	'id'      =&amp;amp;gt; $prefix . 'testimonial', //Note, I renamed this to be more appropriate
	'type'    =&amp;amp;gt; 'wysiwyg',
	'options' =&amp;amp;gt; array( 'textarea_rows' =&amp;amp;gt; 5, ),
	) );

	$cmb_demo-&amp;amp;gt;add_field( array(
	'name' =&amp;amp;gt; __( 'Author Image', 'cmb2' ),
	'desc' =&amp;amp;gt; __( 'Upload an image or enter a URL.', 'cmb2' ),
	'id'   =&amp;amp;gt; $prefix . 'image', //Note, I renamed this to be more appropriate
	'type' =&amp;amp;gt; 'file',
	) );
}

Вот и все! Ваш окончательный код должен выглядеть так:

&amp;amp;lt;?php
/**
 * Include and set up custom metaboxes and fields. (Make sure you copy this file outside the CMB2 directory)
 *
 * Be sure to replace all instances of 'yourprefix_' with your project's prefix.
 * http://nacin.com/2010/05/11/in-wordpress-prefix-everything/
 *
 * @category YourThemeOrPlugin
 * @package  Demo_CMB2
 * @license  http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later)
 * @link     https://github.com/WebDevStudios/CMB2
 */

/**
 * Get the bootstrap! If using the plugin from wordpress.org, REMOVE THIS!
 */

if ( file_exists( dirname( __FILE__ ) . '/cmb2/init.php' ) ) {
	require_once dirname( __FILE__ ) . '/cmb2/init.php';
} elseif ( file_exists( dirname( __FILE__ ) . '/CMB2/init.php' ) ) {
	require_once dirname( __FILE__ ) . '/CMB2/init.php';
}

add_action( 'cmb2_admin_init', 'register_testimonial_metabox' );
/**
 * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook.
 */
function register_testimonial_metabox() {

 // Start with an underscore to hide fields from custom fields list
    $prefix = '_yourprefix_'; //note, you can use anything you'd like here

/**
 * Start field groups here
 */

// This first field group tells WordPress where to put the fields. In the example below, it is set to show up only on Post_ID=10

$cmb_demo = new_cmb2_box( array(
		'id'            =&amp;amp;gt; $prefix . 'metabox',
		'title'         =&amp;amp;gt; __( 'Homepage Custom Fields', 'cmb2' ),
		'object_types'  =&amp;amp;gt; array( 'page', ), // Post type
		'show_on'      =&amp;amp;gt; array( 'id' =&amp;amp;gt; array( 10, ) ), // Specific post IDs to display this metabox
		) );

$cmb_demo-&amp;amp;gt;add_field( array(
	'name' =&amp;amp;gt; __( 'Testimonial Author', 'cmb2' ),
	'desc' =&amp;amp;gt; __( 'Who is the testimonial from', 'cmb2' ),
	'id'   =&amp;amp;gt; $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' =&amp;amp;gt; 'textarea_small',
	) );

$cmb_demo-&amp;amp;gt;add_field( array(
	'name'    =&amp;amp;gt; __( 'Testimonial', 'cmb2' ),
	'desc'    =&amp;amp;gt; __( 'add the testimonial here', 'cmb2' ),
	'id'      =&amp;amp;gt; $prefix . 'testimonial', //Note, I renamed this to be more appropriate
	'type'    =&amp;amp;gt; 'wysiwyg',
	'options' =&amp;amp;gt; array( 'textarea_rows' =&amp;amp;gt; 5, ),
	) );

	$cmb_demo-&amp;amp;gt;add_field( array(
	'name' =&amp;amp;gt; __( 'Author Image', 'cmb2' ),
	'desc' =&amp;amp;gt; __( 'Upload an image or enter a URL.', 'cmb2' ),
	'id'   =&amp;amp;gt; $prefix . 'image', //Note, I renamed this to be more appropriate
	'type' =&amp;amp;gt; 'file',
	) );
}

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

Использование CMB2 — отличный способ дать вашему веб-сайту именно то, что вам нужно, поскольку варианты действительно безграничны. Например, CMB2 можно использовать для создания страницы параметров темы с мета-полями для логотипов, URL-адресов сайтов социальных сетей или видео. В случае создания веб-сайта для клиента CMB2 идеально подходит для настройки администратора, чтобы клиенту не приходилось форматировать контент в соответствии со стилями вашей темы. И как только данные введены, вы можете отобразить контент со всеми стилями, уже заданными в вашем HTML и CSS.

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

CMB2 позволил мне поднять мои сайты WordPress на новый уровень, и я надеюсь, что он сделает то же самое для вас.

Что дальше: Плагины!

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

Загрузите эту электронную книгу, чтобы получить список наших наиболее рекомендуемых плагинов для разработчиков!