将div插入wp_nav_menu

时间:2012-09-11 13:07:56

标签: wordpress html menu insert

我正在尝试在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>

我怎样才能做到这一点?

1 个答案:

答案 0 :(得分:3)

你最好的选择是使用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 Here的更多信息以及有关Adding Custom Walkers Here的一些信息。