目前我正在为我的Wordpress主题构建一个自定义菜单,但我在一件事情上有点困难。我使用了一个walkerclass,所以我可以为我的不同菜单元素添加更多细节。除此之外,我使用自定义图标,我用一个名为menu-icons(https://github.com/kucrut/wp-menu-icons)的插件显示
但我现在对我的元素控制不够。我使用当前代码获得以下HTML导出:
<div class="menuwrapper">
<ul class="menu">
<li class="menuitem>
<a class="page" href="#">
<div class="menu-title">
<h3>
<span>Menu Title here</span>
<img src="homeicon.svg" />
</h3>
</div>
</a>
</li>
</ul>
</div>
我真正想要的是以下导出:
<div class="menuwrapper">
<ul class="menu">
<li class="menuitem>
<a class="page" href="#">
<div class="menu-title">
<h3>Menu Title here</h3>
</div>
<div class="menu-icon">
<img src="homeicon.svg" />
</div>
</a>
</li>
</ul>
</div>
要完成第一个结果,请使用以下助行器类:
<?php
class Description_Walker extends Walker_Nav_Menu{
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = str_repeat("\t", $depth);
$attributes = '';
! empty ( $item->attr_title )
and $item->attr_title !== $item->title
and $attributes .= ' title="' . esc_attr( $item->attr_title ) .'"';
! empty ( $item->url )
and $attributes .= ' href="' . esc_attr( $item->url ) .'"';
$attributes = trim( $attributes );
$title = apply_filters( 'the_title', $item->title, $item->ID );
$item_output = "$args->before<a class=\"page\" $attributes><div><h3>$args->link_before$title</h3></div></a>"
. "$args->link_after$args->after";
$output .= $indent . "<li class=\"menuitem\">";
$output .= apply_filters(
'walker_nav_menu_start_el',
$item_output,
$item,
$depth,
$args
);
}
}
?>
我现在想的是该插件正在菜单的$ title中添加图标。这就是为什么我无法将它们分开的原因。我已经浏览了插件文件以查看是否可以覆盖某些内容。但我还没能找到解决方案。如果有人能指出我正确的方向,那将是非常好的。也许有人已经对插件有过一些经验了!
亲切的问候,
的Wouter