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

Опубликовано: 2021-03-23

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

Речь идет об хуках действия wp_nav_menu_item_custom_fields и wp_nav_menu_item_custom_fields_customize_template . Используя их, теперь вы можете легко добавлять свои собственные настраиваемые поля в пункты меню как на странице редактирования меню администратора, так и на панели параметров настройщика.

В этой статье мы рассмотрим несколько простых способов использования хука wp_nav_menu_item_custom_fields для добавления собственных настраиваемых полей в пункты меню, а также рассмотрим два плагина, которые также можно использовать для добавления настраиваемых полей без написания кода. .

Давайте идти.

Пользовательское поле меню WordPress

wp_nav_menu_item_custom_fields специфичен для экрана меню и описывается следующим образом:

 do_action( 'wp_nav_menu_item_custom_fields', $id, $menu_item, $depth, $args );
  • Целое число $id — это идентификатор пункта меню.
  • Объект $menu_item — это объект данных пункта меню.
  • Целое число $depth — это глубина пункта меню.
  • $args — это объект аргументов пункта меню.

Хук срабатывает непосредственно перед кнопками перемещения элемента навигационного меню в редакторе меню и вводится в файле wp-admin/includes/class-walker-nav-menu-edit.php в строке 242.

Вы можете продемонстрировать это на практике на очень простом примере. Откройте файл functions.php вашей активной темы и добавьте этот фрагмент кода:

 function my_menu_item_field() { echo 'A menu item test field'; } add_action( 'wp_nav_menu_item_custom_fields', 'my_menu_item_field' );

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

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

Добавить настраиваемое поле пункта меню WordPress с помощью кода

В этом примере мы создадим настраиваемое поле меню WordPress, которое позволит нам вставить описание в любой пункт меню.

Шаг первый: добавление вывода

Для начала мы сначала создадим функцию обратного вызова, которая будет отображать поле ввода, где пользователь-администратор может заполнить описание. Вот код для этого:

 function menu_item_desc( $item_id, $item ) { $menu_item_desc = get_post_meta( $item_id, '_menu_item_desc', true ); ?> <div> <span class="description"><?php _e( "Item Description", 'menu-item-desc' ); ?></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_desc[<?php echo $item_id ;?>]" value="<?php echo esc_attr( $menu_item_desc ); ?>" /> </div> </div> <?php } add_action( 'wp_nav_menu_item_custom_fields', 'menu_item_desc', 10, 2 );

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

Шаг второй: сохранение ввода

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

 function save_menu_item_desc( $menu_id, $menu_item_db_id ) { if ( isset( $_POST['menu_item_desc'][$menu_item_db_id] ) ) { $sanitized_data = sanitize_text_field( $_POST['menu_item_desc'][$menu_item_db_id] ); update_post_meta( $menu_item_db_id, '_menu_item_desc', $sanitized_data ); } else { delete_post_meta( $menu_item_db_id, '_menu_item_desc' ); } } add_action( 'wp_update_nav_menu_item', 'save_menu_item_desc', 10, 2 );

С этим кодом, сохраненным в вашем файле functions.php , вы можете вернуться в панель администратора WordPress, открыть пункт меню и добавить описание в поле. Затем перейдите в свою базу данных phpMyAdmin, и вы сможете увидеть запись в таблице метабазы ​​данных сообщений.

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

Шаг третий: покажите значение поля меню

Далее мы покажем, как мы можем получить сохраненные данные полей меню и отобразить их в интерфейсном меню с помощью функции get_post_meta и хука nav_menu_item_title . Добавьте приведенный ниже код в файл functions.php .

 function show_menu_item_desc( $title, $item ) { if( is_object( $item ) && isset( $item->ID ) ) { $menu_item_desc = get_post_meta( $item->ID, '_menu_item_desc', true ); if ( ! empty( $menu_item_desc ) ) { $title .= '<p class="menu-item-desc">' . $menu_item_desc . '</p>'; } } return $title; } add_filter( 'nav_menu_item_title', 'show_menu_item_desc', 10, 2 );

nav_menu_item_title фильтрует заголовок пункта меню и находится внутри файла wp-includes/class-walker-nav-menu.php в строке 225.

Он принимает 4 параметра, строку заголовка пункта меню, текущий пункт меню, объект аргументов wp_nav_menu() и целое число, которое является глубиной пункта меню.

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

Добавьте настраиваемое поле пункта меню WordPress с помощью плагина

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

Расширенные настраиваемые поля

Чрезвычайно популярный и универсальный плагин Advanced Custom Fields еще раз демонстрирует свою мощь благодаря возможности добавлять настраиваемые поля в меню WordPress.

После того, как вы установите и активируете его, откройте плагин и нажмите кнопку «Добавить новый», чтобы добавить свои поля. Выберите «Элемент меню» в соответствии с правилами размещения. Следуйте инструкциям и обновите поля по мере необходимости.

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

Пользовательские поля меню WP

Плагин WP Menu Custom Fields — это относительно новый плагин, который, как следует из названия, поможет вам добавить настраиваемые поля в пункты меню. Вы можете добавить собственный текст, изображение, шорткод или собственный HTML.

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

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

Вывод

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

Смотрите также

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