Добавление полей в пункты меню WordPress — страница настроек плагина

Опубликовано: 2021-07-08

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

Для этой статьи требуется, чтобы вы уже применили код, приведенный в примере из статьи «Добавление полей в элементы меню WordPress — пользовательский плагин». Мы вернемся оттуда и посмотрим, как мы можем сделать наш плагин более удобным для пользователя, добавив его страницу настроек в область администрирования, чтобы вы позволили пользователям-администраторам устанавливать свои предпочтения в отношении того, как будет работать плагин.

Начальные шаги

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

На данный момент основной PHP-файл нашего плагина выглядит так:

 <?php /* Plugin Name: Menu Item Field Creator Description: My custom plugin to create menu item fields */ class MyCP_Menu_Item_Field_Creator { public function __construct() { add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'menu_item_sub' ), 10, 2 ); add_action( 'wp_update_nav_menu_item', array( $this, 'save_menu_item_sub' ), 10, 2 ); add_filter( 'wp_nav_menu_args', array( $this, 'menu_item_sub_custom_walker' ) ); } public function menu_item_sub( $item_id, $item ) { $menu_item_sub = get_post_meta( $item_id, '_menu_item_sub', true ); ?> <div> <span class="subtitle"><?php _e( 'Subtitle', 'menu-item-sub' ); ?></span><br /> <input type="hidden" class="nav-menu-id" value="<?php echo $item_id; ?>" /> <div class="logged-input-holder"> <input type="text" name="menu_item_sub[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $menu_item_sub ); ?>" /> </div> </div> <?php } public function save_menu_item_sub( $menu_id, $menu_item_db_id ) { if ( isset( $_POST['menu_item_sub'][ $menu_item_db_id ] ) ) { $sanitized_data = sanitize_text_field( $_POST['menu_item_sub'][ $menu_item_db_id ] ); update_post_meta( $menu_item_db_id, '_menu_item_sub', $sanitized_data ); } else { delete_post_meta( $menu_item_db_id, '_menu_item_sub' ); } } public function menu_item_sub_custom_walker( $args ) { if ( class_exists( 'My_Custom_Nav_Walker' ) ) { $args['walker'] = new My_Custom_Nav_Walker(); } else { echo 'DOES NOT EXIST'; } return $args; } } $mycp_menu_item_field_creator = new MyCP_Menu_Item_Field_Creator(); if ( ! class_exists( 'My_Custom_Nav_Walker' ) ) { class My_Custom_Nav_Walker extends Walker_Nav_Menu { public function start_el( &$output, $item, $depth=0, $args=[], $id=0 ) { $menu_item_sub = get_post_meta( $item->ID, '_menu_item_sub', true ); $output .= '<li class="' . implode( ' ', $item->classes ) . '">'; if ( $item->url && $item->url != '#' ) { $output .= '<a href="' . $item->url . '">'; } else { $output .= '<span>'; } $output .= $item->title; if ( $item->url && $item->url != '#' ) { $output .= '</a>'; } else { $output .= '</span>'; } if ( ! empty( $menu_item_sub ) ) { $output .= '<div class="menu-item-sub">' . $menu_item_sub . '</div>'; } } } }

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

Разместите свой сайт с Pressidium

60- ДНЕВНАЯ ГАРАНТИЯ ВОЗВРАТА ДЕНЕГ

ПОСМОТРЕТЬ НАШИ ПЛАНЫ

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

Создайте элемент меню страницы параметров

Чтобы добавить пункт меню, мы добавим соответствующий хук admin_menu внутри метода __construct() под текущими добавленными хуками.

 class MyCP_Menu_Item_Field_Creator { public function __construct() { add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'menu_item_sub' ), 10, 2 ); add_action( 'wp_update_nav_menu_item', array( $this, 'save_menu_item_sub' ), 10, 2 ); add_filter( 'wp_nav_menu_args', array( $this, 'menu_item_sub_custom_walker' ) ); add_action( 'admin_menu', array( $this, 'plugin_settings_menu_page' ) ); } . . .

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

 public function plugin_settings_menu_page() { add_menu_page( __( 'Page Title Attribute Text', 'oop-menu-item-sub' ), __( 'Menu Item Field Creator', 'oop-menu-item-sub' ), 'manage_options', 'menu-item-field-creator', array( $this, 'plugin_settings_page_content' ) ); }

Метод также должен быть помещен в основной класс плагина. Обратите внимание, что внутри нашего plugin_settings_menu_page() мы использовали add_menu_page() , которую предоставляет WordPress. Эта функция принимает следующие аргументы:

 add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position )
  • Требуется определить $page_title , и это в основном первая часть тегов заголовка страницы, на которую вы перенаправляетесь при выборе этого пункта меню.
  • $menu_title — также обязательный — это текст, который будет использоваться для меню.
  • $capability — это возможность, необходимая для отображения этого меню пользователем. В нашем случае мы выбрали разрешение manage_options , так как оно предоставляется только суперпользователям и администраторам. Если вы хотите понять, какая роль или возможность соответствует вашим потребностям, вы можете обратиться к соответствующей официальной документации.
  • $menu_slug также обязателен и должен быть уникальным. Это псевдоним для обращения к этому меню. Не забывайте, что вы должны использовать только строчные буквы, цифры, дефисы и символы подчеркивания, совместимые с sanitize_key() .
  • $icon_url является необязательным аргументом и представляет собой URL-адрес, который ссылается на файл значка, который будет использоваться для пункта меню.
  • В аргументе $function вы определяете функцию обратного вызова, которая будет создавать содержимое страницы настроек. В нашем случае это plugin_settings_page_content() , у которого пока нет функциональности. Мы добавили его в наш код с помощью plugin_settings_menu_page() .
 public function plugin_settings_page_content() { $html = "<p>Test content for our custom plugin</p>"; echo $html; }

На этом этапе вы должны увидеть пункт меню «Создатель поля элемента меню» и тестовое содержимое страницы содержимого и распознать URL-адрес меню, который вы определили в аргументах.

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

 public function plugin_settings_menu_page() { add_menu_page( __( 'Page Title Attribute Text', 'oop-menu-item-sub' ), __( 'Menu Item Field Creator', 'oop-menu-item-sub' ), 'manage_options', 'menu-item-field-creator', array( $this, 'plugin_settings_page_content' ) ); }

с этим:

 public function plugin_settings_menu_page() { add_options_page( __( 'Page Title Attribute Text', 'oop-menu-item-sub' ), __( 'Menu Item Field Creator', 'oop-menu-item-sub' ), 'manage_options', 'menu-item-field-creator', array( $this, 'plugin_settings_page_content' ) ); }

Это приведет к расположению меню здесь:

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

Добавьте функциональность на нашу страницу настроек

Что мы сделали до сих пор, так это добавили наш пункт меню и определили функцию, которая будет отображать страницу содержимого настроек. Если нам нужна функциональность на нашей странице настроек, нам нужно будет зарегистрировать некоторые поля, а затем отобразить их на странице настроек плагина. В качестве примера мы создадим форму, в которой пользователь может определить тип HTML-элемента, которым будет обернуто поле подзаголовка.

Выход

Замените код plugin_settings_page_content следующим:

 public function plugin_settings_page_content() { ?> <form action="options.php" method="post"> <?php do_settings_sections( 'options_page' ); settings_fields( 'option_group' ); submit_button( __( 'Save Subtitle', 'oop-menu-item-sub' ) ); ?> </form> <?php }

В этих строках мы используем функции do_settings_sections() и settings_fields() . do_settings_sections() распечатает все зарегистрированные разделы настроек и поля. Функция settings_fields() выводит скрытые поля ввода nonce, action и option_page для страницы настроек.

Теперь приступим и зарегистрируем наши настройки.

Зарегистрируйте свои настройки

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

 class MyCP_Menu_Item_Field_Creator { public function __construct() { add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'menu_item_sub' ), 10, 2 ); add_action( 'wp_update_nav_menu_item', array( $this, 'save_menu_item_sub' ), 10, 2 ); add_filter( 'wp_nav_menu_args', array( $this, 'menu_item_sub_custom_walker' ) ); add_action( 'admin_menu', array( $this, 'plugin_settings_menu_page' ) ); add_action( 'admin_init', array( $this, 'plugin_register_settings' ) ); } . . .

Мы вставим метод plugin_register_settings() в наш класс следующим образом:

 public function plugin_register_settings() { register_setting( 'option_group', 'option_name' ); add_settings_section( 'section_id', __( 'Settings Page Title', 'oop-menu-item-sub' ), array( $this, 'render_section' ), 'options_page' ); add_settings_field( 'html_element', __( 'Choose HTML Element:', 'oop-menu-item-sub' ), array( $this, 'render_field' ), 'options_page', 'section_id' ); }

Теперь давайте сделаем шаг назад и еще раз взглянем на то, что мы сделали до сих пор.

  • Для регистрации настройки и ее данных мы использовали функцию register_setting () которая согласно документации устроена так:
 register_setting( $option_group, $option_name, $args )
  • $option_group является обязательным параметром и должен соответствовать имени группы, используемому в settings_fields() .
  • Также требуется $option_name , который является именем параметра, подлежащего очистке и сохранению. Это значение в столбце option_name в таблице базы данных options.
  • $args здесь не нужен. Это необязательный массив данных, описывающий настройку при регистрации. Здесь вы можете указать его тип, описание, функцию sanitize_callback() для значения параметра, параметр « show_in_rest », который определяет, должны ли текущие данные быть включены в REST API, и параметр по умолчанию, где вы можете определить значение по умолчанию. при вызове get_option() .
  • Мы также представили функции add_settings_section() и add_settings_field() , которые помогут нам выполнить этот шаг.
  • Функция add_settings_section() используется для регистрации раздела с определенным слаг-именем в WordPress. Здесь $id — это слаг-имя для идентификации раздела, которое используется в атрибуте «id» тегов.
 add_settings_section( $id, $title, $callback, $page )
  • $title — это отформатированный заголовок раздела, который будет отображаться в качестве заголовка раздела, $callback — это функция, которая будет отображать содержимое в верхней части раздела, а $page — это слаг-имя страницы, которая должна соответствует аргументу $page функции do_settings_sections() , в нашем случае это «options_page».

Все вышеперечисленные параметры являются обязательными.

  • Функция add_settings_field (), которую предоставляет WordPress, позволяет добавить новое поле в раздел.
 add_settings_field( $id, $title, $callback, $page, $section, $args )
  • $id , $title , $callback и $page используются, как объяснялось ранее. Раздел $section — это псевдоним раздела страницы настроек, в котором отображается поле, а $args используется при выводе поля. И $section и $args являются необязательными.

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

Теперь у нас есть два общедоступных метода, которые нужно представить: render_section() и render_field() .

Для render_section() мы выведем только заголовок для нашего раздела:

 public function render_section() { ?> <h2><?php _e( 'Section #1', 'oop-menu-item-sub' ); ?></h2> <?php }

Для render_field() мы выведем 3 переключателя с нашими вариантами для элемента HTML:

 public function render_field() { $stored_option = get_option( 'option_name' )['html_element']; ?> <input type="radio" name="option_name[html_element]" value="div" <?php checked( $stored_option, 'div' ); ?> /> div <input type="radio" name="option_name[html_element]" value="p" <?php checked( $stored_option, 'p' ); ?> /> p <input type="radio" name="option_name[html_element]" value="span" <?php checked( $stored_option, 'span' ); ?> /> span <?php }

Это должен быть результат, который вы видите сейчас:

Если вы выберете другой элемент, например, span, и сохраните, он также должен работать правильно.

Отражение изменений страницы параметров на вашем веб-сайте

Осталось объяснить, как применить HTML-элемент, который выберут пользователи-администраторы, к элементу субтитров под пунктом меню в интерфейсе веб-сайта.

Этот шаг действительно прост, так как единственное, что нам нужно, — это извлечь выбранное поле из таблицы параметров базы данных и изменить класс « My_Custom_Nav_Walker » в нашем коде. В частности, нам придется заменить часть кода, где мы добавляем запись menu_item_sub в переменную $output .

 $output .= '<div class="menu-item-sub">' . $menu_item_sub . '</div>';

Сначала мы получим элемент с помощью get_option( 'option_name' )['html_element']; и сохраните его в переменной $stored_option а затем примените к строке выше. Окончательный класс должен выглядеть так:

 if ( ! class_exists( 'My_Custom_Nav_Walker' ) ) { class My_Custom_Nav_Walker extends Walker_Nav_Menu { public function start_el( &$output, $item, $depth=0, $args=[], $id=0 ) { $menu_item_sub = get_post_meta( $item->ID, '_menu_item_sub', true ); $output .= '<li class="' . implode( ' ', $item->classes ) . '">'; if ( $item->url && $item->url != '#' ) { $output .= '<a href="' . $item->url . '">'; } else { $output .= '<span>'; } $output .= $item->title; if ( $item->url && $item->url != '#' ) { $output .= '</a>'; } else { $output .= '</span>'; } $stored_option = get_option( 'option_name' )['html_element']; if ( ! empty( $menu_item_sub ) ) { $output .= '<'. $stored_option .' class="menu-item-sub">' . $menu_item_sub . '</'. $stored_option .'>'; } } } }

Иногда полезно визуализировать работу функций WordPress при создании страницы настроек, глядя на код нашего плагина. Вот как это выглядит в нашем примере:

Вывод

Как вы, надеюсь, поняли, API настроек WP является основным инструментом, который позволяет нам создавать кости для страницы параметров нашего плагина. Кроме этого, вам решать, будете ли вы использовать более объектно-ориентированный подход с классами или использовать более простой маршрут, когда вы просто вставляете функции и хуки в основной PHP-файл плагина.

Отметим здесь, что путь, которым мы следовали, чтобы воссоздать плагин, на самом деле не является ООП, но определенно продвинулся на шаг в этом направлении. В предстоящей серии статей об ООП мы углубимся в другие функции, которые могут улучшить управление нашим плагином.

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

Также читайте

  • Добавление настраиваемых полей в пункты меню WordPress
  • Добавление полей в пункты меню WordPress — пользовательский плагин