Флажок, радио и опции выбора типа позволяют пользователям сделать один выбор из набора предопределенных вариантов. Как насчет того, когда вам нужно предоставить конечному пользователю возможность сделать более одного выбора?
Это именно то, что multicheck
опция multicheck
type в Titan Framework. Сегодня я собираюсь показать, как вы можете добавить опцию с несколькими проверками через Titan Framework в пользовательской панели администратора, в мета-окне или в настройщике темы.
Опция Multicheck Type в Titan Framework
multicheck
в Titan Framework позволяет создавать несколько флажков, которые можно включить или отключить одновременно. Вот как это выглядит:
Параметры настройки, которые поддерживает эта опция:
- name : этот параметр назначает отображаемое имя
multicheck
типаmulticheck
. - id : это уникальное имя, которое возвращает сохраненные значения параметров.
- desc : добавлено краткое описание с названием опции.
- по умолчанию : (Необязательно) Этот параметр имеет массив значений, которые включены по умолчанию.
- options : (Необязательно) Это ассоциативный массив, содержащий пару параметров метка-значение, которые отображаются в виде флажков.
Последние два параметра, default и options , являются array
, а остальные — string
по типу.
Доступные контейнеры для опции Multicheck Type
Контейнеры, в которые вы можете добавить эту опцию:
- Панель администратора
- Вкладки администратора
- Metabox
- Раздел настройки темы
multicheck
типа нескольких multicheck
добавляется в следующем общем формате:
- Получить экземпляр с помощью функции
getInstance()
. - Создайте параметр с помощью функции
createOption()
. - Получить сохраненные значения с помощью функции
getOption()
.
Хотите узнать, как эти контейнеры создаются с помощью Titan Framework? Прочитайте предыдущие статьи этой серии.
Создание параметра типа Multicheck внутри панели администратора
Пример объявления
Давайте сначала создадим эту опцию внутри админ-панели.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<?php
/**
*
* Create multicheck type option in an Admin Panel
*
*/
$aa_panel->createOption( array(
‘id’ => ‘aa_multicheck_opt’, // The ID which will be used to get the value of this option
‘type’ => ‘multicheck’, // Type of option we are creating
‘name’ => ‘My Multicheck Option’, // Name of the option which will be displayed in the admin panel
‘desc’ => ‘This is our option’, // Description of the option which will be displayed in the admin panel
‘options’ => array( // Associative array of value-label pairs containing options
‘aa_hdr_logo’ => ‘Show Header Logo’,
‘aa_hdr_bg_img’ => ‘Show Header Background Image’,
‘aa_hdr_clr_overlay’ => ‘Allow Header Color Overlay’
),
‘default’ => array( ‘aa_hdr_logo’, ‘aa_hdr_bg_img’ )
) );
|
Я использовал createOption()
в строке # 8, чтобы добавить multicheck
типа multicheck
в пользовательскую панель администратора $aa_panel
. Есть список параметров, которые я упомянул, например, name, id, type, options, desc и default . Идентификатор моей опции aa_multicheck_opt
; убедитесь, что каждый добавляемый вами идентификатор уникален.
Параметр ‘ options’ в строке # 14 занимает ассоциативный массив. Он содержит пары меток значений . Каждая пара указывает отдельную опцию, которая отображается в виде флажка. Итак, я определил три пары меток значений, что означает три варианта .
Ярлык каждого варианта уникален. Поэтому метки aa_hdr_logo
, aa_hdr_bg_img
и aa_hdr_clr_overlay
создают параметры с именами « Показать логотип заголовка », « Показать фоновое изображение заголовка » и « Разрешить наложение цвета заголовка » соответственно.
На приведенном выше multicheck
экрана показана административная панель Neat Options, которая содержит параметр multicheck
именем My Multicheck Option . Обратите внимание, что первые две опции включены из-за настроек по умолчанию (которые я установил в строке № 16).
Пример использования
Давайте получим сохраненные значения параметров.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( ‘neat’ );
// 2. Get the value via ID using getOption function
$aa_multicheck_opt_val = $titan->getOption( ‘aa_multicheck_opt’ );
/**
*
* Printing saved values for an Admin Panel
*
*/
var_dump($aa_multicheck_opt_val);
|
В строке № 3 я добавил уникальный экземпляр с помощью функции getInstance()
. Рекомендуется использовать имя вашей темы в качестве параметра здесь. Затем в строке № 6 я использовал getOption()
которая извлекает сохраненные значения, регистрируя идентификатор опции aa_multicheck_opt
в качестве параметра. После этого я сохранил его результат в переменной $aa_multicheck_opt_val
. До этого момента настройки пользовательского ввода сохраняются в этой переменной.
Теперь мы распечатаем сохраненные результаты в интерфейсе. Поскольку эта опция занимает ассоциативный массив, я буду использовать самый простой метод для печати содержимого массива, то есть команду var_dump()
(строка # 15).
Если вы предварительно просматриваете интерфейс, он выглядит так:
Настройки по умолчанию были напечатаны абсолютно правильно. Вы получите представление о том, что вы можете сделать с помощью этой опции.
Давайте добавим несколько строк кода, которые выводят выходные данные, если настройки изменяются динамически. Я заменил строку № 15 кода выше на эти строки.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<?php
if ( in_array( ‘aa_hdr_logo’, $aa_multicheck_opt_val ) ) {
echo «Show Header Logo was enabled.</br>»;
} else {
echo «Show Header Logo was not enabled.</br>»;
}
if ( in_array( ‘aa_hdr_bg_img’, $aa_multicheck_opt_val ) ) {
echo «Show Header Background Image was enabled.</br>»;
} else {
echo «Show Header Background Image was not enabled.</br>»;
}
if ( in_array( ‘aa_hdr_clr_overlay’, $aa_multicheck_opt_val ) ) {
echo «Allow Header Color Overlay was enabled.</br>»;
} else {
echo «Allow Header Color Overlay was not enabled.</br>»;
}
?>
|
Здесь я использую функцию in_array()
внутри операторов проверки if-else
. Три различных проверки выполняются здесь для вывода.
Строки 2-6:
- Если внутри массива
$aa_multicheck_opt_val
aa_hdr_logo
существует$aa_multicheck_opt_val
, печать ‘ Показать логотип заголовка была включена. ‘ - В противном случае печать « Показать логотип заголовка не была включена». ‘
Строки с 7 по 11:
- Если метка
aa_hdr_bg_img
существует внутри массива$aa_multicheck_opt_val
, выведите « Allow Header Color Overlay». ‘ - В противном случае печать « Разрешить наложение цвета заголовка не была включена». ‘
Строки с 13 по 17:
- Если внутри массива
$aa_multicheck_opt_val
aa_hdr_clr_overlay
существует$aa_multicheck_opt_val
, выведите « Показать фоновое изображение заголовка». ‘ - В противном случае печать « Показать фоновое изображение заголовка не была включена». ‘
Отображение результата во внешнем интерфейсе
Давайте сначала перейдем к настройкам по умолчанию, т.е. первые два флажка включены.
Внешний интерфейс должен печатать следующие строки следующим образом:
Создание параметра типа Multicheck на вкладке администратора
Пример объявления
Далее я добавлю эту опцию на вкладке администратора.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<?php
/**
*
* Create multicheck type option in an Admin Tab
*
*/
$aa_tab1->createOption( array(
‘id’ => ‘aa_multicheck_opt_in_tab’, // The ID which will be used to get the value of this option
‘type’ => ‘multicheck’, // Type of option we are creating
‘name’ => ‘My Multicheck Option’, // Name of the option which will be displayed in the admin panel
‘desc’ => ‘This is our option’, // Description of the option which will be displayed in the admin panel
‘options’ => array( // Associative array of value-label pairs containing options
‘aa_hdr_logo’ => ‘Show Header Logo’,
‘aa_hdr_bg_img’ => ‘Show Header Background Image’,
‘aa_hdr_clr_overlay’ => ‘Allow Header Color Overlay’
),
‘default’ => array( ‘aa_hdr_logo’, ‘aa_hdr_bg_img’ )
) );
|
Здесь я добавил ту же multicheck
типа multicheck
внутри вкладки администратора $aa_tab1
. Уникальный идентификатор опции — aa_multicheck_opt_in_tab
. Остальные настройки параметров одинаковы.
multicheck
существует во вкладке 1 административной панели Neat Options 2 .
Пример использования
Теперь я получу сохраненные значения на вкладке администратора.
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
|
<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( ‘neat’ );
// 2. Get the value via ID using getOption function
$aa_multicheck_opt_in_tab_val = $titan->getOption( ‘aa_multicheck_opt_in_tab’ );
/**
*
* Printing saved values for an Admin Tab
*
*/
if ( in_array( ‘aa_hdr_logo’ , $aa_multicheck_opt_in_tab_val ) ) {
echo «Show Header Logo was enabled.</br>»;
} else {
echo «Show Header Logo was not enabled.</br>»;
}
if ( in_array( ‘aa_hdr_bg_img’ , $aa_multicheck_opt_in_tab_val ) ) {
echo «Show Header Background Image was enabled.</br>»;
} else {
echo «Show Header Background Image was not enabled.</br>»;
}
if ( in_array( ‘aa_hdr_clr_overlay’ , $aa_multicheck_opt_in_tab_val ) ) {
echo «Allow Header Color Overlay was enabled.</br>»;
} else {
echo «Allow Header Color Overlay was not enabled.</br>»;
}
|
Этот код очень похож на то, что я написал в случае админ-панели. Вы можете попробовать это самостоятельно. Позвольте мне суммировать шаги:
- Прежде всего, получите экземпляр в строке # 3 через функцию
getInstance()
. - Затем используйте
getOption()
чтобы получить сохраненные значения в строке № 6. - Зарегистрируйте идентификатор опции и сохраните результаты в переменной
$aa_multicheck_opt_in_tab_val
. - Наконец, используйте эту переменную внутри функции
in_array()
(строки с 15 по 30), чтобы вывести желаемые результаты.
Отображение результата во внешнем интерфейсе
Давайте включим все флажки в качестве моих настроек демо. Внешний вид выглядит так:
Создание опции типа Multicheck внутри Metabox
Пример объявления
Теперь я создам multicheck
типа multicheck
в метабоксе.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<?php
/**
*
* Create multicheck type option in a Metabox
*
*/
$aa_metbox->createOption( array(
‘id’ => ‘aa_multicheck_opt_in_metabox’, // The ID which will be used to get the value of this option
‘type’ => ‘multicheck’, // Type of option we are creating
‘name’ => ‘My Multicheck Option’, // Name of the option which will be displayed
‘desc’ => ‘This is our option’, // Description of the option which will be displayed
‘options’ => array( // Associative array of value-label pairs containing options
‘aa_hdr_logo’ => ‘Show Header Logo’,
‘aa_hdr_bg_img’ => ‘Show Header Background Image’,
‘aa_hdr_clr_overlay’ => ‘Allow Header Color Overlay’
),
‘default’ => array( ‘aa_hdr_logo’, ‘aa_hdr_bg_img’ )
) );
|
Я добавил эту опцию с уникальным идентификатором aa_multicheck_opt_in_metabox
внутри метабокса $aa_metbox
.
На изображении выше есть экран редактирования страницы, и в самом конце вы можете multicheck
опцию multicheck
названием My Multicheck Option в метабоксе.
Пример использования
Используйте следующий код, чтобы получить сохраненные значения.
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
|
<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( ‘neat’ );
// 2. Get the value via ID using getOption function
$aa_multicheck_opt_in_metabox_val = $titan->getOption( ‘aa_multicheck_opt_in_metabox’, get_the_ID() );
/**
*
* Printing saved values for a Metabox
*
*/
if ( in_array( ‘aa_hdr_logo’, $aa_multicheck_opt_in_metabox_val ) ) {
echo «Show Header Logo was enabled.</br>»;
} else {
echo «Show Header Logo was not enabled.</br>»;
}
if ( in_array( ‘aa_hdr_bg_img’, $aa_multicheck_opt_in_metabox_val ) ) {
echo «Show Header Background Image was enabled.</br>»;
} else {
echo «Show Header Background Image was not enabled.</br>»;
}
if ( in_array( ‘aa_hdr_clr_overlay’, $aa_multicheck_opt_in_metabox_val ) ) {
echo «Allow Header Color Overlay was enabled.</br>»;
} else {
echo «Allow Header Color Overlay was not enabled.</br>»;
}
?>
|
Код снова использует функции для получения экземпляра и сохраненных значений. Но в строке № 6 есть дополнительный параметр, get_the_ID()
, которая получает значения из идентификатора любой страницы или записи. В конце я использовал те же самые операторы проверки if-else
.
Отображение результата во внешнем интерфейсе
На этот раз давайте включим первый и последний вариант. Вот скриншот внешнего интерфейса.
Создание опции типа Multicheck внутри секции настройщика тем
Пример объявления
Наконец, я собираюсь добавить эту опцию в раздел настройщика темы.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<?php
/**
*
* Create multicheck type option in a Theme Customizer Section
*
*/
$aa_section1->createOption( array(
‘id’ => ‘aa_multicheck_opt_in_sec’, // The ID which will be used to get the value of this option
‘type’ => ‘multicheck’, // Type of option we are creating
‘name’ => ‘My Multicheck Option’, // Name of the option which will be displayed
‘desc’ => ‘This is our option’, // Description of the option which will be displayed
‘options’ => array( // Associative array of value-label pairs containing options
‘aa_hdr_logo’ => ‘Show Header Logo’,
‘aa_hdr_bg_img’ => ‘Show Header Background Image’,
‘aa_hdr_clr_overlay’ => ‘Allow Header Color Overlay’
),
‘default’ => array( ‘aa_hdr_logo’, ‘aa_hdr_bg_img’ )
) );
|
Я добавил multicheck
типа multicheck
в раздел настройщика темы $aa_section1
. Его идентификатор — aa_multicheck_opt_in_sec
.
На изображении есть раздел настройщика с именем My Section , в котором есть список опций флажка.
Пример использования
Используйте этот код, чтобы получить значения из раздела настройщика.
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
|
<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( ‘neat’ );
// 2. Get the value via ID using getOption function
$aa_multicheck_opt_in_sec_val = $titan->getOption( ‘aa_multicheck_opt_in_sec’ );
/**
*
* Printing saved values for a Customizer Section
*
*/
if ( in_array( ‘aa_hdr_logo’ , $aa_multicheck_opt_in_sec_val ) ) {
echo «Show Header Logo was enabled.</br>»;
} else {
echo «Show Header Logo was not enabled.</br>»;
}
if ( in_array( ‘aa_hdr_bg_img’ , $aa_multicheck_opt_in_sec_val ) ) {
echo «Show Header Background Image was enabled.</br>»;
} else {
echo «Show Header Background Image was not enabled.</br>»;
}
if ( in_array( ‘aa_hdr_clr_overlay’ , $aa_multicheck_opt_in_sec_val ) ) {
echo «Allow Header Color Overlay was enabled.</br>»;
} else {
echo «Allow Header Color Overlay was not enabled.</br>»;
}
?>
|
Этот код снова очень похож на то, что я использовал для других типов контейнеров. Только ID и имена переменных различны.
Отображение результата во внешнем интерфейсе
Я включил только первый вариант. Изменения можно наблюдать в режиме предварительного просмотра:
Вывод
Так вот и все. Вы можете интегрировать multicheck
type в ваш проект веб-разработки, чтобы позволить пользователям включать несколько функций темы в несколько кликов.
Помните, я привел вам пример из учебника по опциям типа флажка, который позволяет конечному пользователю включать / отключать любую часть файла single.php. Тот же самый пример может быть применен здесь, с небольшим количеством контекста. Так что, если вы предоставляете пользовательские параметры, относящиеся к определенной области, например, к заголовку, то вам следует использовать несколько проверок, чтобы избежать дополнительных параметров.
Есть некоторые другие типы опций, которые можно назвать производными этого типа. Я буду обсуждать их в моих следующих статьях. Затем попробуйте этот урок и дайте мне знать ваше мнение об этом в комментариях или в Twitter .