Как создать страницу настроек в админ-панели WordPress

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

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

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

Как создать страницу настроек в админ-панели WordPress?

Для примера создадим в админ-панели дополнительную страницу настроек с 2-мя простыми опциями, значения которых будут сохранятся в базе данных.

Весь код будем размещать в functions.php – основном файле активной темы WordPress-сайта.

Чтобы добавить в админку WordPress свою страницу настроек, мы будем использовать служебную конструкцию add_options_page(). Вот как она выглядит:

add_options_page( $page_title, $menu_title, $capability, $menu_slug, $function );

Видно, что конструкция принимает несколько параметров.

• $page_title отвечает за название страницы настроек и будет показано в самом ее начале.
• $menu_title – название пункта меню.
• $capability – права доступа для пользователей, которые имеют доступ к этому пункту меню.
• $menu_slug – уникальный идентификатор меню для регистрации в системе.

Для нашего примера add_options_page() зададим так:

add_options_page( 'Дополнительная страница настроек', 'Дополнительная страница настроек', 'manage_options', 'wpschool-settings-page', 'wpschool_api_options_page' );

Чтобы эта конструкция была как-то задействована системой, ее необходимо вызвать, прикрепив к специальному хуку (см. Что такое хуки в WordPress?) admin_menu, который используется для добавления элементов (подменю и меню опций) в структуру меню панели администратора. Он запускается после обработки базового меню панели администратора. Это позволит нашим настройкам быть всегда доступными для пользователя и движка.

function wpschool_api_add_admin_menu( ) {
    add_options_page( 'Дополнительная страница настроек', 'Дополнительная страница настроек', 'manage_options', 'wpschool-settings-page', 'wpschool_api_options_page' );
}
add_action( 'admin_menu', 'wpschool_api_add_admin_menu' );

Если нужно, чтобы наш пункт меню находился в корневом меню, а не в подменю Настройки, то для этого нужно использовать конструкцию add_menu_page() вместо add_options_page(), которая принимает аналогичные аргументы.

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

API настроек

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

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

register_setting( $option_group, $option_name, $args );

Первые два аргумента являются обязательными. $option_group позволяет нам присваивать имя поля, а $option_name является фактическим именем опции в базе данных WordPress.

Конструкция add_settings_section() добавляет раздел на страницу администратора. Ее аргументы:

add_settings_section( $id, $title, $callback, $page );

$callback – это функция, которая выводит HTML-заголовок раздела (он может быть пустым), а $page – это фрагмент страницы администратора, на которой мы будем его отображать.

add_settings_field() определяет поле в разделе на странице настроек администратора.

add_settings_field( $id, $title, $callback, $page, $section, $args );

Из всех параметров конструкции нам нужны $id, $title, $callback и $page. Параметр $callback должен выводить HTML-код поля ввода.

API настроек предоставляет аргумент $page для конструкций add_settings_section() и add_settings_field() в качестве средства добавления разделов и полей на существующие страницы настроек. Мы будем использовать значение wpschoolCustom как для нашей группы параметров, так и для присоединения раздела настроек и полей настроек к странице.

settings_fields() выводит скрытые поля формы на странице настроек. Конструкция принимает только один параметр $option_group, который используется в register_setting().

do_settings_sections() выводит все разделы с соответствующими полями, зарегистрированными для конкретной страницы $page.

Собрав воедино все вышесказанное, полностью наш код будет выглядеть так:

function wpschool_api_add_admin_menu( ) {
    add_options_page( 'Дополнительная страница настроек', 'Дополнительная страница настроек', 'manage_options', 'wpschool-settings-page', 'wpschool_api_options_page' );
}

function wpschool_api_settings_init( ) {
    register_setting( 'wpschoolCustom', 'wpschool_api_settings' );
    add_settings_section(
        'wpschool_api_wpschoolCustom_section',
        __( 'Секция 1', 'wordpress' ),
        'wpschool_api_settings_section_callback',
        'wpschoolCustom'
    );

    add_settings_field(
        'wpschool_api_text_field_0',
        __( 'Опция 1', 'wordpress' ),
        'wpschool_api_text_field_0_render',
        'wpschoolCustom',
        'wpschool_api_wpschoolCustom_section'
    );

    add_settings_field(
        'wpschool_api_select_field_1',
        __( 'Опция 2', 'wordpress' ),
        'wpschool_api_select_field_1_render',
        'wpschoolCustom',
        'wpschool_api_wpschoolCustom_section'
    );
}

function wpschool_api_text_field_0_render( ) {
    $options = get_option( 'wpschool_api_settings' );
    ?>
    <input type='text' name='wpschool_api_settings[wpschool_api_text_field_0]' value='<?php echo $options['wpschool_api_text_field_0']; ?>'>
    <?php
}

function wpschool_api_select_field_1_render( ) {
    $options = get_option( 'wpschool_api_settings' );
    ?>
    <select name='wpschool_api_settings[wpschool_api_select_field_1]'>
        <option value='1' <?php selected( $options['wpschool_api_select_field_1'], 1 ); ?>>Значение 1</option>
        <option value='2' <?php selected( $options['wpschool_api_select_field_1'], 2 ); ?>>Значение 2</option>
    </select>
    <?php
}

function wpschool_api_settings_section_callback( ) {
    echo __( 'Описание для секции настроек', 'wordpress' );
}

function wpschool_api_options_page( ) {
    ?>
    <form action='options.php' method='post'>
        <h2>Дополнительная страница настроек</h2>
        <?php
        settings_fields( 'wpschoolCustom' );
        do_settings_sections( 'wpschoolCustom' );
        submit_button();
        ?>
    </form>
    <?php
}
add_action( 'admin_menu', 'wpschool_api_add_admin_menu' );
add_action( 'admin_init', 'wpschool_api_settings_init' );

Здесь мы подключаем функцию wpschool_api_settings_init() к хуку admin_init. В ней определяем и регистрируем наши настройки, разделы и поля.

Функции wpschool_api_text_field_0_render() и wpschool_api_select_field_1_render() определяют вывод HTML наших двух полей (текстового и поля выбора).

Наконец, в функции wpschool_api_options_page() выводим HTML-код для нашей страницы настроек администратора. Мы включаем в него разделы настроек и поля.

Добавив этот код, видно, что на нашей странице настроек теперь появились созданные опции.

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

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