WordPress. API настроек (опций). Часть 2 из 4

19.07.2019

Теги: API • CMS • Web-разработка • WordPress • Настройка

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

Мало того, мы можем создать еще один пункт меню верхнего уровня, к тем, что уже есть: Записи, Медиафайлы, Страницы, Комментарии, Внешний вид. Добавить для нового пункта меню дочерние страницы и уже на этих страницах разместить настройки. Это может быть полезно, если плагин сложный и имеет большое число опций.

Как добавить страницу

Пункт меню верхнего уровня

Функция add_menu_page() позволяет добавить новый пункт меню верхнего уровня, кроме тех, что уже существуют: Записи, Медиафайлы, Страницы, Комментарии, Внешний вид и т.д. 

add_menu_page(
    $page_title,
    $menu_title,
    $capability,
    $menu_slug,
    $function,
    $icon_url,
    $position
);

Пункт меню второго уровня

Функция add_submenu_page() позволяет добавить дочернюю страницу для любого пункта меню панели управления. Указав минимальные права пользователя, можно ограничить доступ к к этой странице. 

add_submenu_page(
    $parent_slug,
    $page_title,
    $menu_title,
    $capability,
    $menu_slug,
    $function
);

Вместо этой функции удобно использовать обертки для нее:

  • add_dashboard_page() добавляет дочернюю страницу для пункта меню «Консоль»
  • add_posts_page добавляет дочернюю страницу для пункта меню «Записи»
  • add_media_page() добавляет дочернюю страницу для пункта меню «Медиафайлы»
  • add_pages_page() добавляет дочернюю страницу для пункта меню «Страницы»
  • add_comments_page() добавляет дочернюю страницу для пункта меню «Комментарии»
  • add_theme_page() добавляет дочернюю страницу для пункта меню «Внешний вид»
  • add_plugins_page() добавляет дочернюю страницу для пункта меню «Плагины»
  • add_users_page() добавляет дочернюю страницу для пункта меню «Пользователи»
  • add_management_page() добавляет дочернюю страницу для пункта меню «Инструменты»
  • add_options_page() добавляет дочернюю страницу для пункта меню «Настройки»

Добавляем пункт меню второго уровня

Давайте создадим дочернюю страницу для пункта меню «Настройки». И покажем на этой странице заголовок и какой-то текст: 

/*
 * Добавляем дочернюю страницу для пункта меню «Настройки»
 */
add_action('admin_menu', function () {
    add_options_page(
        // содержимое тега title этой страницы
        'Настройки подсветки php-кода',
        // название пункта меню для этой страницы
        'Подсветка кода',
        // права доступа, чтобы был показан этот пункт меню
        'manage_options',
        // уникальный идентификатор меню (slug)
        'highlight_php_code',
        // функция выводит содержимое этой страницы
        function () {
            ?>
            <div class="wrap">
                <h1>Настройки подсветки php-кода</h1>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Accusantium aspernatur atque autem corporis culpa debitis
                dolore doloremque dolores eaque eligendi ipsum iste, itaque
                laborum mollitia nemo placeat quidem repudiandae veniam.
                </p>
            </div>
            <?php
        }
    );
});

Добавляем пункт меню верхнего уровня

А теперь создадим пункт меню верхнего уровня и добавим для него дочернюю страницу: 

/*
 * Добавляем пункт меню верхнего уровня и дочернюю страницу
 */
add_action('admin_menu', function () {
    /*
     * Добавляем пункт меню верхнего уровня
     */
    add_menu_page(
        // содержимое тега title этой страницы
        'Настройки подсветки php-кода',
        // название пункта меню для этой страницы
        'Подсветка кода',
        // права доступа, чтобы был показан этот пункт меню
        'manage_options',
        // уникальный идентификатор меню (slug)
        'highlight_php_code',
        // функция выводит содержимое этой страницы
        function () {
            ?>
            <div class="wrap">
                <h1>Настройки подсветки php-кода</h1>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Accusantium aspernatur atque autem corporis culpa debitis
                dolore doloremque dolores eaque eligendi ipsum iste, itaque
                laborum mollitia nemo placeat quidem repudiandae veniam.
                </p>
            </div>
            <?php
        },
        // иконка для пункта меню
        'dashicons-editor-code',
        // позиция меню: чем больше число, тем ниже в списке
        90
    );

    /*
     * Добавляем дочернюю страницу для пункта меню
     */
    add_submenu_page(
        // идентификатор (slug) родительского меню
        'highlight_php_code',
        // содержимое тега title этой страницы
        'Цвет фона для кода',
        // название пункта меню для этой страницы
        'Цвет фона для кода',
        // права доступа, чтобы был показан этот пункт меню
        'manage_options',
        // уникальный идентификатор меню (slug)
        'highlight_php_code_bgcolor',
        // функция выводит содержимое этой страницы
        function () {
            ?>
            <div class="wrap">
                <h1>Цвет фона для кода</h1>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Accusantium aspernatur atque autem corporis culpa debitis
                dolore doloremque dolores eaque eligendi ipsum iste, itaque
                laborum mollitia nemo placeat quidem repudiandae veniam.
                </p>
            </div>
            <?php
        }
    );
});

Общая структура страницы настроек плагина

[Страница настроек первого уровня]
        [Первая секция настроек]
            • Первая настройка
            • Вторая настройка
        [Вторая секция настроек]
            • Третья настройка
            • Четвертая настройка
    [Первая дочерняя страница настроек]
        [Третья секция настроек]
            • Пятая настройка
            • Шестая настройка
        [Четвертая секция настроек]
            • Седьмая настройка
            • Восьмая настройка
    [Вторая дочерняя страница настроек]
        [Пятая секция настроек]
            • Девятая настройка
            • десятая настройка
        [Шестая секция настроек]
            • Одиннадцатая настройка
            • Двенадцатая настройка

Поиск: API • CMS • Web-разработка • WordPress • Настройка

Каталог оборудования
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Производители
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Функциональные группы
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.