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

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

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

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

Для создания страницы настроек вам потребуется использовать функции WordPress, такие как add_menu_page и add_submenu_page. Эти функции позволяют добавлять новые меню и подменю в админ-панели, а также привязывать к ним ваши собственные страницы. После создания меню вам необходимо использовать settings_fields, do_settings_sections и submit_button для отображения и сохранения значений настроек. Не забудьте зарегистрировать свои настройки с помощью register_setting, чтобы данные сохранялись правильно.

Также рекомендуется использовать различные библиотеки для организации интерфейса, такие как React или Vue.js, что сделает вашу страницу настроек более интерактивной. Не забудьте о безопасности: используйте функции проверки, такие как check_admin_referer, чтобы защитить вашу страницу от атак.

Также читайте: Как организовать меню с помощью плагина Мега Меню.

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

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

Дополнительная страница настроек

Весь код будет размещен в файле 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', 'site-settings-page', 'site_api_options_page' );

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

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

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

На данный момент, если открыть страницу в браузере, вы увидите пустое пространство. Это связано с тем, что у нас ещё нет функции site_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(), что дает возможность добавлять разделы и поля на существующие страницы настроек. Мы будем использовать значение siteCustom как для группы параметров, так и для присоединения раздела и полей к странице настроек.

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

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

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

function site_api_add_admin_menu( ) { add_options_page( 'Дополнительная страница настроек', 'Дополнительная страница настроек', 'manage_options', 'site-settings-page', 'site_api_options_page' ); } function site_api_settings_init( ) { register_setting( 'siteCustom', 'site_api_settings' ); add_settings_section( 'site_api_siteCustom_section', __( 'Секция 1', 'wordpress' ), 'site_api_settings_section_callback', 'siteCustom' ); add_settings_field( 'site_api_text_field_0', __( 'Опция 1', 'wordpress' ), 'site_api_text_field_0_render', 'siteCustom', 'site_api_siteCustom_section' ); add_settings_field( 'site_api_select_field_1', __( 'Опция 2', 'wordpress' ), 'site_api_select_field_1_render', 'siteCustom', 'site_api_siteCustom_section' ); } function site_api_text_field_0_render( ) { $options = get_option( 'site_api_settings' ); ?> function site_api_select_field_1_render( ) { $options = get_option( 'site_api_settings' ); ?>  function site_api_settings_section_callback( ) { echo __( 'Описание для секции настроек', 'wordpress' ); } function site_api_options_page( ) { ?> 

Дополнительная страница настроек

add_action( 'admin_menu', 'site_api_add_admin_menu' ); add_action( 'admin_init', 'site_api_settings_init' );

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

Функции site_api_text_field_0_render() и site_api_select_field_1_render() отвечают за вывод HTML наших текстового и выборочного полей.

И, наконец, в функции site_api_options_page() мы выводим HTML код для нашей страницы админских настроек, включая настройки и поля.

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

Дополнительная страница настроек

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

Также читайте: как добавить дополнительную защиту для wp-login.php через авторизацию .htaccess с помощью онлайн-генератора htpasswd.

Оставьте комментарий