正文

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

 2023-04-13  64

关键词：

【中文标题】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 方法！

不同类别/页面/帖子的wordpress自定义菜单

....org/Function_Reference/register_nav_menus,"register_nav_menus")[wp_nav_menu](http://codex.wordpress.org/Function_Reference/wp_nav_menu,"wp_nav_menu")[in_category](http://codex.wordpress.org/Function_Reference/in_category,"in_category")[is_category](http://codex.wordpre... 查看详情

为自定义 Wordpress 主题创建下拉菜单

...添加了列表页面标签，但没有出现下拉菜单。这是我用于wp_nav_menu函数的代码。<?phpwp_head();?></head><body> 查看详情

wordpress 中 wp_nav_menu 的 container_class 中的多个类

】wordpress中wp_nav_menu的container_class中的多个类【英文标题】：multipleclassesincontainer_classofwp_nav_menuinwordpress【发布时间】：2013-08-0700:50:26【问题描述】：我正在将wordpress与twitterbootstrap一起使用，其中试图设计一个导航菜单...我已经... 查看详情

wp_nav_menu 更改子菜单类名？

】wp_nav_menu更改子菜单类名？【英文标题】：wp_nav_menuchangesub-menuclassname?【发布时间】：2011-06-2910:07:00【问题描述】：有没有办法将WordPress自己生成的子<ulclass="sub-menu">更改为自定义类名？我知道父<ul>... 查看详情

php将自定义链接添加到使用wp_nav_menu（）函数的菜单的末尾(代码片段)

查看详情

如何在 WordPress 中使用 wp_get_nav_menu_items 生成自定义菜单/子菜单系统？

...间】：2012-08-0917:57:45【问题描述】：我有一个需要自定义wp_nav_menu代码的html结构。这是我需要生成的html：<ulcla 查看详情

在 wp_nav_menu Wordpress+Symfony 中更改 URL

】在wp_nav_menuWordpress+Symfony中更改URL【英文标题】：ChangingURL\'sinwp_nav_menuWordpress+Symfony【发布时间】：2018-07-0323:33:35【问题描述】：在我的symfony项目中，我尝试使用wordpress作为免费的用户友好的内容管理器。我的问题是，当我尝... 查看详情

如何在函数中定位特定的 wordpress 菜单（wp_nav_menu）？

】如何在函数中定位特定的wordpress菜单（wp_nav_menu）？【英文标题】：Howtotargetspecificwordpressmenus(wp_nav_menu)inafunction?【发布时间】：2019-10-2904:13:18【问题描述】：我想创建一个函数，它可以用图标自动替换一个特定菜单中的菜单项... 查看详情

Wordpress 3.5 - 如何仅使用 wp_nav_menu 显示父级的子菜单？

】Wordpress3.5-如何仅使用wp_nav_menu显示父级的子菜单？【英文标题】：Wordpress3.5-Howtoonlyshowthesubmenuofaparentwithwp_nav_menu?【发布时间】：2013-02-2302:41:33【问题描述】：我想找到使用wp_nav_menu函数获取特定页面的子列表（存储在外观>... 查看详情

如何在 Wordpress 中使用 wp_nav_menu() 在 <li> 中添加类？

】如何在Wordpress中使用wp_nav_menu()在<li>中添加类？【英文标题】：HowtoaddClassin<li>usingwp_nav_menu()inWordpress?【发布时间】：2013-01-0600:49:43【问题描述】：我正在使用wp_nav_menu($args)，我想将my_own_classCSS类名添加到<li>... 查看详情

如何将不同的样式应用于 Wordpress wp_nav_menu()

】如何将不同的样式应用于Wordpresswp_nav_menu()【英文标题】：HowtoapplydifferentstyletoWordpresswp_nav_menu()【发布时间】：2010-09-0908:22:41【问题描述】：我正在使用Wordpress3.0。是否可以将不同的样式类应用于wordpresswp_nav_menu()？目前我有五... 查看详情

如何在 WordPress 的“wp_nav_menu”子菜单中的 <a>-tag 中添加类和元素？

】如何在WordPress的“wp_nav_menu”子菜单中的<a>-tag中添加类和元素？【英文标题】：Howtoaddclassandelementto<a>-taginsub-menuof"wp_nav_menu"inWordPress?【发布时间】：2012-10-2102:28:53【问题描述】：我想在链接内的sub-menu和b标记... 查看详情

WordPress > 从自定义帖子类型获取自定义分类

】WordPress>从自定义帖子类型获取自定义分类【英文标题】：WordPress>Getcustomtaxonomyfromacustomposttype【发布时间】：2016-10-2805:24:14【问题描述】：InstalledCustomPostTypeUIwordpressplugin创建了自定义帖子类型=\'products\'使用注册了一个自... 查看详情

Wordpress - 自定义字段

】Wordpress-自定义字段【英文标题】：Wordpress-CustomFields【发布时间】：2011-03-2109:16:06【问题描述】：在wordpress页面的主要内容区域中，我使用phpinclude添加了一些脚本。在包含脚本中，我可以使用the_meta()显示自定义字段值。但是... 查看详情

WordPress 自定义注册表单

】WordPress自定义注册表单【英文标题】：WordpressCustomRegistrationForm【发布时间】：2011-11-2714:11:35【问题描述】：我有一个需要自定义注册表单的客户。我需要在此页面上进行自定义设计我需要添加自定义字段，例如名字、公司、... 查看详情

Wordpress 自定义帖子类型类别

】Wordpress自定义帖子类型类别【英文标题】：Wordpresscustomposttypecategories【发布时间】：2011-06-2412:07:27【问题描述】：嘿。我在wordpress中使用自定义帖子类型。我像这样注册这个自定义帖子类型：register_post_type("lifestream",array(\'label... 查看详情

WordPress 菜单位于标题之外

...到主页以外的页面，那么我的标题会更改布局。除了函数wp_nav_menu之外，一切正常。首先，我检查用户是否在主页上。根据该结果，向用户显示两个标题之一。代码如下：<?php$menu=wp_nav_menu(array(\'theme 查看详情

通过自定义日期字段的 Wordpress 自定义存档页面链接

】通过自定义日期字段的Wordpress自定义存档页面链接【英文标题】：Wordpresscustomizedarchivepagelinkviacustomdatefield【发布时间】：2014-12-2218:28:28【问题描述】：我自定义了一个WordPress存档页面，该页面显示了一个由名为“email_blast_date... 查看详情