wordpress - 将 div 插入 wp_nav_menu

Question

我正在尝试在 wordpress 的导航菜单中添加一个 div。wp_nav_menu 加载所有菜单项，但我不知道如何将 div 添加到结构中。我的目标是在菜单项悬停时弹出一个子菜单，并在子菜单块的顶部有一个箭头图像，使其看起来像一个方形文本气球。我知道如何将它放在我想要的地方以及所有内容，但不知道如何将 div 放在那里。

现在，看起来像这样

<ul class="menu">
 <li>
  <a>
   <ul class="submenu">
    <li>
     <a>

我希望它看起来像这样

<ul class="menu">
 <li>
  <a>
   <ul class="submenu">
    <div class="pointer">
     <li>
      <a>

我怎样才能做到这一点？

Answer 1

你最好的选择是使用 Walker Class。将此添加到您的 functions.php 文件中：

class Walker_Nav_Pointers extends Walker_Nav_Menu
{
    function start_lvl( &$output, $depth = 0, $args = array() )
    {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"sub-menu\">\n";
        $output .= "\n<div class=\"pointer\">\n";
    }
    function end_lvl( &$output, $depth = 0, $args = array() )
    {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul>\n".($depth ? "$indent</div>\n" : "");
    }
}

然后无论您在哪里调用导航菜单，都将其添加到现有参数中：

<?php
$navArgs = array('walker' => new Walker_Nav_Pointers());
wp_nav_menu($navArgs);
?>

上面的例子未经测试，我不能保证它会直接运行，但它应该让你开始。

更多关于WP Nav Menus的信息和一些关于Add Custom Walkers的信息。