Kama_Post_Meta_Box — создаем метаполя для записей
В этой статье я поделись классом Kama Post Meta Box, с помощью которого можно быстро создавать метаполя для записей, просто указав их в виде массива. Получается своего рода конструктор. К тому же, этот вариант автоматически очищает данные при сохранении и в некоторых случаях может защитить от взлома сайта.
Статью на эту тему я уже писал: «Блок произвольных полей в админке WordPress своими руками». Правда было это давно, но статья по-прежнему актуальна и может пригодится, когда нужно создать произвольные поля для записи, без использования плагинов. Однако в том варианте все нужно делать вручную, включая создание html каждого поля формы — это не удобно. Также, тот вариант требует определенных знаний: умение работать с хуками и т.д.
- Класс: Kama_Post_Meta_Box
- Передаваемые параметры
- Заметки
- Примеры создания различных произвольных полей
- #1 Демонстрация создания всех видов метаполей
- #2 Блоки для указанных типов записей
- #3 Своя функция вывода поля
- #4 Точные названия полей без префикса
- #5 Очистка значений перед сохранением
- #6 Темы оформления: настройка html и css каждого поля
- #7 Блоки с одинаковыми id
- #8 Отключение метабокса по условию
- #1. Метабокс записи для указанной рубрики
- #2. Метабокс записи для всех рубрик кроме указанной
- Опрос
- Как вы создаете произвольные поля?
- Плагины
Покажу на примере, как легко можно создать произвольные поля для записей. Допустим, нам нужно создать 4 SEO поля: title, description, keywords и robots для всех типов записей. Для создания метабокса нужно вызвать класс Kama_Post_Meta_Box с передачей ему параметров:
class_exists('Kama_Post_Meta_Box') && new Kama_Post_Meta_Box( array(
'id' => '_seo',
'title' => 'SEO поля',
'fields' => array(
'title' => array(
'type'=>'text', 'title'=>'Title', 'desc'=>'Заголовок страницы (рекомендуется 70 символов)', 'attr'=>'style="width:99%;"'
),
'description' => array(
'type'=>'textarea','title'=>'Description', 'desc'=>'Описание страницы (рекомендуется 160 символов)', 'attr'=>'style="width:99%;"'
),
'keywords' => array(
'type'=>'text', 'title'=>'Keywords', 'desc'=>'Ключевые слова для записи', 'attr'=>'style="width:99%;"'
),
'robots' => array(
'type'=>'radio', 'title'=>'Robots', 'options' => array(''=>'index,follow', 'noindex,nofollow'=>'noindex,nofollow')
),
),
) );
В результате в админке на страницах редактирования записей любого типа (post, page, ...) получим такой метабокс:
Удобно? По-моему очень!
Чтобы такой код работал нужно подключить в functions.php (или куда-то еще) следующий код (PHP класс)
Класс: Kama_Post_Meta_Box
GitHub менюПередаваемые параметры
Прежде чем переходить к остальным примерам, рассмотрим все параметры, которые понимает класс:
new Kama_Post_Meta_Box( array(
'id' => '', // динетификатор блока. Используется как префикс для названия метаполя.
// начните идент. с '_': '_foo', чтобы ID не был префиксом в названии метаполей.
'title' => '', // заголовок блока
'desc' => '', // описание для метабокса. Можно указать функцию/замыкание, она получит $post. С версии 1.9.1
'post_type' => '', // строка/массив. Типы записей для которых добавляется блок: array('post','page').
// По умолчанию: '' - для всех типов записей.
'post_type_feature' => '', // строка. возможность которая должна быть у типа записи,
// чтобы метабокс отобразился. См. post_type_supports()
'post_type_options' => '', // массив. опции типа записи, которые должны быть у типа записи чтобы метабокс отобразился.
// см. первый параметр get_post_types()
'priority' => 'high', // Приоритет блока для показа выше или ниже остальных блоков ('high' или 'low').
'context' => 'normal', // Место где должен показываться блок ('normal', 'advanced' или 'side').
'disable_func' => '', // функция отключения метабокса во время вызова самого метабокса.
// Если вернет что-либо кроме false/null/0/array(), то метабокс будет отключен. Передает объект поста.
'cap' => '', // название права пользователя, чтобы показывать метабокс.
'save_sanitize' => '', // Функция очистки сохраняемых в БД полей. Получает 2 параметра: $metas - все поля для очистки и $post_id
'theme' => 'table', // тема оформления: 'table', 'line'.
// ИЛИ массив паттернов полей: css, fields_wrap, field_wrap, title_patt, field_patt, desc_patt.
// Массив указывается так: [ 'desc_patt' => '<div>%s</div>' ] (за овнову будет взята тема line)
// Массив указывается так: [ 'table' => [ 'desc_patt' => '<div>%s</div>' ] ] (за овнову будет взята тема table)
// ИЛИ изменить тему можно через фильтр 'kp_metabox_theme' - удобен для общего изменения темы для всех метабоксов.
// Массив метаполей, которые будут выводиться
'fields' => array(
// Каждое поле указывается в виде массива, где ключ - это название метаполя, а значение - это массив данных о поле
// реальное название метаполя будет выглядеть как: {id}_{meta_key}
'meta_key' => array(
'type' => '', // тип поля: textarea, select, checkbox, radio, image, wp_editor, hidden, sep_*.
// Или базовые: text, email, number, url, tel, color, password, date, month, week, range.
// 'sep' - визуальный разделитель, для него нужно указать `title` и можно указать `'attr'=>'style="свои стили"'`.
// 'sep' - чтобы удобнее указывать тип 'sep' начните ключ поля с `sep_`: 'sep_1' => [ 'title'=>'Разделитель' ].
// Для типа `image` можно указать тип сохраняемого значения в `options`: 'options'=>'url'. По умолчанию тип = id.
// По умолчанию 'text'.
'title' => '', // заголовок метаполя
'desc' => '', // описание для поля. Можно указать функцию/замыкание, она получит параметры: $post, $meta_key, $val, $name.
'placeholder' => '', // атрибут placeholder
'id' => '', // атрибут id. По умолчанию: $this->opt->id .'_'. $key
'class' => '', // атрибут class: добавляется в input, textarea, select. Для checkbox, radio в оборачивающий label
'attr' => '', // любая строка, будет расположена внутри тега. Для создания атрибутов. Пр: style="width:100%;"
'val' => '', // значение по умолчанию, если нет сохраненного.
'options' => '', // массив: array('значение'=>'название') - варианты для типов 'select', 'radio'.
// Для 'wp_editor' стенет аргументами.
// Для 'checkbox' станет значением атрибута value: <input type="checkbox" value="{options}">.
// Для 'image' определяет тип сохраняемого в метаполе значения: id (ID вложения), url (url вложения).
'callback' => '', // название функции, которая отвечает за вывод поля.
// если указана, то ни один параметр не учитывается и за вывод полностью отвечает указанная функция.
// Все параметры передаются ей... Получит параметры: $args, $post, $name, $val
'sanitize_func' => '', // функция очистки данных при сохранении - название функции или Closure.
// Укажите 'none', чтобы не очищать данные...
// работает, только если не установлен глобальный параметр 'save_sanitize'...
// получит параметр $value - сохраняемое значение поля.
'output_func' => '', // функция обработки значения, перед выводом в поле.
// получит параметры: $post, $meta_key, $value - объект записи, ключ, значение метаполей.
'update_func' => '', // функция сохранения значения в метаполя.
// получит параметры: $post, $meta_key, $value - объект записи, ключ, значение метаполей.
'disable_func' => '', // функция отключения поля.
// Если не false/null/0/array() - что-либо вернет, то поле не будет выведено.
// Получает парамтры: $post, $meta_key
'cap' => '', // название права пользователя, чтобы видеть и изменять поле.
),
'meta_key2' => array( /*...*/ ),
'meta_key3' => array( /*...*/ ),
// ...
),
) );
меню
Заметки
Названия произвольных полей
Создаваемые произвольные поля будут иметь название/ключ, состоящий из объединения основного ID и указанного ключа метаполя: {id}_{meta_key} (смотрите пример ниже).
Самый просто способ узнать название произвольного поля — это посмотреть в исходный код. Для этого фокусируемся на нужном поле, кликаем правой кнопкой и смотрим значение атрибута name в исходном коде элемента:
Получение произвольных полей
Получать созданные поля для использования в темах и плагинах нужно стандартной функцией WordPress: get_post_meta():
// получим значение поля 'my_meta_key' у записи 25 $my_filed = get_post_meta( 25, 'my_meta_key', 1 ); echo $my_filed;
Права
-
Блок/метабокс будет показан только пользователям, у которых есть право редактировать текущую запись.
- Сохранение метаполей будет работать только для пользователей, которые могут редактировать текущую запись.
Примеры создания различных произвольных полей
#1 Демонстрация создания всех видов метаполей
Этот пример показывает как создавать все поддерживаемые типы метаполей: 'text', 'textarea', 'select', 'checkbox', 'radio', 'wp_editor', 'hidden' и другие: 'email', 'number', 'phone', 'password' и т.д. (обрабатываются как поле 'text').
class_exists('Kama_Post_Meta_Box') && new Kama_Post_Meta_Box(
array(
'id' => 'my',
'title' => 'Мои произвольные поля',
'fields' => array(
'text_field' => array(
'title' => 'Текстовое поле'
),
'number_field' => array(
'type'=>'number', 'title'=>'Числовое поле', 'desc'=>'Число от 0 до 5', 'attr'=>'min="0" max="5"'
),
'textarea_field' => array(
'type'=>'textarea', 'title'=>'Большое текстовое поле', 'desc'=>'Описание чего-либо. Можно использовать html теги.'
),
'select_field' => array(
'type'=>'select', 'title'=>'Выберите значение', 'options'=>array(''=>'Ничего не выбрано', 'val_1'=>'Выбор 1', 'val_2'=>'Выбор 2')
),
'select_field2' => array(
'type'=>'select', 'title'=>'Выберите значение 2', 'options'=>array('Выбор 1', 'Выбор 2'), 'desc'=>'Выбор, где не указывается значение value для тегов option'
),
'checkbox_field' => array(
'type'=>'checkbox', 'title'=>'Галочка', 'desc'=>'отметьте, если хотите :)'
),
'checkbox_field2' => array(
'type'=>'checkbox', 'desc'=>'< только описание для галочки, без заголовка'
),
'radio_field' => array(
'type'=>'radio', 'title'=>'Переключатель', 'desc'=>'Выберите одно из значений', 'options'=>array(''=>'Ничего не выбрано', 'good'=>'хорошо', 'bad'=>'плохо')
),
'radio_field2' => array(
'type'=>'radio', 'desc'=>'Переключатель без заголовка', 'options'=>array(''=>'Не выбрано', 'good'=>'хорошо', 'bad'=>'плохо')
),
'wp_editor_field' => array(
'type'=>'wp_editor', 'title'=>'Текстовое поле с редактором TinyMce'
),
'wp_editor_field2' => array(
'type'=>'wp_editor', 'title'=>'Текстовое поле с редактором WordPress, без TinyMce', 'options'=>array('tinymce'=>0) // список настроек: http://wp-kama.ru/function/wp_editor
),
'hidden_field' => array(
'type'=>'hidden', 'val'=>'foo'
),
'' => array('type'=>'text', 'title'=>''), // заготовка
),
)
);
В результате, появиться такой метаблок на странице редактирования любого типа записи.
А при сохранении будут созданы, такие произвольные поля:
#2 Блоки для указанных типов записей
Когда нужно создать метабокс с метаполями только для указанных типов записи, укажите параметр 'post_type' => array('post','page') в котором перечислите нужные типы записей.
class_exists('Kama_Post_Meta_Box') && new Kama_Post_Meta_Box(
array(
'id' => 'my',
'title' => 'Мои произвольные поля',
'post_type' => array('page', 'my_type'), // показывать только на страницах типа: page и my_type
'fields' => array(
'text_field' => array( 'title' => 'Текстовое поле' ),
),
)
);
#3 Своя функция вывода поля
Когда возможностей класса не достаточно и нужно создать поле, которое будет иметь какой-то особенный вывод, используйте параметр callback для создаваемого поля.
В этом случае можно настроить вывод поля как угодно. Для примера давайте создадим несколько полей, которые будут храниться в поле special_field в виде массива.
<?php
class_exists('Kama_Post_Meta_Box') && new Kama_Post_Meta_Box(
array(
'id' => 'my',
'title' => 'Мои произвольные поля',
'fields' => array(
'special_field' => array(
'title'=>'Текстовое поле', 'callback'=>'special_field_out_function',
// функция очистки полей
'sanitize_func'=>function($array){ return array_map('sanitize_text_field', $array); }
),
),
)
);
// функция вывода для поля
function special_field_out_function( $args, $post, $name, $val ){
/*
$args = Array
(
[type] =>
[title] => Текстовое поле
[desc] =>
[placeholder] =>
[id] =>
[class] =>
[attr] =>
[val] =>
[options] =>
[callback] => special_field_out_function
[key] => special_field
[field_patt] => %s
[title_patt] => <strong class="tit">%s</strong>
[desc_patt] => <br><span class="description" style="opacity:0.6;">%s</span>
)
$post = Объект записи
$name = 92a9f92_meta[my_special_field]
$val = Текущее значение метаполя
*/
ob_start();
?>
<div class="special_field_wrap">
Ящик 1: <input type="text" name="<?= $name ?>[box1]" value="<?= esc_attr( @ $val['box1'] ) ?>">
Ящик 2: <input type="text" name="<?= $name ?>[box2]" value="<?= esc_attr( @ $val['box2'] ) ?>">
Ящик 3: <input type="text" name="<?= $name ?>[box3]" value="<?= esc_attr( @ $val['box3'] ) ?>">
</div>
<?php
return ob_get_clean();
}
В результате, получим такой метабокс:
Все данные будут храниться в поле my_special_field в виде массива array( 'box1'=>'яблоки', 'box1'=>'апельсины', 'box1'=>'груши' ).
меню#4 Точные названия полей без префикса
Когда нужно, чтобы названия метаполей были точно такие же какие вы указали, добавьте в начало id нижнее подчеркивание _.
Это может понадобится, если у вас уже есть метаполя и вам нужно подстроиться под их названия. В этом случае префикс, который добавляется для названия каждого метаполя будет лишний.
Например, у вас уже есть метаполя: foo, bar, views, title и для них нужно создать метабокс:
class_exists('Kama_Post_Meta_Box') && new Kama_Post_Meta_Box(
array(
'id' => '_my', // "_" - значит, что id не будет добавляться в название поля
'title' => 'Мои точные произвольные поля',
'fields' => array(
'foo' => array( 'title' => 'Поле foo' ),
'bar' => array( 'title' => 'Поле bar' ),
'views' => array( 'title' => 'Поле views' ),
'title' => array( 'title' => 'Поле title' ),
),
)
);
Получим такой метабокс:
#5 Очистка значений перед сохранением
Класс автоматически очищает все поля и защищает от XSS атак. Но иногда может быть нужно, очистить определенное поле как-то особенно. В этом случае укажите навзание функции очистки в параметре 'save_sanitize' или используйте фильтр "kpmb_save_sanitize_{id}". Если указана функция или хук очистки, то класс никак не очищает сохраняемые данные, очистка всех полей должна быть в вашей функции очистки.
Допустим, мы создаем поле в котором все символы должны быть прописными, а если они указаны как строчные, то автоматом преобразуем их в прописные и сохраним:
class_exists('Kama_Post_Meta_Box') && new Kama_Post_Meta_Box(
array(
'id' => 'my',
'title' => 'Мои произвольные поля',
'save_sanitize' => 'my_metabox_sanitize_function',
'fields' => array(
'foo_field' => array( 'title'=>'Некое поле' ),
'for_esc' => array( 'title'=>'Специальное поле', 'desc'=>'Поле которое должно содержать только прописные символы.' ),
),
)
);
// функция очистки всех полей
function my_metabox_sanitize_function( $metas, $post_id ){
/*
$metas = сохраняемые поля в массиве
$post = ID записи
*/
// очищаем нужное поле
foreach( $metas as $key => & $val ){
// наше поле
if( $key == 'my_for_esc' )
$val = mb_strtoupper( $val );
// все остальные поля
else
$val = sanitize_text_field( $val );
}
return $metas;
}
В результате получим:
Еще один пример функции очистки
Такой подход используется в классе, если не указать функцию очистки. Он очищает с помощью wp_kses() и обрабатывает массив и все вложенные массивы.
function save_sanitize_function( $metas, $post_id ){
array_walk_recursive( $metas, function( & $val, $key ){
// очистка отдельного поля my_video - разрешим оставить в нем тег iframe
if( $key == 'my_video' ){
$val = addslashes( wp_kses( stripslashes( $val ), array(
'iframe' => array( 'src' => true, 'width' => true, 'height' => true, 'frameborder' => true, 'marginwidth' => true, 'marginheight' => true, 'scrolling' => true, 'title' => true, ),
) ) );
}
// has tags
elseif( false !== strpos($val, '<') )
$val = addslashes( wp_kses( stripslashes( $val ), 'post' ) ); // default ?
else
$val = sanitize_text_field( $val );
} );
return $metas;
}
меню
#6 Темы оформления: настройка html и css каждого поля
Можно указать как должны выводиться поля в метабоксе. Для этого есть параметр theme - тема оформления.
В этом параметре можно указать строку или массив:
- table (по умолчанию) - поля будут выведены в табличной форме.
- line - поля будут выведены линиями. Во всю ширину метабокса, где идет заголовок поля, а под ним само поле.
-
array() - указывая массив, вы можете сами определить все виды оборачивающих тегов для каждого элемента поля. В массиве можно указать следующие параметры:
- css — CSS стили метабокса. Например:
'.my_field{ margin:1em; }' - fields_wrap — формат обёртки всего метаблока (всех полей)
- field_wrap — формат обёртки поля (вместе с заголовком и полем)
- title_patt — формат обёртки заголовка поля
- field_patt — формат обёртки самого поля (только input...)
- desc_patt — формат обёртки описания поля
- css — CSS стили метабокса. Например:
class_exists('Kama_Post_Meta_Box') && new Kama_Post_Meta_Box(
array(
'id' => 'my',
'title' => 'Мои произвольные поля',
'theme' => array(
'css' => '.my_field_wrap{ margin-bottom:1em; } .my_field_desc{ opacity:0.5; } .my_field_tit{ font-weight:bold; margin-bottom:.3em; }',
'fields_wrap' => '%s',
'field_wrap' => '<div class="my_field_wrap %1$s">%2$s</div>', // '%2$s' будет заменено на html поля
'title_patt' => '<div class="my_field_tit">%s</div>', // '%s' будет заменено на заголовок
'field_patt' => '%s',
'desc_patt' => '<span class="my_field_desc"> %s</span>', // '%s' будет заменено на текст описания
),
'fields' => array(
'text_field' => array(
'title' => 'Текстовое поле'
),
'number_field' => array(
'type'=>'number', 'title'=>'Числовое поле', 'desc'=>'Число от 0 до 5', 'attr'=>'min="0" max="5"'
),
'textarea_field' => array(
'type'=>'textarea', 'title'=>'Большое текстовое поле', 'desc'=>'Описание чего-либо. Можно использовать html теги.'
),
'select_field' => array(
'type'=>'select', 'title'=>'Выберите значение', 'options'=>array(''=>'Ничего не выбрано', 'val_1'=>'Выбор 1', 'val_2'=>'Выбор 2')
),
'checkbox_field' => array(
'type'=>'checkbox', 'title'=>'Галочка', 'desc'=>'отметьте, если хотите :)'
),
'radio_field' => array(
'type'=>'radio', 'title'=>'Переключатель', 'desc'=>'Выберите одно из значений', 'options'=>array(''=>'Ничего не выбрано', 'good'=>'хорошо', 'bad'=>'плохо')
),
'wp_editor_field2' => array(
'type'=>'wp_editor', 'title'=>'Текстовое поле с редактором WordPress, без TinyMce', 'options'=>array('tinymce'=>0) // список настроек: http://wp-kama.ru/function/wp_editor
),
'' => array('type'=>'text', 'title'=>''), // заготовка
),
)
);
В результате получим такой метабокс:
#7 Блоки с одинаковыми id
Класс позволяет создавать два и более разных блока с одинаковыми id. Следующий пример создаст 2 разных блока метаполя которых будут иметь одинаковый префикс: my_:
if( class_exists('Kama_Post_Meta_Box') ){
new Kama_Post_Meta_Box( array(
'id' => 'my',
'title' => 'Мои произвольные поля',
'fields' => array(
'text_field' => array( 'title' => 'Текстовое поле' ), // название поля: my_text_field
),
) );
new Kama_Post_Meta_Box( array(
'id' => 'my',
'title' => 'Мои произвольные поля 2',
'fields' => array(
'foo_field' => array( 'title' => 'Текстовое поле' ), // название поля: my_foo_field
),
) );
}
#8 Отключение метабокса по условию
Иногда нужно включить метабокс для одной рубрики, но не включать для другой. Для таких "поздних" проверок отключения метабокса, есть параметр: disable_func.
В этот параметр нужно передать название функции, которая будет срабатывать перед выводом метабокса и отключать его, если срабатывает описанное в функции условие. Также, вместо названия функции, можно передать анонимную функцию (замыкание). Далее, если указанная функция, что-нибудь возвращает, то метабокс будет отключен.
А теперь примеры.
меню#1. Метабокс записи для указанной рубрики
Допустим нам нужно вывести метабокс, только если запись находится в рубрике с ID = 2, т.е. его нужно скрыть для всех рубрик кроме 2:
new Kama_Post_Meta_Box( array(
'id' => 'mybox',
'title' => 'Виден для рубрики 2',
'post_type' => 'post',
'disable_func' => function($post){
if( ! in_category(2, $post) ) return 'отключить';
},
'fields' => array(
'fname' => array( 'type'=>'text', 'title'=>'Поле-поле' ),
),
) );
#2. Метабокс записи для всех рубрик кроме указанной
Теперь обратный пример: допустим нужно показывать метабокс, когда запись находится в любой категории, кроме категории 2, т.е. для категории 2 его нужно отключить.
new Kama_Post_Meta_Box( array(
'id' => 'mybox',
'title' => 'Виден для всех рубрик, кроме 2',
'post_type' => 'post',
'disable_func' => function($post){
if( in_category(2, $post) ) return 'отключить';
},
'fields' => array(
'fname' => array( 'type'=>'text', 'title'=>'Поле-поле' ),
),
) );
Проверка может быть любой необязательно категории, это могут быть таксономии или произвольные поля или что-то еще.
Опрос
Плагины
-
Крутой плагин для создания метаполей: Meta Box
-
Хороший плагин для создания метаполей: Custom Field Suite
- Еще один хороший, но огромный: Advanced Custom Fields
- Синтаксис PHP 5.3, 5.4, 5.5, 5.6, 7 — что нового?
- Количество элементов на странице для таблиц WP_List_Table
- Перенаправление на случайную запись в WordPress
Если использовать класс как есть, то локализация не работает. Нужно повесить на хук init:
add_action( 'init', 'my_new_metabox' ); function my_new_metabox() { class_exists( 'Kama_Post_Meta_Box') && new Kama_Post_Meta_Box ( array( 'id' => 'my_id', 'title' => __( 'Details of excursion', 'mytheme' ), 'fields' => array( // заполняем метабокс полями ), ) ); }Спасибо за полезное замечание!
Подскажите, как это работает?
Вначале статьи написано, что: "Для создания метабокса нужно вызвать класс Kama_Post_Meta_Box с передачей ему параметров", я вставляю этот код в functions.php, затем туда же вставляю сам Класс: Kama_Post_Meta_Box.
Но захожу в редактировании постов, а метабокса нет.
Привет. Активно использую твой класс, если помнишь, я просил тебя добавить возможность выбора изображения, и ты это сделал.
К сожалению, часто этих полей не хватает, например сейчас мне нужно добавить произвольное поле для карты с неограниченным количеством точек (и других полей), мастер выбора произвольной записи, мастер выбора иконки и другие вещи.
Чтоб это сделать, мне придется модифицировать твой класс, а я бы хотел оставить его как есть, чтоб можно было обновлять из твоего репозитария.
В общем вот мое предложение, которое ты можешь послать куда подальше:
Я разделю все типы полей на функции, так, чтоб можно было безболезненно добавлять свои (class My__Kama_Post_Meta_Box extends Kama_Post_Meta_Box)
таким образом получим что-то такое:
class kpmb { field: function(args) { .... if( is_callable( $rg->callback ) ){ ... } else { $type_namespace = 'field_type__'.$rg->type; if (method_exists($this, $type_namespace)) { $out = $this->{$type_namespace}($args, $post, $rg, $meta_key, $meta_val, $name, $pholder, $_class, $_title, $fn__field, $fn__desc, $out); } else { $out = $this->field_type__text($args, $post, $rg, $meta_key, $meta_val, $name, $pholder, $_class, $_title, $fn__field, $fn__desc, $out); } } field_type__a: function (args) {} field_type__b: function (args) {} } class my_kpmb extends kpmb { field_type__c: function (args) {} }Тебе интересно?
Хорошее предложение, реализовал его в версии 1.9.7. Но у меня вопрос такой, почему параметр callback не подходит? Через него же тоже можно написать свою функцию, типа расширение для класса и юзать.
Допустим у меня есть задача сделать карту,
если я буду использовать ее более чем в одном типе записей, мне прийдеться либо писать внешюю функцию и помнить, как она называется, работает и т.д., либо к каждому типу писать ее как callback
Использование ООП и классов именно это и подразумевает: хочешь расширить класс, пиши оберточный класс
В общем сделал. Скидывай сюда методы (поля), карты нехватает, колорпикера...
Выборка из таблицы postmeta по metakey с возможностью добавить новое значение:
public function field__autocompletion_with_addition($rg, $var, $post, $fn__desc, $fn__field) { global $wpdb; $choices = $wpdb->get_col("SELECT DISTINCT(`meta_value`) FROM ".$wpdb->postmeta." WHERE `meta_key`='".$rg->id."' ORDER BY `meta_value`"); $id = $rg->id; $value = $rg->val; if (!$choices) $choices = array(); add_action('admin_footer', function() use ($id, $value, $choices) { ?> <script type="text/javascript" id="script__<?=$id?>"> if (typeof window.KamaAWA=='undefined') window.KamaAWA = {}; window.KamaAWA['<?=$id?>'] = {}; (function(self){ self.choices = JSON.parse('<?=json_encode($choices)?>'); self.id = '<?=$id?>'; self.container = document.getElementById('<?=$id?>__list'); self.container.hidden = true; self.input = document.getElementById('<?=$id?>'); self.value = '<?=$value?>'; self.input.addEventListener('input', function(){ var found = false; for (var i=0;i<self.lis.length;i++) { if (self.lis[i].val.toLowerCase().indexOf(this.value.toLowerCase())==-1) { self.lis[i].hidden = true; } else { self.lis[i].hidden = false; found = true; } } if (found) { self.container.hidden = false; } else { self.container.hidden = true; } }); self.input.addEventListener('keydown', function(model){ switch (model.code) { case 'Enter': self.lisHide(); break; case 'ArrowDown': break; case 'ArrowUp': break; } }); self.init = function() { for (var i=0;i<self.choices.length;i++) { self.renderListItem(i, {text:self.choices[i],val:self.choices[i]}); } }; self.lis = []; self.lisHide = function() { for (var i=0;i<self.lis.length;i++) { self.lis[i].hidden = true; } self.container.hidden = true; }; self.renderListItem = function(i, model) { var li = document.createElement('li'); li.style.padding = '5px 10px'; if (i<(self.choices.length - 1)) li.style.borderBottom = '1px solid rgba(0,0,0,0.2)'; li.style.cursor = 'pointer'; li.style.margin = '0px'; li.hidden = true; li.innerHTML = model.text; li.val = model.val; li.addEventListener('click', function(){ self.input.value = this.val; self.lisHide(); }); li.addEventListener('mouseover', function(){ this.style.color = '#0073aa'; this.style.background = 'rgba(0,0,0,0.1)'; }); li.addEventListener('mouseout', function(){ this.style.color = ''; this.style.background = ''; }); self.lis.push(li); self.container.appendChild(li); }; self.init(); })(window.KamaAWA['<?=$id?>']); </script> <?php }); return $var->title.$fn__field('<input '.$rg->attr.$var->class.' type="text" id="'.$rg->id.'" name="'.$var->name.'" value=\''.esc_attr($rg->val).'\' style="width:100%"><ul id="'.$rg->id.'__list" style="border:1px solid rgba(0,0,0,0.2);padding:0;margin:-2px 0 0 2px;list-style:none;max-height:500px;overflow:auto"></ul>'.$fn__desc()); }Использование:
'manufacturer' => array( 'type'=>'autocompletion_with_addition', 'title'=>__('Manufacturer', 'react_app') ),Массив различных значений. Пока не доделан
public function field__array($rg, $var, $post, $fn__desc, $fn__field) { $id = $rg->id; $value = $rg->val; $options = $rg->options; $require_media = false; foreach ($options as $option) { if ($option['type']=='image') $require_media = true; } if ($require_media) wp_enqueue_media(); if (empty($value)) { $value = array(); } else { $value = json_decode($value); foreach ($value as $i => $item) { foreach ($item as $item_key => $item_value) { switch ($options[$item_key]['type']) { case 'image': if (empty($value[$i]->{$item_key})) { $value[$i]->{$item_key} = array('id'=>0,'src'=>''); } else if (is_array($value[$i]->{$item_key})||is_object($value[$i]->{$item_key})) { $value[$i]->{$item_key} = (array) $value[$i]->{$item_key}; } else { if (is_numeric($item_value)) { $value[$i]->{$item_key} = array( 'id' => $item_value, 'src'=> wp_get_attachment_url($item_value) ); } else { $value[$i]->{$item_key} = array('id'=>0,'src'=>''); } } break; default: break; } } } } $value = json_encode($value); add_action('admin_footer', function() use ($id, $value, $options, $post) { ?> <script type="text/javascript" id="script__<?=$id?>"> if (typeof window.KamaArray=='undefined') window.KamaArray = {}; window.KamaArray['<?=$id?>'] = {}; (function(self){ self.post_id = <?=(isset($post->ID)?$post->ID:null)?>; self.value = '<?=$value?>'; self.model = (self.value==''?[]:JSON.parse(self.value)); self.options = JSON.parse('<?=json_encode($options)?>'); self.items = []; self.input = document.getElementById('<?=$id?>'); self.container = document.getElementById('<?=$id?>__container'); var btns = document.createElement('div'); btns.style.order = 999999; btns.style.padding = '3px 0'; var addItemBtn = document.createElement('button'); addItemBtn.className = ['components-button','is-button','is-primary'].join(' '); addItemBtn.innerHTML = '<?=__('Add Item','react_app')?>'; addItemBtn.addEventListener('click', function(){ self.addItem(undefined); }); btns.appendChild(addItemBtn); var clearItemsBtn = document.createElement('button'); clearItemsBtn.className = ['components-button','is-tertiary'].join(' '); clearItemsBtn.innerHTML = '<?=__('Clear Items','react_app')?>'; clearItemsBtn.addEventListener('click', function(){ for (var i=(self.items.length - 1);i>=0;i--) { self.removeItem(i); } }); btns.appendChild(clearItemsBtn); self.container.appendChild(btns); self.onChange = function() { self.input.value = (self.model.length?JSON.stringify(self.model):''); }; self.ItemConstructor = function(i) { var item = this; this.i = i; this.block = null; this.model = self.model[i]; this.init = function() { item.render(); }; this.render = function() { item.block = document.createElement('div'); item.block.style.order = item.i; item.block.style.display = 'flex'; item.block.style.background = 'rgba(0,0,0,0.2)'; item.block.style.borderRadius = '3px'; item.block.style.padding = '3px'; item.block.style.marginBottom = '5px'; item.block.style.flexWrap = 'wrap'; item.block.inputs = {}; for (var index in item.model) { var label = document.createElement('label'); label.innerHTML = '<span>'+self.options[index].title+'</span>'; label.style.minWidth = '200px'; label.style.display = 'flex'; label.style.flexWrap = 'wrap'; label.style.flex = 'auto'; label.style.padding = '3px'; label.style.margin = '3px 0'; label.style.border = '1px solid rgba(255,255,255,0.4)'; label.style.borderRadius = '3px'; switch (self.options[index].type) { case 'checkbox': var input = document.createElement('input'); input.type = self.options[index].type; input.value = 1; input.style.order = -1; input.style.margin = '5px 10px 5px 0'; input.checked = (item.model[index]==''&&item.model[index]!='true'?false:true); input.addEventListener('change', function(){ self.model[item.i][this.index] = this.checked; self.onChange(); }); break; case 'textarea': var input = document.createElement('textarea'); input.value = item.model[index]; input.style.width = 'calc(100% - 2px)'; input.addEventListener('input', function(){ self.model[item.i][this.index] = this.value; self.onChange(); }); break; case 'image': label.style.width = '100%'; label.style.display = 'block'; var image = document.createElement('img'); image.src = (item.model[index].src==''?'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=':item.model[index].src); image.style.objectFit = 'cover'; image.style.width = 'auto'; image.style.margin = '0 auto'; image.style.display = 'block'; label.appendChild(image); var input = document.createElement('button'); input.type = 'button'; input.innerHTML = '<?=__('Select image','react_app')?>'; input.valueObject = (item.model[index]==''?{id:0,src:''}:item.model[index]); input.className = ['components-button','is-button','is-default'].join(' '); input.addEventListener('change', function(){ self.model[item.i][this.index] = this.valueObject; self.onChange(); }); input.image = image; input.addEventListener('click', function(){ var frame = wp.media.frames.kmbframe = wp.media({ title : '<?= __('Add Media','react_app') ?>', library : { type : 'image', uploadedTo : null }, multiple: false, button: { text: '<?=__('Apply','react_app')?>' } }); frame.im__input = this; frame.on( 'select', function() { var attachment = frame.state().get('selection').first().toJSON(); frame.im__input.image.src = attachment.url; frame.im__input.valueObject = { id: attachment.id, src: attachment.url }; var event = new Event('change'); frame.im__input.dispatchEvent(event); }); frame.on( 'open', function(){ if(frame.im__input.valueObject.id) { frame.state().get('selection').add(wp.media.attachment(frame.im__input.valueObject.id)); } }); frame.open(); }); break; case 'text': case 'number': case 'date': default: var input = document.createElement('input'); input.type = self.options[index].type; input.value = item.model[index]; input.style.width = 'calc(100% - 2px)'; input.addEventListener('input', function(){ self.model[item.i][this.index] = this.value; self.onChange(); }); break; } input.index = index; label.appendChild(input); item.block.appendChild(label); } var hr = document.createElement('div'); hr.style.width = '100%'; item.block.appendChild(hr); var up = document.createElement('button'); up.className = ['components-button','is-button','is-default'].join(' '); up.innerHTML = '<?=__('Up','react_app')?>'; up.item = item; up.addEventListener('click', function(){ self.moveItem('up', this.item.i); }); item.block.appendChild(up); var down = document.createElement('button'); down.className = ['components-button','is-button','is-default'].join(' '); down.innerHTML = '<?=__('Down','react_app')?>'; down.item = item; down.addEventListener('click', function(){ self.moveItem('down', this.item.i); }); item.block.appendChild(down); var remove = document.createElement('button'); remove.className = ['components-button','is-tertiary'].join(' '); remove.innerHTML = '<?=__('Remove','react_app')?>'; remove.item = item; remove.addEventListener('click', function(){ self.removeItem(this.item.i); }); item.block.appendChild(remove); }; this.init(); }; self.createEmptyItemModel = function() { var i = self.model.length, model = {}; for (var index in self.options) model[index] = ''; return {i: i, model: model}; }; self.addItem = function(i) { if (typeof i=='undefined') { var tmp = self.createEmptyItemModel(); self.model[tmp.i] = tmp.model; var i = tmp.i; } var item = new self.ItemConstructor(i); self.items.push(item); self.container.appendChild(item.block); self.onChange(); }; self.removeItem = function(i) { if (typeof i!='undefined') { if (typeof self.model[i]!='undefined') self.model.splice(i, 1); if (typeof self.items[i]!='undefined') { self.container.removeChild(self.items[i].block); self.items.splice(i, 1); self.reindex(); } } self.onChange(); }; self.reindex = function() { for (var i=0;i<self.items.length;i++) self.items[i].i = i; }; self.moveItem = function(order, i) { var new_i = i, model = self.model[i], item = self.items[i]; if (order=='up') { new_i--; } else if (order=='down') { new_i++; } if (new_i>=0&&new_i<self.model.length&&new_i<self.items.length) { self.items[i].i = new_i; self.items[i].block.style.order = new_i; self.items[new_i].i = i; self.items[new_i].block.style.order = i; self.model.splice(i, 1); self.model.splice(new_i, 0, model); self.items.splice(i, 1); self.items.splice(new_i, 0, item); } }; self.init = function() { for (var i=0;i<self.model.length;i++) { self.addItem(i); } }; self.init(); })(window.KamaArray['<?=$id?>']); </script> <?php }); return $var->title.$fn__field('<input '.$rg->attr.$var->class.' type="text" id="'.$rg->id.'" name="'.$var->name.'" value=\''.esc_attr($rg->val).'\'><div id="'.$rg->id.'__container" style="display:flex;flex-direction:column"></div>'.$fn__desc()); }Использование:
'gallery' => array( 'type'=>'array', 'title'=>__('Product gallery', 'react_app'), 'options'=>array( 'title' => array('type'=>'text', 'title'=>__('Title','react_app')), 'image' => array('type'=>'image', 'title'=>__('Image','react_app')), 'desc' => array('type'=>'textarea', 'title'=>__('Description','react_app')), ), ), 'video' => array( 'type'=>'array', 'title'=>__('Product videos', 'react_app'), 'options'=>array( 'title' => array('type'=>'text', 'title'=>__('Title','react_app')), 'url' => array('type'=>'text', 'title'=>__('Url','react_app')), 'width' => array('type'=>'number', 'title'=>__('Width','react_app')), 'height'=> array('type'=>'number', 'title'=>__('Height','react_app')), 'responsive' => array('type'=>'checkbox', 'title'=>__('Responsive size','react_app')), 'ratio' => array('type'=>'text', 'title'=>__('Ratio','react_app')), ), )По картам посмотрел, там у меня очень много зависимостей... Поэтому не получиться так с ходу, но если нужно, могу скинуть все JS методы работы. Пиши на почту.
Основные настройки для карт:
ключ googleMapsApi, начальная позиция центра карты, требуемые поля для адресного массива и т.д. и т.п. У меня это все очень сильно раскидано по проекту между классами, объектами и настройками.
Кроме того, я сейчас стараюсь полностью отказаться от использования jQuery. Я подозреваю, что спустя какое-то время, команда WP откажется от его использования. Поэтому я использую ванильный JS.
Не, не надо, если будет что-то цельное, то кидай, может пригодится.
Ну и спасибо за комменты
Еще вопрос, есть идеи, как можно прикрутить этот класс для таксономий?
Только не злись
class My__Kama_Tax_Meta_Box extends My__Kama_Post_Meta_Box { public function append_meta_fields_for_taxonomy($taxonomy_type) { $this->opt->taxonomy_type = ($taxonomy_type==null?null:(is_array($taxonomy_type)?$taxonomy_type:array($taxonomy_type))); $this->opt->theme = 'line'; remove_action('save_post', array($this,'meta_box_save')); add_action('edited_term', array($this,'meta_box_save')); if ($this->opt->taxonomy_type==null||array_search($_GET['taxonomy'], $this->opt->taxonomy_type)!==false) { $this->taxonomy_fields_init(); } } public function taxonomy_fields_init() { $the_tax = $_GET['taxonomy']; add_action( $the_tax.'_edit_form_fields', function() use ($key, $args) { ?> <tr class="form-field term-description-wrap"> <th scope="row"><label><?=$this->opt->title?></label></th> <td> <?=$this->meta_box((object) array('ID'=>(int)$_GET['tag_ID']))?> </td> </tr> <?php }); } public function meta_box_save($post_id, $post) { if (isset($_POST[$this->id.'_meta'])) { foreach ($_POST[$this->id.'_meta'] as $key => $value) { if (isset($_POST[$this->id.'_meta'][$key])) { update_term_meta($post_id, $key, $value); } } } } public function field($args, $post) { $var = (object) []; $rg = (object) array_merge( [ 'type' => '', 'title' => '', 'desc' => '', 'placeholder' => '', 'id' => '', 'class' => '', 'attr' => '', 'val' => '', 'options' => '', 'callback' => '', 'sanitize_func' => '', 'output_func' => '', 'update_func' => '', 'disable_func' => '', 'cap' => '', 'key' => '', 'title_patt' => '', 'field_patt' => '', 'desc_patt' => '', ], $args ); if( $rg->cap && ! current_user_can( $rg->cap ) ) return null; if( 'sep_' === substr($rg->key, 0, 4) ) $rg->type = 'sep'; if( ! $rg->type ) $rg->type = 'text'; $var->meta_key = $this->_key_prefix() . $rg->key; if( $rg->disable_func && is_callable($rg->disable_func) && call_user_func( $rg->disable_func, $post, $var->meta_key ) ) return null; $rg->val = get_term_meta( $post->ID, $var->meta_key, true ) ?: $rg->val; if( $rg->output_func && is_callable($rg->output_func) ) $rg->val = call_user_func( $rg->output_func, $post, $var->meta_key, $rg->val ); $var->name = $this->id . "_meta[$var->meta_key]"; $rg->id = $rg->id ?: ( $this->opt->id .'_'. $rg->key ); if( false !== strpos($rg->title_patt, '<td ') ) { $var->title = sprintf( $rg->title_patt, $rg->title ) . ($rg->title ? ' ' : ''); } else { $var->title = $rg->title ? sprintf( $rg->title_patt, $rg->title ) .' ' : ''; } $rg->options = (array) $rg->options; $var->pholder = $rg->placeholder ? ' placeholder="'. esc_attr($rg->placeholder) .'"' : ''; $var->class = $rg->class ? ' class="'. $rg->class .'"' : ''; $fn__desc = function() use ( $rg, $post, $var ){ if( ! $rg->desc ) return ''; $desc = is_callable( $rg->desc ) ? call_user_func_array($rg->desc, [ $post, $var->meta_key, $rg->val, $var->name ] ) : $rg->desc; return sprintf( $rg->desc_patt, $desc ); }; $fn__field = function( $field ) use ( $rg ){ return sprintf( $rg->field_patt, $field ); }; if (is_callable($rg->callback)) { $out = $var->title . $fn__field( call_user_func_array( $rg->callback, [ $args, $post, $var->name, $rg->val, $rg, $var ] ) ); } elseif (method_exists( $this, "field__$rg->type")) { $out = $this->{"field__$rg->type"}( $rg, $var, $post, $fn__desc, $fn__field ); } else { $out = $this->field__default( $rg, $var, $post, $fn__desc, $fn__field ); } return $out; } }Инициализация
От public function field
можно отказаться, если
Вынести в отдельный метод
тогда код будет компактнее.
Кроме того, использую зависимость от моего дочернего класса, что б иметь сразу и те типы метаполей, которых нет в твоей версии
Только в одном место можно поменять и достаточно? Там вообще можно параметр передать наверное для термов и из дочернего класса вызывать парент с параметром. Надо мне твои коды глянуть нормально, сча время толком нет ... Гляну, отпишусь...
Насчет выбора цвета... по идее html5 поддерживает input type="color" я указал этот тип и вывелось нормальное поле для выбора цвета. Все прекрасно сохранилось...
Для большего удобства разве что, могу предложить сделать такой метод:
public function field__color($rg, $var, $post, $fn__desc, $fn__field) { return $var->title.$fn__field('<input '.$rg->attr.$var->class.' type="color" id="'.$rg->id.'" name="'.$var->name.'" value=\''.esc_attr($rg->val).'\' style="width:100%;height:30px;padding:0">'.$fn__desc()); }Доброго! а если надо показать два метабокса, то метод вызывать два раза?
class_exists('Kama_Post_Meta_Box') && new Kama_Post_Meta_Box(...); class_exists('Kama_Post_Meta_Box') && new Kama_Post_Meta_Box(...);Да - один вызов - один метабокс
Хорошо бы ещё поддержку метабоксов для комментариев сделать...
Еще один тип полей был бы полезен - группа чекбоксов.
а как создать эти поля? у меня что-то не выходит
class_exists('Kama_Post_Meta_Box') && new Kama_Post_Meta_Box( array( 'id' => '_seo', 'title' => 'SEO поля', 'fields' => array( 'title' => array( 'type'=>'text', 'title'=>'Title', 'desc'=>'Заголовок страницы (рекомендуется 70 символов)', 'attr'=>'style="width:99%;"' ), 'description' => array( 'type'=>'textarea','title'=>'Description', 'desc'=>'Описание страницы (рекомендуется 160 символов)', 'attr'=>'style="width:99%;"' ), 'keywords' => array( 'type'=>'text', 'title'=>'Keywords', 'desc'=>'Ключевые слова для записи', 'attr'=>'style="width:99%;"' ), 'robots' => array( 'type'=>'radio', 'title'=>'Robots', 'options' => array(''=>'index,follow', 'noindex,nofollow'=>'noindex,nofollow') ), ), ) );Подключи код класса и добавь этот куда нить в
functions.php(обязательно после подключения класса).