Блог

WordPress: Собственные параметры в Custom Header

04 февраля 2014 Рубрики: Программирование. Метки: wordpress и разработка темы.

Те из вас, кто когда-либо баловался с темами WordPress, знают, что некоторые темы включают одну из фич WordPress: Custom Header («Заголовок» в русской редакции). Стандартный набор параметров включает в себя:

  1. Изменение изображения в шапке
  2. Отображение/скрытие текста (названия и краткого описания сайта)

Сегодня я вместе с вами научусь добавлять на этот экран дополнительные параметры и использовать их по назначению.

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

  1. Добавить новые поля для наших параметров на страницу Custom Header («Внешний Вид» — «Заголовок»)
  2. Сохранить значения параметров в базу данных по нажатию кнопки «Сохранить»
  3. Использовать параметры в теме WordPress

Добавляем новые поля

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

/**
 * Параметры отображения главного меню: справа от текста или под текстом
 */
add_action('custom_header_options', function(){
    $location = esc_attr(get_theme_mod('primary_menu_location', 'right'));
?>
    <table class="form-table">
        <tbody>
        <tr class="hide-if-no-js">
            <th scope="row">Расположение главного меню</th>
            <td>
                <p>
                    <label>
                        <input type="radio"
                               name="primary-menu-location"
                               value="right"<?php if ($location == 'right'): ?> checked<?php endif ?>>
                        Справа от логотипа и текста
                    </label>
                </p>
                <p>
                    <label>
                        <input type="radio"
                               name="primary-menu-location"
                               value="bottom"<?php if ($location == 'bottom'): ?> checked<?php endif ?>>
                        Под логотипом и текстом
                    </label>
                </p>
            </td>
        </tr>
        </tbody>
    </table>
<?php
});

Добавьте этот код в файл functions.php вашей темы.

Примерный результат работы этого кода
Примерный результат работы этого кода

Сохраняем значение параметра в базу данных

Значения стандартных параметров обновятся по нажатию кнопки «Сохранить», однако нам придется сохранять свой новый параметр отдельно. Для этого мы можем использовать хук admin_head. Добавьте нижеприведенный код в файл functions.php.

/**
 * Сохраняет значение параметра в базу данных
 */
add_action('admin_head', function(){

    if (   isset($_POST['primary-menu-location']) 
        && current_user_can('manage_options')){

        // Валидация запроса
        check_admin_referer('custom-header-options', '_wpnonce-custom-header-options');

        // Сохранение значения параметра
        set_theme_mod('primary_menu_location', $_POST['primary-menu-location']);
    }
});

Наблюдаем за изменениями

Меню располагается справа
Меню располагается справа

Теперь установим переключатель в положение «Под логотипом и текстом».

Меню располагается внизу
Меню располагается внизу

Изменения очевидны. Время экспериментов!