Статьи

Руководство для начинающих по Titan Framework: добавление опции Multicheck Type

Флажок, радио и опции выбора типа позволяют пользователям сделать один выбор из набора предопределенных вариантов. Как насчет того, когда вам нужно предоставить конечному пользователю возможность сделать более одного выбора?

Это именно то, что multicheck опция multicheck type в Titan Framework. Сегодня я собираюсь показать, как вы можете добавить опцию с несколькими проверками через Titan Framework в пользовательской панели администратора, в мета-окне или в настройщике темы.

multicheck в Titan Framework позволяет создавать несколько флажков, которые можно включить или отключить одновременно. Вот как это выглядит:

Добавление опций типа Multicheck в Titan

Параметры настройки, которые поддерживает эта опция:

  • name : этот параметр назначает отображаемое имя multicheck типа multicheck .
  • id : это уникальное имя, которое возвращает сохраненные значения параметров.
  • desc : добавлено краткое описание с названием опции.
  • по умолчанию : (Необязательно) Этот параметр имеет массив значений, которые включены по умолчанию.
  • options : (Необязательно) Это ассоциативный массив, содержащий пару параметров метка-значение, которые отображаются в виде флажков.

Последние два параметра, default и options , являются array , а остальные — string по типу.

Контейнеры, в которые вы можете добавить эту опцию:

  • Панель администратора
  • Вкладки администратора
  • Metabox
  • Раздел настройки темы

multicheck типа нескольких multicheck добавляется в следующем общем формате:

  • Получить экземпляр с помощью функции getInstance() .
  • Создайте параметр с помощью функции createOption() .
  • Получить сохраненные значения с помощью функции getOption() .

Хотите узнать, как эти контейнеры создаются с помощью Titan Framework? Прочитайте предыдущие статьи этой серии.

Давайте сначала создадим эту опцию внутри админ-панели.

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 в Titan

На приведенном выше 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).

Если вы предварительно просматриваете интерфейс, он выглядит так:

Добавление опций типа Multicheck в Titan

Настройки по умолчанию были напечатаны абсолютно правильно. Вы получите представление о том, что вы можете сделать с помощью этой опции.

Давайте добавим несколько строк кода, которые выводят выходные данные, если настройки изменяются динамически. Я заменил строку № 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 . Три различных проверки выполняются здесь для вывода.

  • Если внутри массива $aa_multicheck_opt_val aa_hdr_logo существует $aa_multicheck_opt_val , печать ‘ Показать логотип заголовка была включена.
  • В противном случае печать « Показать логотип заголовка не была включена».
  • Если метка aa_hdr_bg_img существует внутри массива $aa_multicheck_opt_val , выведите « Allow Header Color Overlay».
  • В противном случае печать « Разрешить наложение цвета заголовка не была включена».
  • Если внутри массива $aa_multicheck_opt_val aa_hdr_clr_overlay существует $aa_multicheck_opt_val , выведите « Показать фоновое изображение заголовка».
  • В противном случае печать « Показать фоновое изображение заголовка не была включена».

Давайте сначала перейдем к настройкам по умолчанию, т.е. первые два флажка включены.

Добавление опций типа Multicheck в Titan

Внешний интерфейс должен печатать следующие строки следующим образом:

Добавление опций типа Multicheck в Titan

Далее я добавлю эту опцию на вкладке администратора.

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 в Titan

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 в Titan

Теперь я создам 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 в Titan

На изображении выше есть экран редактирования страницы, и в самом конце вы можете 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 в Titan

Наконец, я собираюсь добавить эту опцию в раздел настройщика темы.

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 .

Добавление опций типа Multicheck в Titan

На изображении есть раздел настройщика с именем 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 в Titan

Так вот и все. Вы можете интегрировать multicheck type в ваш проект веб-разработки, чтобы позволить пользователям включать несколько функций темы в несколько кликов.

Помните, я привел вам пример из учебника по опциям типа флажка, который позволяет конечному пользователю включать / отключать любую часть файла single.php. Тот же самый пример может быть применен здесь, с небольшим количеством контекста. Так что, если вы предоставляете пользовательские параметры, относящиеся к определенной области, например, к заголовку, то вам следует использовать несколько проверок, чтобы избежать дополнительных параметров.

Есть некоторые другие типы опций, которые можно назвать производными этого типа. Я буду обсуждать их в моих следующих статьях. Затем попробуйте этот урок и дайте мне знать ваше мнение об этом в комментариях или в Twitter .