将 div 插入 wp_nav_menu

Posted 2023-03-05

【中文标题】将 div 插入 wp_nav_menu

【英文标题】：Inserting a div into wp_nav_menu

【发布时间】：2012-09-04 10:15:08

【问题描述】：

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

您最好的选择是使用 Walker 课程。将此添加到您的 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的信息。