为了制作以下输出,我使用了 wordpress 自定义 walker
class Walker_Page_Custom extends Walker_Nav_Menu {
function start_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent
<div class='nav-dropdown' style='display: block; height: 1.2534674133206636px; overflow: hidden;'>
<div class='drop-col'>
<img id='prod' src='#' rel='#' alt='Womenswear'>
<ul class='level0'>
<li id='menu-item'>
\n";
}
function end_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "$indent
</li>
</ul>
</div>
</div>
\n";
}
}
这是我当前的输出
<li id="menu-item-310" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-310">
<a href="http://localhost/wp/products-page/" class="sf-with-ul">Products Page</a>
<div class="nav-dropdown"> <!-- first one -->
<div class="drop-col"> <!-- first one -->
<img id="prod" src="" rel="" alt="Womenswear">
<ul class="level0">
<li id="menu-item-311" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-311"><a href="http://localhost/wp/products-page/your-account/">Your Account</a></li>
<li id="menu-item-312" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-312"><a href="http://localhost/wp/products-page/transaction-results/">Transaction Results</a></li>
<li id="menu-item-313" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-313"><a href="http://localhost/wp/products-page/checkout/" class="sf-with-ul">Checkout<span class="sf-sub-indicator"> »</span></a>
<div class="nav-dropdown"><!-- second one -->
<div class="drop-col"><!-- second one -->
<img id="prod" src="#" rel="#" alt="Womenswear">
<ul class="level0">
<li id="menu-item-314" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-314"><a href="http://localhost/wp/products-page/checkout/order-received/">Order Received</a></li>
<li id="menu-item-315" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-315"><a href="http://localhost/wp/products-page/checkout/pay/">Checkout ? Pay</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
如果你注意到,第一个<div class="nav-dropdown">
和<div class="drop-col">
里面有<div class="nav-dropdown">
and<div class="drop-col">
所以我需要改变第二个班级,<div class="nav-dropdown">
我们<div class="drop-col">
可以说<div class="inner-nav-down">
和<div class="inner-drop-cll">
或任何其他班级,我不在乎
有什么建议编辑这个自定义助行器来完成这项工作吗?