Мы достигли финальной статьи серии. В последнем посте мы рассмотрели введение в валидацию, дезинфекцию и пару основных элементов ввода, которыми мы можем воспользоваться при создании страниц параметров.
В этой статье мы рассмотрим окончательный набор из трех вариантов и как подключить их к интерфейсу темы.
Прежде чем мы начнем: Как и в нескольких последних, в этой статье предполагается, что вы следовали вместе с остальной частью серии, установили рабочую копию примера кода и теперь относительно знакомы с API настроек и параметрами темы , Если вы не уверены в каком-либо из вышеперечисленных, я настоятельно рекомендую прочитать остальные статьи, прежде чем углубляться в этот пост.
Типы элементов, продолжение
флажок
Ранее в этой серии мы добавили флажки. Мы могли бы вернуться к ним и вернуться к ним, но давайте будем придерживаться того, что мы сделали до этого момента, и представим новые опции. Как только мы закончим, вы можете вернуться к коду, который мы добавили в начале серии, для просмотра.
Сначала давайте введем элемент checkbox в функцию sandbox_theme_initialize_input_examples :
|
1
2
3
4
5
6
7
|
add_settings_field(
‘Checkbox Element’,
‘Checkbox Element’,
‘sandbox_checkbox_element_callback’,
‘sandbox_theme_input_examples’,
‘input_examples_section’
);
|
Далее нам нужно пойти дальше и определить обратный вызов, который мы указали выше. Добавьте следующую функцию в ваш проект:
|
01
02
03
04
05
06
07
08
09
10
|
function sandbox_checkbox_element_callback() {
$options = get_option( ‘sandbox_theme_input_examples’ );
$html = ‘<input type=»checkbox» id=»checkbox_example» name=»sandbox_theme_input_examples[checkbox_example]» />’;
$html .= ‘<label for=»checkbox_example»>This is an example of a checkbox</label>’;
echo $html;
} // end sandbox_checkbox_element_callback
|
Мы вернемся к этой функции на мгновение, но сначала заметим, что я добавил элемент метки рядом с флажком. Чекбоксы часто имеют связанный с ними элемент, который также дает возможность щелкнуть, чтобы активировать этот чекбокс. Это облегчает пользователям переключение опций, не нажимая точно в флажке.
Чтобы связать метку с флажком, необходимо указать for атрибута метки значение атрибута ID флажка, с которым он связан. Достаточно просто, правда?
Теперь обновите страницу параметров, и вы должны увидеть новый элемент, видимый на странице параметров. Но на данный момент он не сохраняет и не извлекает значение. Во-первых, давайте введем атрибут value на флажок. Это несколько произвольно, но обычной практикой является присвоение проверяемому элементу значения «1». Давайте сделаем это сейчас:
|
1
|
$html = ‘<input type=»checkbox» id=»checkbox_example» name=»sandbox_theme_input_examples[checkbox_example]» value=»1″ />’;
|
Далее давайте подумаем, что именно должно произойти, когда мы сохраняем значение. Идеально:
- Пользователь проверяет элемент и сохраняет значение
- Страница обновляется и флажок установлен
- Пользователь проверяет элемент, чтобы отключить его и сохраняет значение
- Страница обновляется и флажок не установлен
Относительно ясно, верно? Вместо того, чтобы читать опцию, устанавливать условие и проверять наличие или отсутствие значения, мы можем воспользоваться checked функцией WordPress.
Функция принимает три аргумента, только первый из которых является обязательным:
- Первое значение является одним из значений для сравнения
- Второе значение для сравнения, если первое значение не соответствует действительности
- Должен ли эхо
check="checked"браузеру
Итак, давайте обновим наш код, чтобы использовать эту функцию:
|
1
|
$html = ‘<input type=»checkbox» id=»checkbox_example» name=»sandbox_theme_input_examples[checkbox_example]» value=»1″‘ .
|
Обновите страницу и выберите опцию, сохраните и повторите.
Если что-то из этого выглядит немного запутанным, просмотрите предыдущую статью, в которой мы рассмотрим значения каждого атрибута в элементе option.
Наконец, давайте обновим внешний интерфейс темы, чтобы проверить эту опцию и отобразить строку текста, основываясь на том, была ли опция отмечена. Напомним, что когда мы создали элемент, мы присвоили ему значение « 1 ». Это означает, что когда флажок установлен и сериализован, он будет иметь значение, равное единице. Проще говоря, нам нужно написать условие, которое проверяет значение параметра и затем соответствующим образом отображает текст. В index.php добавьте этот блок кода:
|
1
2
3
4
5
|
<?php if( $input_examples[‘checkbox_example’] == ‘1’ ) { ?>
<p>The checkbox has been checked.</p>
<?php } else { ?>
<p>The checkbox has not been checked.</p>
<?php } // end if ?>
|
Теперь вернитесь на страницу настроек, установите флажок и обновите страницу.
Как уже упоминалось в начале этого раздела, оглянемся на «Параметры отображения», которые мы представили ранее в этой серии, и посмотрим, станет ли намного понятнее теперь, когда мы рассмотрели, как вводить элементы управления и управлять ими.
Радио-кнопки
Радиокнопки — это элементы, которые полезны в группах — в конце концов, вы никогда не собираетесь использовать одну радиокнопку. Особенность радиоэлементов заключается в том, что они позволяют пользователям выбирать один из взаимоисключающих наборов параметров.
По той или иной причине переключатели часто становятся проблемой для разработчиков WordPress. Надеемся, мы сделаем это как можно проще для наших проектов. Как и в остальных примерах этой серии, подробно опишите, что мы собираемся сделать:
- Мы хотим представить два варианта, из которых пользователь должен выбрать. Мы будем давать им очень общие ярлыки.
- Первым вариантом будет радиоэлемент с меткой «Вариант один» и будет иметь значение «1».
- Второй вариант будет радиоэлементом с меткой «Вариант второй» и будет иметь значение «2».
Кажется достаточно ясным — давайте продолжим и добавим элемент field на нашу страницу параметров:
|
1
2
3
4
5
6
7
|
add_settings_field(
‘Radio Button Elements’,
‘Radio Button Elements’,
‘sandbox_radio_element_callback’,
‘sandbox_theme_input_examples’,
‘input_examples_section’
);
|
И давайте реализуем обратный вызов радиоэлемента. Сначала мы укажем код, затем рассмотрим его:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
function sandbox_radio_element_callback() {
$options = get_option( ‘sandbox_theme_input_examples’ );
$html = ‘<input type=»radio» id=»radio_example_one» name=»sandbox_theme_input_examples[radio_example]» value=»1″‘ .
$html .= ‘<label for=»radio_example_one»>Option One</label>’;
$html .= ‘<input type=»radio» id=»radio_example_two» name=»sandbox_theme_input_examples[radio_example]» value=»2″‘ .
$html .= ‘<label for=»radio_example_two»>Option Two</label>’;
echo $html;
} // end sandbox_radio_element_callback
|
Первое, на что нужно обратить внимание при работе с переключателями, это то, что они не следуют типичным примерам установки атрибутов ID и name . Обратите внимание, что атрибут ID уникален и не имеет отношения к остальным атрибутам элемента. Также обратите внимание, что связанная метка каждого элемента использует ID for атрибута for . Это привязывает ярлык к переключателю, чтобы пользователи могли щелкнуть ярлык, чтобы выбрать радиоэлемент.
Далее обратите внимание, что атрибуты имени одинаковы для каждого радиоэлемента, но values разные. Это то, что делает радио-кнопки взаимоисключающими — каждый радио-элемент должен иметь одинаковое name но значения должны быть уникальными.
Наконец, мы можем установить условие на домашней странице, проверив значение элемента. В файл functions.php вашей темы добавьте следующий блок кода:
|
1
2
3
4
5
|
<?php if( $input_examples[‘radio_example’] == 1 ) { ?>
<p>The first option was selected.</p>
<?php } elseif( $input_examples[‘radio_example’] == 2 ) { ?>
<p>The second option was selected.</p>
<?php } // end if ?>
|
Загрузите домашнюю страницу своей темы, переключите параметры и обновите. Вы должны увидеть, как два предложения меняются в зависимости от значения элементов option.
Выберите окно
Последний элемент, который мы собираемся рассмотреть, это элемент select. Этот элемент предоставляет пользователям выпадающее меню опций, из которых можно выбирать. Давайте точно спланируем, что нам нужно ввести для этого элемента:
- Определите выбранный элемент. В нашем примере мы будем рассматривать его как три варианта времени.
- Мы дадим варианты «Никогда», «Иногда» и «Всегда».
- Мы заполним опцию по умолчанию, которая будет установлена при загрузке страницы.
На данный момент в серии, это должно быть довольно обычным делом. Давайте начнем — сначала мы введем поле настроек:
|
1
2
3
4
5
6
7
|
add_settings_field(
‘Select Element’,
‘Select Element’,
‘sandbox_select_element_callback’,
‘sandbox_theme_input_examples’,
‘input_examples_section’
);
|
Далее мы определим функцию обратного вызова. Просмотрите код, а затем мы обсудим его после примера:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
function sandbox_select_element_callback() {
$options = get_option( ‘sandbox_theme_input_examples’ );
$html = ‘<select id=»time_options» name=»sandbox_theme_input_examples[time_options]»>’;
$html .= ‘<option value=»default»>Select a time option…</option>’;
$html .= ‘<option value=»never»‘ .
$html .= ‘<option value=»sometimes»‘ .
$html .= ‘<option value=»always»‘ .
$html .= ‘</select>’;
echo $html;
} // end sandbox_radio_element_callback
|
Сначала обновите страницу параметров, чтобы убедиться, что выбранный элемент отображается. Предполагая, что это так, давайте рассмотрим код выше.
При определении элемента select мы присвоили ему атрибут ID атрибут name же как и остальные элементы, которые мы продемонстрировали. Далее, каждая опция имеет уникальное значение и текст, который соответствует значению. Хотя вам не нужно этого делать, я обычно нахожу это полезным при работе над своими проектами. Наконец, мы воспользовались selected помощником, который предлагает WordPress. Это очень похоже на checked функцию, которую мы использовали в предыдущем примере, за исключением того, что она предназначена для выбора параметров.
Последним шагом будет обновление внешнего интерфейса темы, чтобы он проверял значение элемента select после его сохранения. Добавьте следующий блок кода в ваш index.php :
|
1
2
3
4
5
6
7
|
<?php if( $input_examples[‘time_options’] == ‘never’ ) { ?>
<p>Never display this.
<?php } elseif( $input_examples[‘time_options’] == ‘sometimes’ ) { ?>
<p>Sometimes display this.</p>
<?php } elseif( $input_examples[‘time_options’] == ‘always’ ) { ?>
<p>Always display this.</p>
<?php } // end if/else ?>
|
Зайдите на главную страницу своей темы, измените параметры, а затем обновите страницу — вы должны заметить, что текстовое обновление основано на выбранном вами параметре.
Вывод
С этим мы наконец дошли до конца этой серии . API настроек — это мощная функция WordPress, которая дает нам возможность реализовать хорошо разработанные, безопасные страницы опций, но для этого требуется, чтобы мы использовали их правильно. К сожалению, это, наверное, одна из самых игнорируемых функций платформы многими разработчиками.
В конечном счете, моя цель состояла в том, чтобы помочь разработчикам пройти через API с самого начала, чтобы понять, почему это важно, для настроек, от страниц меню, для навигации по вкладкам и как работать с каждым из типов элементов.
Наконец, помните, что вы можете найти пример кода на GitHub . Продолжая работать с API настроек или находя непонятную функцию, внесите свой вклад. Я хотел бы, чтобы эта серия и пример кода продолжали служить источником образования для сообщества WordPress.