Зміст циклу статей «Повне керівництво по налаштуванню WordPress API»:

  • Повне керівництво по налаштуванню WordPress API, частина 1: вступ
  • Повне керівництво по налаштуванню WordPress API, частина 2: секції, поля та налаштування
  • Повне керівництво по налаштуванню WordPress API, частина 3: все про створення меню
  • Повне керівництво по налаштуванню WordPress API, частина 4: опції теми
  • Повне керівництво по налаштуванню WordPress API, частина 5: навігація закладочная
  • Повне керівництво по налаштуванню WordPress API, частина 6: сторінки меню
  • Повне керівництво по налаштуванню WordPress API, частина 7: валідація, очищення та елементи вводу
  • Повне керівництво по налаштуванню WordPress API, частина 8: валідація, очищення та елементи вводу
  • У цій частині циклу статей, ми дуже тісно будемо працювати з Settings API, використовуючи його багатий функціонал. Ми вже почали створювати власну тему для демонстрації наявних можливостей. Ми вивчили секції, поля, налаштування, меню, сторінки і багато іншого.

    Якщо ви читали весь цикл з самої першої статті, то, напевно, помітили, що всі попередні статті були довгими і насиченими кодом. Ми розглянули ключові функції Settings API. Решта статті циклу будуть коротшими і сфокусованими на темі.

    Це дозволить зменшити обсяг і кількість коду, а також, сподіваюся, зробить деякі ідеї і концепції більш простими для розуміння.

    В останній раз ми дійшли рівно до середини: була успішно створена сторінка кілька нових опцій і налаштувань, але вони залишилися в незакінченому стані – опції були підготовлені до збереження, але ще не зберігалися.

    У даній статті ми покажемо, чому поки що неможливо зберегти наші опції і що зробити, щоб вирішити цю проблему.

    Примітка: стаття припускає, що ви вже знайомі з Settings API і опціями теми. Якщо ви початківець розробник, то рекомендується спочатку ознайомитись з попередніми статтями циклу.

    Чому опції не можуть бути збережені?

    Якщо ви поетапно працювали над кожною статтею з даної серії, то ваша сторінка опцій повинна виглядати наступним чином:

    Все виглядає чудово, але є одна проблема: значення в секції «Опції соціальних мереж» зберігаються нормально, а от «Опції відображення» — немає. Перед тим, як ми продовжимо, важливо зрозуміти, чому ми можемо показати наші опції на окремій сторінці, але не можемо їх зберегти.

    Повертаючись до попередніх статей, згадаємо, що ми визначили два набори налаштувань для нашої теми – «Опції відображення» і «Опції соціальних мереж». Використовуючи Settings API, ми дали команду WordPress на створення значень для кожної групи налаштувань в базі даних.

    Так як ми визначили два набори налаштувань, в базі даних буде створено два рядки. Далі, Settings API виводить опції в панель керування за допомогою форм. Звідси, WordPress бере значення полів і зберігає їх в базу даних.

    Щоб забезпечити достатній рівень безпеки, WordPress присвоює кожній групі налаштувань унікальне значення, зване nonce (одноразове, випадково генерується значення), яке захищає від шкідливих атак. Як тільки одноразове значення присвоєно кожній групі налаштувань, ми відображаємо одну форму з двома одноразовими значеннями.

    Коли форма надсилається на сервер, WordPress зверне увагу тільки на саме останнє значення. В нашому випадку, це значення, створений для секції «Опції соціальних мереж». Іншими словами, будуть враховуватися тільки ці опції, а секція «Опції відображення» буде повністю проігнорована.

    Це не страшно! Насправді, ви можете побачити значення для обох секцій, переглянувши вихідний код сторінки. Так виглядає значення nonce для секції «Опції відображення»:

    Повне керівництво по налаштуванню WordPress API, частина 5: закладочная навігація для вашої сторінки нас

    А так – для секції «Опції соціальних мереж»:

    Повне керівництво по налаштуванню WordPress API, частина 5: закладочная навігація для вашої сторінки нас

    Ваші значення будуть іншими, але елемент вводу буде створений в будь-якому випадку.

    Одним із способів вирішення даної проблеми є створення унікальної сторінки для кожної групи налаштувань. Це непогане рішення, однак, якщо ви працюєте з групами з однієї-двох опцій, створення нових сторінок для кожної з них недоцільно.

    На щастя, WordPress пропонує проміжне рішення – ви можете залишити всі налаштування на одній сторінці і бути впевненим, що користувачі зможуть зберегти налаштування, і не будуть відчувати незручностей.

    Створення закладної навігації

    Ви без проблем можете побачити закладний навігацію в панелі управління WordPress, перейшовши на сторінку «Теми»:

    Повне керівництво по налаштуванню WordPress API, частина 5: закладочная навігація для вашої сторінки нас

    Закладочная навігація це відмінна альтернатива групам опцій. Вона розташована на одній сторінці і не знижує зручності використання. Це те, що ми зараз реалізуємо в нашій темі Sandbox.

    Складемо план наших дій:

    • Створення двох закладок – одна для опцій відображення, а інша – для опцій соціальних мереж;
    • Установка закладки «Опції відображення» в якості стандартної при завантаженні сторінки налаштувань;
    • Відмітка закладки в якості активної після збереження;
    • Висновок повідомлення про успішне збереження.

    Додавання закладок

    У файлі functions.phpзнайдіть функцію sandbox_theme_display. Вона використовується для виводу опцій. На даний момент вона повинна виглядати так:

    function sandbox_theme_display() {
    ?>

    Опції теми Sandbox

    Для початку, давайте створимо наші закладки. Це досить легко, і ми будемо використовувати переваги CSS-класів, які є в WordPress, а конкретно це класи nav-tab-wrapper і nav-tab.

    У функцію sandbox_theme_display, помістіть наступний нижче блок коду відразу після виклику функції settings_errors():

    Опції відображення
    Опції соціальних мереж

    Тепер, функція повинна виглядати так:

    function sandbox_theme_display() {
    ?>

    Опції теми Sandbox

    Опції відображення
    Опції соціальних мереж

    І тепер сторінка налаштувань виглядає так:

    Повне керівництво по налаштуванню WordPress API, частина 5: закладочная навігація для вашої сторінки нас

    Пожвавлення закладок

    Щоб почати перемикати наші закладки, нам потрібно створити якийсь сигнал або прапор, за яким будуть відображатися опції. Це може бути зроблено за допомогою запиту значення змінної, в якій записана інформація про те, за якою вкладці був зроблений клік. Це може бути зроблено за допомогою PHP.

    Давайте призначимо посиланнями, які ми створили вище, унікальні прапори, які будуть сигналізувати, яка вкладка була завантажена. Змініть вашу розмітку наступним чином:

    Опції відображення
    Опції соціальних мереж

    Зверніть увагу, що для кожної посилання ми призначили рядок, що включає в себе ідентифікатор сторінки та ідентифікатор закладки. Ідентифікатор сторінки необхідний, тому що він генерується WordPress через Settings API, і використовується для передачі інформації про те, яка сторінка була завантажена.

    Друге значення це ідентифікатор, придуманий нами, щоб вказати на те, яка закладка була активована. Якщо ви все зробили правильно, то в адресному рядку браузера ви побачите ідентифікатори закладок при натисканні на них.

    Далі, нам потрібно написати трохи PHP-коду, який буде зчитувати нове значення рядка запиту. Саме цей код дозволить нам перемикати закладки на сторінці опцій.

    Почнемо зі створення умовної конструкції, яка буде перевіряти, задано рядок запиту. Якщо так, то зберігаємо її в змінній. Це потрібно зробити прямо перед контейнером nav-tab-wrapper.

    WordPress включає в себе клас nav-tab-active , який ми можемо застосувати до нашої посиланням, щоб змінити її вигляд, коли вона активна.

    Наступним кроком, ми порівняємо змінну $active_tab з змінної, що містить рядок запиту, а потім застосуємо клас до відповідної закладки.

    Внесіть наступні зміни в ваш код:

    Опції відображення
    Опції соціальних мереж

    Ми вставили PHP-код в значення атрибутів для кожного посилання. Цей код дає таку команду: «Якщо значення змінної активної закладки одно display_options, то вставляємо ім’я класу nav-tab-active; інакше, нічого не виводимо». Протестуйте реалізований функціонал.

    До цього моменту, ваша функція повинна виглядати так:

    function sandbox_theme_display() {
    ?>

    Опції теми Sandbox

    Опції відображення
    Опції соціальних мереж

    Але не поспішайте – код вище закралася помилка! Коли користувач вперше заходить на сторінку налаштувань, то значення рядка запиту для закладки ще не створено.

    Тому, ми повинні створити значення за замовчуванням. Для цього модифікуємо умовний оператор, додавши в нього перевірку на існування змінної з рядком запиту. Використовуємо тернарний оператор, щоб скоротити код:

    $active_tab = isset( $_GET[ ‘tab’ ] ) ? $_GET[ ‘tab’ ] : ‘display_options’;

    Ця конструкція означає: «Якщо рядок запиту містить значення, то присвоїмо його змінної, що містить значення для активної закладки; інакше, присвоїмо значення display_options ». Таким чином, ми робимо закладку активної за замовчуванням. Спробуйте поперемикати закладки.

    Перемикання вмісту сторінки налаштувань

    Ми майже закінчили! Останнє, що нам потрібно зробити, це переключити вміст нашої сторінки налаштувань, грунтуючись на інформації про те, яка закладка в даний момент активна.

    Іншими словами, ми хочемо показати опції відображення, коли активна закладка опції відображення (і аналогічно для опцій соціальних мереж).

    Так як ми зберігаємо всю інформацію змінної active_tab, то потрібно звернутися до Settings API з використанням умовних конструкцій. Знайдіть наступний блок коду у вашій темі:

    У нас є два виклику функцій settings_fields і do_settings_section для опцій відображення і опцій соціальних мереж. Ми хочемо відобразити тільки одну секцію, коли обрана відповідна закладка.

    Для цього напишемо просте умова, яка буде перевіряти значення змінної $active_tab і запустити потрібну секцію:

    Оновіть вашу сторінку з опціями і переконайтеся, що все працює – групи налаштувань перемикаються у відповідності з вибраними закладками, а опції нормально зберігаються.

    Висновок

    Закладочная навігація це простий спосіб групування подібних опцій і створення зручного інтерфейсу для користувачів, не перевантажуючи їх тоннами полів і кнопок. Цей спосіб простий в реалізації і використовує ті ж принципи, що і системні меню WordPress.

    У наступній статті, ми розширимо можливості наших закладок, що зробить опції вашої теми більш зручними для доступу з головного меню WordPress.

    Переклад статті «The Complete Guide To The WordPress Settings API, Part 5: Tabbed Navigation For Your Settings Page» був підготовлений дружною командою проекту Сайтостроение від А до Я.