Как добавить пользовательский HTML в wp_nav_menu?

Я знаком с WordPress и использую систему меню WordPress. Но я ищу способ добавить пользовательский HTML к wp_nav_menu().

Я пытаюсь создать такое меню: enter image description here

Обратите внимание, как выпадающее меню под продуктами содержит изображение и ссылку. Я хотел бы воссоздать это. Я просмотрел несколько плагинов, но скорее хотел бы закодировать его.

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

ОТВЕТЫ

Ответ 1

Способ, которым WordPress просматривает страницы меню для отображения элементов, использует объект walker. В этом случае конкретный класс для этого объекта называется Walker_Nav_Menu. Вы можете найти его в wp-includes\nav-menu-template.php.

Walker_Nav_Menu - довольно простой класс. Вы можете видеть, как там строятся ссылки и структура меню. Функции start_el и end_el используются для создания элементов меню. Функции start_lvl и end_lvl предназначены для вложенных меню. В этом подходе мы будем в основном использовать start_el и end_el.

В вашем functions.php создайте класс, чтобы расширить Walker_Nav_Menu с помощью подобных методов родительскому классу:

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
  function start_el ( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    // Copy all the start_el code from source, and modify
  }

  function end_el( &$output, $item, $depth = 0, $args = array() ) {
    // Copy all the end_el code from source, and modify
  }
}

В этих функциях $item - это ваш пункт меню, с помощью которого вы можете запросить дополнительное содержимое в соответствии с текущим пунктом меню, если хотите. Обратите внимание, что я не включил start_lvl и end_lvl, но это не имеет значения, так как ваш класс автоматически наследует методы родительских классов, если не перезаписан.

Затем в ваших файлах темы вы можете вызвать wp_nav_menu следующим образом:

wp_nav_menu(array(
  'theme_location' => 'main',
  'container' => false,
  'menu_id' => 'nav',
  'depth' => 1,
  // This one is the important part:
  'walker' => new Custom_Walker_Nav_Menu
));

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