Вы когда-нибудь пытались создавать метабоксы в WordPress? Это беспорядок не только для начинающих, но даже для продвинутых разработчиков WordPress. К счастью для сообщества WordPress, само сообщество может предложить элегантные решения для таких беспорядочных проблем. CMB2 является одним из них.
В этой части серии «Инструментарий Smart WordPress Developer» мы рассмотрим обширную библиотеку CMB2 для разработки пользовательских метабоксов и форм в WordPress.
Исключительно необычный способ создания пользовательских метабоксов
Поскольку это не учебник по созданию пользовательских метабоксов, я не собираюсь учить вас, как это сделать, используя основные функции, но я дам несколько полезных ссылок. Вместо этого я собираюсь пройтись по мирской рутине этого:
Создание метабокса: по общему признанию, эта часть важна, и даже CMB2 использует аналогичный способ — вы должны создать собственный метабокс с помощью функции add_meta_box() … внутри функции, которая add_meta_boxes действию add_meta_boxes . Не слишком легко, не слишком сложно, но между ними.
Создайте поля для отображения в метабоксе: в этой части вы должны создать отдельную функцию (на которую вы также должны ссылаться в функции add_meta_box() ) и написать в ней ванильный HTML, такой как div s и label s и input s, для отображения полей формы, которые не будут работать, если вы не связываете HTML со сложным PHP . Текстовые вводы в порядке, но создание выпадающих списков или флажков? Приготовьтесь запутаться. (Даже не wp_nonce_field() меня с загрузки файлов и wp_nonce_field() цвета.) О, вы забыли использовать wp_nonce_field() для безопасности? Жаль, ваш код никогда не будет работать.
Санировать и сохранять значения полей: Да. Чтобы форма сохраняла данные, вы должны использовать еще одну функцию, чтобы проверить кучу вещей, очистить данные и сохранить значения в вашем пользовательском метабоксе. И вы должны подключить эту функцию к действию save_post . Ухоженная.
Если вы хотите сделать это «основным способом» и потратить часы на создание пары метабоксов, что ж, хорошо для вас, отправляясь в путь. Но, конечно, может наступить время, когда вы просто не сможете использовать вспомогательные среды, такие как CMB2. В этом случае вы можете обратиться к этому учебному пособию SitePoint Нараяна Прусти или к обширной серии учебных пособий Тома Макфарлина по Tuts + Code .
Введите CMB2: Исключительно удивительный способ создания пользовательских метабоксов
А что если я скажу вам, что вы можете создавать собственные метабоксы, создавая одну функцию, которая привязывается к одному действию, и используя очень умные функции, которые выполняют всю тяжелую работу по созданию HTML и магически связывая все вместе? И поверьте мне, я не преувеличиваю даже чуть-чуть!
С помощью CMB2 вы сможете создавать собственные метабоксы за долю времени, которое вы потратите на это «основным способом».
Настройка CMB2
CMB2 поставляется в двух формах: в форме плагина и в форме фреймворка . Если вы собираетесь использовать CMB2 в проектах, которые не будут выпущены для сообщества, я предлагаю вам использовать плагин, потому что обновление плагина CMB2 будет намного проще, и вам не нужно будет включать файлы двигателя CMB2. Но если вы собираетесь опубликовать свой проект для сообщества, вам лучше интегрировать CMB2 в проект, загрузив файлы из GitHub, поместив их в папку вашего проекта и используя приведенные ниже строки:
|
1
2
3
4
5
6
7
8
|
<?php
// require the init.php file
if ( file_exists( __DIR__ . ‘/path/to/cmb2/init.php’ ) ) {
require_once __DIR__ .
}
?>
|
Конечно, имейте в виду, что вы должны отредактировать строки выше, чтобы они указывали на файл init.php в init.php .
Создание вашего первого пользовательского метабокса
Перед созданием нашего первого метабокса нам нужно создать нашу единственную функцию, которая будет подключаться к собственному действию cmb2_init :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<?php
// hook the function to the cmb2_init action
add_action( ‘cmb2_init’, ‘cmb2_sample_metaboxes’ );
// create the function that creates metaboxes and populates them with fields
function cmb2_sample_metaboxes() {
// set the prefix (start with an underscore to hide it from the custom fields list
$prefix = ‘_my_prefix_’;
}
?>
|
После этого создать метабокс так же просто, как создать новую переменную:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<?php
// hook the function to the cmb2_init action
add_action( ‘cmb2_init’, ‘cmb2_sample_metaboxes’ );
// create the function that creates metaboxes and populates them with fields
function cmb2_sample_metaboxes() {
// set the prefix (start with an underscore to hide it from the custom fields list
$prefix = ‘_my_prefix_’;
// create the metabox
$cmb = new_cmb2_box( array(
‘id’ => ‘test_metabox’,
‘title’ => ‘Test Metabox’,
‘object_types’ => array( ‘page’, ‘post’, ‘customposttype’ ), // post type
‘context’ => ‘normal’, // ‘normal’, ‘advanced’ or ‘side’
‘priority’ => ‘high’, // ‘high’, ‘core’, ‘default’ or ‘low’
‘show_names’ => true, // show field names on the left
‘cmb_styles’ => false, // false to disable the CMB stylesheet
‘closed’ => true, // keep the metabox closed by default
) );
}
?>
|
Заполнение пользовательского метабокса полями
После создания нашего первого пользовательского метабокса пришло время сделать его полезным, заполнив его «полями», которые предоставляет CMB2. И сделать это так же просто, как запустить функцию с переменной metabox, которую мы только что создали:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<?php
// metabox title
$cmb->add_field( array(
‘name’ => ‘Test Title’,
‘desc’ => ‘This is a title description’,
‘type’ => ‘title’,
‘id’ => ‘wiki_test_title’
) );
// email input
$cmb->add_field( array(
‘name’ => ‘Test Text Email’,
‘id’ => ‘wiki_test_email’,
‘type’ => ‘text_email’,
) );
// file uploader
$cmb->add_field( array(
‘name’ => ‘Test File’,
‘desc’ => ‘Upload an image or enter an URL.’,
‘id’ => ‘wiki_test_image’,
‘type’ => ‘file’,
// Optionally hide the text input for the url:
‘options’ => array(
‘url’ => false,
),
) );
// remember when I said doing a color picker would be super hard when using core functions?
$cmb->add_field( array(
‘name’ => ‘Test Color Picker’,
‘id’ => ‘wiki_test_colorpicker’,
‘type’ => ‘colorpicker’,
‘default’ => ‘#ffffff’,
) );
?>
|
CMB2 предоставляет более 30 типов полей, включая обычные текстовые вводы, редакторы WYSIWYG, средства выбора даты, средства выбора цвета, средства загрузки файлов и даже средства выбора таксономии. Полный список типов полей можно найти на этой вики-странице CMB2 .
Еще больше удивительности
Создание полностью функциональных пользовательских метабоксов само по себе потрясающе, но CMB2 на этом не останавливается. Есть несколько вещей, которые вы можете сделать с CMB2:
- Вы можете использовать CMB2, чтобы создать страницу настроек для вашей темы .
- Вы можете заставить CMB2 работать для создания форм отправки сообщений .
- Вы можете добавить свои собственные фильтры
show_onи условно показать или скрыть ваши метабоксы. - И вы даже можете создавать свои собственные типы полей .
Чтобы узнать больше о сверхдержавах CMB2, подобных этим, есть несколько страниц, которые вы можете проверить:
- Сторонние ресурсы для CMB2
- Страница «Советы и хитрости» в CMB2 Wiki
- Библиотека фрагментов CMB2 , страница, содержащая несколько очень полезных фрагментов кода
- Блог WebDevStudios, создателей CMB2
Подведение итогов на сегодня
Нельзя отрицать, что придерживаться ядра WordPress при сборке вещей не всегда так просто, как кажется. Таким образом, использование вспомогательных сред, таких как CMB2, ускорит наши процессы разработки. И я считаю, что, хотя CMB2 так же хорош, как и сейчас, у него гораздо больше возможностей для совершенствования (не только в области пользовательских метабоксов, но и в других направлениях), поэтому я буду следить за этим проект, если бы я был тобой.
Увидимся в следующей части, где мы рассмотрим WP-CLI, единственный в своем роде инструмент WordPress, который дает нам возможность управлять нашими установками WordPress через командную строку.