如何将自定义HTML添加到wp_nav_menu？

Question

我熟悉WordPress并使用WordPress菜单系统.但我正在寻找一种方法来添加自定义HTML wp_nav_menu().

我正在尝试创建一个这样的菜单:

请注意产品下的下拉菜单如何包含图像和链接.我想重新创造这个.我看了几个插件,但宁可编码.

我不介意硬编码图像和链接,但我想保持使用WordPress管理菜单的灵活性.

Answer 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将使用您的自定义类和函数,以便您可以修改输出的代码.