Зміст циклу статей «Повне керівництво по налаштуванню WordPress API»:
Отже, настав час для заключної статті даного циклу. У попередній статті ми познайомилися з валідацією, очищенням і базовими елементами введення, які ми можемо використовувати при створенні наших сторінок опцій.
У даній статті ми дізнаємося про трьох елементах введення і про те, як вивести їх в нашій темі.
Примітка: стаття припускає, що ви вже знайомі з Settings API і опціями теми. Рекомендується спочатку ознайомитись з попередніми статтями циклу.
Типи елементів, продовження
Чекбокс (Checkbox)
У попередніх статтях ми вже додавали чекбокси. Ми можемо до них повернутися і змінити.
Спочатку, давайте створимо чекбокс для функції sandbox_theme_initialize_input_examples:
add_settings_field(
‘Checkbox Element’,
‘Checkbox Element’,
‘sandbox_checkbox_element_callback’,
‘sandbox_theme_input_examples’,
‘input_examples_section’
);
Потім, додайте наступну функцію в свій проект:
function sandbox_checkbox_element_callback() {
$options = get_option( ‘sandbox_theme_input_examples’ );
$html = «;
$html .= ‘Це приклад чекбокса’;
echo $html;
} // Кінець функції sandbox_checkbox_element_callback
У даному уривку коду ми додали тег , щоб можна було для перемикання чекбокса клікати на весь елемент з міткою, а не прицілюватися курсором на квадратик з прапорцем.
Щоб створити мітку з чекбоксів, потрібно передати в тег атрибут id значення ідентифікатора чекбокса, до якого прив’язана мітка.
Тепер, поновіть вашу сторінку опцій і побачите там новий елемент. Але поки неможливо зберегти його або прочитати з бази даних. Створимо атрибут value для чекбокса. Задавши для нього значення 1, ми встановимо прапор чекбокса:
$html = «;
Далі, подумаємо, як відбувається збереження значень:
- Користувач встановлює прапор і зберігає задане значення;
- Після оновлення сторінки, збережене значення прапора має залишитися;
- Користувач знімає прапор і зберігає задане значення;
- Після оновлення сторінки, збережене значення прапора має залишитися.
Все відносно просто, вірно? Скористаємося перевагами функції WordPress checked для читання, перевірки і встановлення значень. Дана функція приймає три аргументи, але обов’язковим є тільки перший:
Давайте відновимо наш код, додавши цю функцію:
$html = «;
Поновіть сторінку, перевірте і встановіть/зніміть прапор, збережіть і повторіть.
Якщо щось вам не зрозуміло, зверніться до попередніх статей, де ми розглянули значення кожного атрибута.
Нарешті, давайте поновимо сторінку нашої теми, щоб виконати перевірку цієї опції і вивести рядок тексту, засновану на стані чекбокса. Згадайте, коли ми створювали елемент, то атрибуту value присвоїли значення «1».
Це означає, що коли прапор чекбокс встановлений та збережено, збереженим значенням буде одиниця. Нам потрібно написати умовну конструкцію, яка буде перевіряти значення опції, і виводити відповідний текст. В файл index.phpдодайте наступний блок коду:
Прапор чекбокса встановлений .
Прапор чекбоксу не встановлено.
Тепер поверніться на сторінку налаштувань, і спробуйте переключити чекбокс, зберегти значення та оновити сторінку.
Як було відмічено вище, варто повернутися до сторінки «Опції відображення», яку ми створювали раніше в даній серії статей, і поглянути там на реалізацію елементів вводу, тому як на даному етапі все буде набагато більш зрозуміло.
Радіокнопки (Radio Buttons)
Радіокнопки це елементи, які зазвичай об’єднуються в групи. Радіокнопки надають користувачам можливість вибрати один з взаємовиключних варіантів.
З якоїсь причини, створення радіокнопок часто викликає труднощі у розробників, що працюють з WordPress. Сподіваюся, що зможу пояснити настільки просто, наскільки це можливо, як створити радіокнопки в нашому проекті. Визначимо план наших подальших дій:
- Спочатку створимо дві опції, з яких користувач може вибрати одну. Ми дамо їм мітки;
- Перша опція буде радиоэлементом, з міткою «Опція 1» і буде мати значення 1;
- Друга опція буде радиоэлементом, з міткою «Опція 2» і буде мати значення 2.
Виглядає дуже просто. Давайте додамо поле до нашої сторінці опцій:
add_settings_field(
‘Елемент радіокнопка’,
‘Елемент радіокнопка’,
‘sandbox_radio_element_callback’,
‘sandbox_theme_input_examples’,
‘input_examples_section’
);
Також, реалізуємо callbackфункцію для цього радиоэлемента. Спочатку напишемо код, а потім його розберемо:
function sandbox_radio_element_callback() {
$options = get_option( ‘sandbox_theme_input_examples’ );
$html = «;
$html .= ‘Опція 1’;
$html .= «;
$html .= ‘Опція 2’;
echo $html;
} // Кінець функції sandbox_radio_element_callback
Перше, що кидається в очі при роботі з радіокнопками це те, що вони ведуть себе не так, як інші елементи при завданні атрибутів id і name. Зауважимо, що атрибут id унікальний і не має співпадати з іншими значеннями елемента.
Також, кожна мітка для елемента вводу використовує атрибут id для визначення приналежності. Це прив’язує мітку до радиокнопке, тому користувачі можуть клікати по мітці для зміни стану елемента.
Атрибут name однаковий для кожної радіокнопки, однак значення атрибута value відрізняються. Все це робить радіокнопки особливими – кожен радиоэлемент вимагає, щоб значення атрибута name було однаково, а атрибута value — унікально.
Нарешті, ми можемо приступити до написання умовної конструкції, для сторінки нашої теми, яка б встановлювала значення елемента. В файл functions.php вашої теми, додайте наступний блок коду:
Була обрана перша опція.
Була вибрана друга опція.
Погляньте на сторінку вашої теми, спробуйте переключити опції та оновити сторінку.
Випадаючий список (Select Box)
Останнім елементом, який ми розглянемо, буде елемент списку. Цей елемент надає користувачам випадаючий список з варіантами вибору. Давайте складемо план нашої роботи з даним елементом:
- Визначимо елемент. В нашому прикладі три значення;
- Значеннями будуть «Ніколи», «Іноді» і «Завжди»;
- Встановимо опцію за промовчанням, яка буде показуватися при завантаженні сторінки.
А далі, почнемо типові рутинні дії, які нам вже дуже добре знайомі. Визначимо поле:
add_settings_field(
‘Елемент списку’,
‘Елемент списку’,
‘sandbox_select_element_callback’,
‘sandbox_theme_input_examples’,
‘input_examples_section’
);
Визначимо callback-функції. Ознайомтеся з кодом, а потім ми обговоримо приклад:
function sandbox_select_element_callback() {
$options = get_option( ‘sandbox_theme_input_examples’ );
$html = «;
$html .= ‘Виберіть варіант…’;
$html .= ‘Ніколи’;
$html .= ‘Іноді’;
$html .= ‘Завжди’;
$html .= «;
echo $html;
} // Кінець функції sandbox_radio_element_callback
Оновіть сторінку опцій і переконайтеся, що вибране значення зберігається. Швидше за все, все працює, тому давайте розберемо код, наведений вище.
При створенні випадаючого списку, ми передаємо атрибутиid і name так само, як ми робили це в попередніх прикладах. Далі, кожної опції присвоюється унікальне значення атрибута value і текстової мітки. Хоча цього робити не обов’язково, я вважаю корисним робити це в своїх проектах.
Нарешті, ми будемо використовувати функцію selected, яку надає WordPress. Вона дуже схожа на функцію checked , яку ми використовували в попередніх прикладах, за винятком того, що вона заточена під опції випадаючого списку.
Останнім кроком, ми оновимо головну сторінку нашого сайту так, щоб встановлювалося значення обраної опції після збереження. Додайте наступний блок коду в файл index.php:
Ніколи не відображати це.
Іноді відображати це.
Завжди показувати це.
Знову перейдіть на головну сторінку вашого сайту, змініть опцію, а потім оновіть сторінку – переконайтеся, що ваш вибір зберігається.
Висновок
Нарешті ми закінчили дану серію статей. Settings API це потужний засіб WordPress , яке дає нам можливість створювати гарні і безпечні сторінки налаштувань, але вимагає правильного поводження. На жаль, це, напевно, одна з найбільш ігнорованих багатьма розробниками платформ.
Моєю головною метою було провести читачів через нетрі API від найелементарніших речей до складних і показати, як все це працює зсередини. Сподіваюся, у мене це вийшло.
Переклад статті «The Complete Guide To The WordPress Settings API, Part 8: Validation, Sanitisation, Input and II» був підготовлений дружною командою проекту Сайтостроение від А до Я.
