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

Содержание цикла статей "Полное руководство по настройке WordPress API":

1. Полное руководство по настройке WordPress API, часть 1: введение
2. Полное руководство по настройке WordPress API, часть 2: секции, поля и настройки
3. Полное руководство по настройке WordPress API, часть 3: все о создании меню
4. Полное руководство по настройке WordPress API, часть 4: опции темы
5. Полное руководство по настройке WordPress API, часть 5: закладочная навигация
6. Полное руководство по настройке WordPress API, часть 6: страницы меню
7. Полное руководство по настройке WordPress API, часть 7: валидация, очистка и элементы ввода
8. Полное руководство по настройке WordPress API, часть 8: валидация, очистка и элементы ввода

В этой части цикла статей, мы очень тесно будем работать с Settings API, используя его богатый функционал. Мы уже начали создавать собственную тему для демонстрации имеющихся возможностей. Мы изучили секции, поля, настройки, меню, страницы и многое другое.

Если вы читали весь цикл с самой первой статьи, то, наверное, приметили, что все предыдущие статьи были длинными и насыщенными кодом. Мы рассмотрели ключевые функции Settings API. Оставшиеся статьи цикла будут более короткими и сфокусированными на теме.

Это позволит уменьшить объем и количество кода, а также, надеюсь, сделает некоторые идеи и концепции более простыми для понимания.

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

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

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

Почему опции не могут быть сохранены?

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

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

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

Так как мы определили два набора настроек, в базе данных будет создано две строки. Далее, Settings API выводит опции в панель управления с помощью форм. Отсюда, WordPress берет значения из полей и сохраняет их в базу данных.

Чтобы обеспечить достаточный уровень безопасности, WordPress присваивает каждой группе настроек уникальное значение, называемое nonce (одноразовое, случайно генерируемое значение), которое защищает от вредоносных атак. Как только одноразовое значение присвоено каждой группе настроек, мы отображаем одну форму с двумя одноразовыми значениями.

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

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

А так – для секции «Опции социальных сетей»:

Ваши значения будут другими, но элемент ввода будет создан в любом случае.

Одним из способов решения данной проблемы является создание уникальной страницы для каждой группы настроек. Это неплохое решение, однако, если вы работаете с группами из одной-двух опций, создание новых страниц для каждой из них нецелесообразно.

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

Создание закладочной навигации

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

Закладочная навигация это отличная альтернатива группам опций. Она расположена на одной странице и не снижает удобства использования. Это то, что мы сейчас реализуем в нашей теме Sandbox.

Составим план наших действий:

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

Добавление закладок

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

function sandbox_theme_display() {  
?>  
    <!-- Создаем заголовок в стандартном контейнере «wrap» -->  
    <div class="wrap">  
  
        <!-- Добавляем иконку к странице -->  
        <div id="icon-themes" class="icon32"></div>  
        <h2>Опции темы Sandbox</h2>  
  
        <!-- Делаем вызов функции WordPress для вывода ошибок, возникающих при сохранении настроек. -->  
        <?php settings_errors(); ?>  
  
        <!-- Создаем форму, которая будет использоваться для вывода наших опций -->  
        <form method="post" action="options.php">
            <?php settings_fields( 'sandbox_theme_display_options' ); ?>
            <?php do_settings_sections( 'sandbox_theme_display_options' ); ?>
            <?php settings_fields( 'sandbox_theme_social_options' ); ?>  
            <?php do_settings_sections( 'sandbox_theme_social_options' ); ?>
            <?php submit_button(); ?>
        </form>
  
    </div> <!-- Конец контейнера «wrap» -->  
<?php  
} // Конец функции sandbox_theme_display

Для начала, давайте создадим наши закладки. Это достаточно легко и мы будем использовать преимущества CSS-классов, которые имеются в WordPress, а конкретно это классы nav-tab-wrapper и nav-tab.

В функцию sandbox_theme_display, поместите следующий ниже блок кода сразу после вызова функции settings_errors():

<h2 class="nav-tab-wrapper">
            <a href="#" class="nav-tab">Опции отображения</a>
            <a href="#" class="nav-tab">Опции социальных сетей</a>
        </h2>

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

function sandbox_theme_display() {  
?>  
    <!-- Создаем заголовок в стандартном контейнере «wrap» -->  
    <div class="wrap">  
  
        <!-- Добавляем иконку к странице -->  
        <div id="icon-themes" class="icon32"></div>  
        <h2>Опции темы Sandbox</h2>  
  
        <!-- Делаем вызов функции WordPress для вывода ошибок, возникающих при сохранении настроек. -->  
        <?php settings_errors(); ?> 

        <h2 class="nav-tab-wrapper">
            <a href="#" class="nav-tab">Опции отображения</a>
            <a href="#" class="nav-tab">Опции социальных сетей</a>
        </h2>
  
        <!-- Создаем форму, которая будет использоваться для вывода наших опций -->  
        <form method="post" action="options.php">
            <?php settings_fields( 'sandbox_theme_display_options' ); ?>
            <?php do_settings_sections( 'sandbox_theme_display_options' ); ?>
            <?php settings_fields( 'sandbox_theme_social_options' ); ?>  
            <?php do_settings_sections( 'sandbox_theme_social_options' ); ?>
            <?php submit_button(); ?>
        </form>
  
    </div> <!-- Конец контейнера «wrap» -->  
<?php  
} // Конец функции sandbox_theme_display

И теперь страница настроек выглядит так:

Оживление закладок

Чтобы начать переключать наши закладки, нам нужно создать некий сигнал или флаг, по которому будут отображаться опции. Это может быть сделано с помощью запроса значения переменной, в которой записана информация о том, по какой вкладке был сделан клик. Это может быть сделано с помощью PHP.

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

<h2 class="nav-tab-wrapper">  
            <a href="?page=sandbox_theme_options&tab=display_options" class="nav-tab">Опции отображения</a>
            <a href="?page=sandbox_theme_options&tab=social_options" class="nav-tab">Опции социальных сетей</a>
        </h2>

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

Второе значение это идентификатор, придуманный нами, чтобы указать на то, какая закладка была активирована. Если вы все сделали правильно, то в адресной строке браузера вы увидите идентификаторы закладок при клике на них.

Далее, нам нужно написать немного PHP-кода, который будет считывать новое значение строки запроса. Именно этот код позволит нам переключать закладки на странице опций.

Начнем с создания условной конструкции, которая будет проверять, задана ли строка запроса. Если да, то сохраняем её в переменной. Это нужно сделать прямо перед контейнером nav-tab-wrapper.

<?php
        if( isset( $_GET[ 'tab' ] ) ) {
            $active_tab = $_GET[ 'tab' ];
        } // Конец конструкции if
        ?>

WordPress включает в себя класс nav-tab-active , который мы можем применить к нашей ссылке, чтобы изменить её вид, когда она активна.

Следующим шагом, мы сравним переменную $active_tab с переменной, содержащей строку запроса, а затем применим класс к соответствующей закладке.

Внесите следующие изменения в ваш код:

<h2 class="nav-tab-wrapper">  
            <a href="?page=sandbox_theme_options&tab=display_options" class="nav-tab <?php echo $active_tab == 'display_options' ? 'nav-tab-active' : ''; ?>">Опции отображения</a>  
            <a href="?page=sandbox_theme_options&tab=social_options" class="nav-tab <?php echo $active_tab == 'social_options' ? 'nav-tab-active' : ''; ?>">Опции социальных сетей</a>  
        </h2>

Мы вставили PHP-код в значения атрибутов для каждой ссылки. Этот код дает следующую команду: «Если значение переменной активной закладки равно display_options, то вставляем имя класса nav-tab-active; иначе, ничего не выводим». Протестируйте реализованный функционал.

К данному моменту, ваша функция должна выглядеть так:

function sandbox_theme_display() {  
?>  
    <!-- Создаем заголовок в стандартном контейнере «wrap» -->  
    <div class="wrap">  
  
        <!-- Добавляем иконку к странице -->  
        <div id="icon-themes" class="icon32"></div>  
        <h2>Опции темы Sandbox</h2>  
  
        <!-- Делаем вызов функции WordPress для вывода ошибок, возникающих при сохранении настроек. -->  
        <?php settings_errors(); ?> 

        <?php 
        if( isset( $_GET[ 'tab' ] ) ) {
            $active_tab = $_GET[ 'tab' ];
        } // Конец конструкции if
        ?>

        <h2 class="nav-tab-wrapper">  
            <a href="?page=sandbox_theme_options&tab=display_options" class="nav-tab <?php echo $active_tab == 'display_options' ? 'nav-tab-active' : ''; ?>">Опции отображения</a>  
            <a href="?page=sandbox_theme_options&tab=social_options" class="nav-tab <?php echo $active_tab == 'social_options' ? 'nav-tab-active' : ''; ?>">Опции социальных сетей</a>  
        </h2>
  
        <!-- Создаем форму, которая будет использоваться для вывода наших опций -->  
        <form method="post" action="options.php">
            <?php settings_fields( 'sandbox_theme_display_options' ); ?>
            <?php do_settings_sections( 'sandbox_theme_display_options' ); ?>
            <?php settings_fields( 'sandbox_theme_social_options' ); ?>  
            <?php do_settings_sections( 'sandbox_theme_social_options' ); ?>
            <?php submit_button(); ?>
        </form>
  
    </div> <!-- Конец контейнера «wrap» -->  
<?php  
} // Конец функции sandbox_theme_display

Но не спешите – в код выше закралась ошибка! Когда пользователь в первый раз заходит на страницу настроек, то значения строки запроса для закладки еще не создано.

Поэтому, мы должны создать значение по умолчанию. Для этого модифицируем условный оператор, добавив в него проверку на существование переменной со строкой запроса. Используем тернарный оператор, чтобы сократить код:

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

Эта конструкция означает: «Если строка запроса содержит значение, то присвоим его переменной, содержащей значение для активной закладки; иначе, присвоим значение display_options ». Таким образом, мы делаем закладку активной по умолчанию. Снова попробуйте попереключать закладки.

Переключение содержимого страницы настроек

Мы почти закончили! Последнее, что нам нужно сделать, это переключить содержимое нашей страницы настроек, основываясь на информации о том, какая закладка в данный момент активна.

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

Так как мы храним всю информацию в переменной active_tab, то нужно обратиться к Settings API с использованием условных конструкций. Найдите следующий блок кода в вашей теме:

<form method="post" action="options.php">
            <?php settings_fields( 'sandbox_theme_display_options' ); ?>
            <?php do_settings_sections( 'sandbox_theme_display_options' ); ?>
            <?php settings_fields( 'sandbox_theme_social_options' ); ?>  
            <?php do_settings_sections( 'sandbox_theme_social_options' ); ?>
            <?php submit_button(); ?>
        </form>

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

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

<form method="post" action="options.php">  
    <?php  
          
        if( $active_tab == 'display_options' ) {  
            settings_fields( 'sandbox_theme_display_options' );  
            do_settings_sections( 'sandbox_theme_display_options' );  
        } else {  
            settings_fields( 'sandbox_theme_social_options' );  
            do_settings_sections( 'sandbox_theme_social_options' );  
        } // Конец конструкции if/else  
          
        submit_button();  
          
    ?>  
</form>

Обновите вашу страницу с опциями и убедитесь, что все работает – группы настроек переключаются в соответствии с выбираемыми закладками, а опции нормально сохраняются.

Заключение

Закладочная навигация это простой способ группировки сходных опций и создания удобного интерфейса для пользователей, не перегружая их тоннами полей и кнопок. Этот способ прост в реализации и использует те же принципы, что и системные меню WordPress.

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

РедакцияПеревод статьи «The Complete Guide To The WordPress Settings API, Part 5: Tabbed Navigation For Your Settings Page»