将div插入wp_nav_menu [英] Inserting a div into wp_nav_menu

问题描述

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

I'm trying to add a div to my navigation menu in wordpress. wp_nav_menu loads all menu items but I have no idea how to add a div into the structure. My goal is to have a submenu pop up on menu-item hover, and to have an arrow image on top of the submenu block to make it look like a square text-balloon. I know how to get it where I want it and everything, but not how to get the div in there.

现在，看起来像这样

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

我希望它看起来像这样

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

我该如何实现?

推荐答案

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

Your best bet would be to use a Walker Class. Add this in your functions.php file:

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" : "");
    }
}

然后在调用导航菜单的任何位置，将其添加到现有参数中:

And then wherever you're calling your nav menu, add this to the existing arguments:

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

上面的示例未经测试，我不能保证它可以直接运行，但是应该可以帮助您入门.

The above example is untested and I can't guarantee it will work straight out of the gate, but it should get you started.

有关 WP导航菜单的详细信息以及有关

More information on WP Nav Menus Here and some information on Adding Custom Walkers Here.

这篇关于将div插入wp_nav_menu的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！