Wordpress：自定义 wp_nav_menu 的输出，在嵌套 ul 之前添加一个 div

Posted 2023-04-13

【中文标题】Wordpress：自定义 wp_nav_menu 的输出，在嵌套 ul 之前添加一个 div

【英文标题】：Wordpress: Customising output of wp_nav_menu, adding a div before nested ul

【发布时间】：2011-04-11 14:11:28

【问题描述】：

我正在构建一个使用大型下拉式菜单的网站，该菜单使用包含子菜单嵌套 ul 周围的 div 来设置样式。

有人知道如何自定义由 Wordpress (wp_nav_menu) 生成的菜单的输出，以在嵌套的子菜单 ul 周围添加包含 div 吗？

有两个参数是

'之前' => '', '之后' => '',

但不幸的是，这些仅在实际链接之前添加内容，而不是整个子菜单。

如果您有任何指示或在我真的很感激之前已经这样做了。

干杯，

戴夫

【参考方案1】：

设法解决了这个问题！

使用自定义walker（您将其放入主题functions.php文件中）如下添加包含div的

class Walker_Page_Custom extends Walker_Nav_Menu 
/**
 * @see Walker::start_lvl()
 * @since 2.1.0
 *
 * @param string $output Passed by reference. Used to append additional content.
 * @param int $depth Depth of page. Used for padding.
 */
function start_lvl(&$output, $depth) 
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<div class='sub'><div class='sub-top'><!-- --></div><!--sub-left --><div class='sub-mid'><ul>\n";


/**
 * @see Walker::end_lvl()
 * @since 2.1.0
 *
 * @param string $output Passed by reference. Used to append additional content.
 * @param int $depth Depth of page. Used for padding.
 */
function end_lvl(&$output, $depth) 
    $indent = str_repeat("\t", $depth);
    $output .= "$indent</ul><span class='clear'><!-- --></span></div><!--sub-mid --><div class='sub-bottom'><!-- --></div><!--sub-bottom --><span class='clear'><!-- --></span></div><!--sub -->\n";

然后将其包含在 wp_nav_menu 数组中，如下所示

 'walker' => new Walker_Page_Custom

希望这对某人有所帮助！

戴夫

【讨论】：

别忘了 start_el 和 end_el 方法！