向 WordPress 导航项添加额外的 div
Posted
技术标签:
【中文标题】向 WordPress 导航项添加额外的 div【英文标题】:Add extra div to WordPress nav items 【发布时间】:2020-12-17 02:21:00 【问题描述】:改变我的 wp-menu 生成输出的最简单方法是什么
<ul class="primary-menu">
<li class="menu-item">
<a href="">nav link</a>
<ul class="sub-menu"></ul>
</li>
</ul>
到
<ul class="primary-menu">
<li class="menu-item">
<div class="alignme">
<button></button><a href=""></a><button></button>
</div>
<ul class="sub-menu"></ul>
</li>
</ul>
?
我需要这种“辅助 div”,因为我必须以某种方式对齐三个元素,并且独立于 li 内可能的其他内容(例如子菜单)。
我正在使用默认的 wp_nav_menu() 并且作为第一次主题构建器,我不知道在哪里可以找到菜单的“设置”。知道我应该仔细看看哪里吗?
【问题讨论】:
您可以使用wordpress wp_nav_menu() 函数参考此网址developer.wordpress.org/reference/functions/wp_nav_menu 【参考方案1】:在 wp_nav_menu "new Add_Div_Walker" 中添加 walker 类。检查我下面的代码。
$menu = array(
'theme_location' => 'primary',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'walker' => new Add_Div_Walker
);
wp_nav_menu( $menu );
// add this below code in your functions.php file.
class Add_Div_Walker extends Walker_Nav_Menu
function start_lvl( &$output, $depth = 0, $args = array() )
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<div class='alignme'>
<button></button><a href=''></a><button></button>
</div><ul class='submenu'>\n";
function end_lvl( &$output, $depth = 0, $args = array() )
$indent = str_repeat("\t", $depth);
$output .= "$indent</ul>\n";
【讨论】:
以上是关于向 WordPress 导航项添加额外的 div的主要内容,如果未能解决你的问题,请参考以下文章
php Wordpress菜单/导航----将.active类添加到活动菜单项---- Bootstrap Nav Walker