英文:
How to check menu item class in Walker_Nav_Menu
问题
我有一个自定义的WordPress两级菜单。有一个上级菜单,当你悬停在项目上时,会出现一个子菜单。子菜单中有两个项目具有一个在其他子菜单中没有的按钮。这两个段落具有“浏览所有”类。我需要在Walker_Nav_Menu中检查这个类,并向子菜单添加一个自定义按钮。如何检查“浏览所有”类?
在我的代码中,我正在创建ul.sub-menu的包装器。我需要检查元素中是否有“浏览所有”类,以便向这个包装器添加一个按钮。这样的按钮只会出现在具有“浏览所有”类的项目中。
class My_Walker extends Walker_Nav_Menu {
function start_lvl(&$output, $depth = 0, $args = array()) {
$indent = str_repeat("\t", $depth);
if ($depth == 0) {
$output .= "\n$indent<div class='sub-menu__depth-1'><ul class='sub-menu sub-menu__main'>\n";
} else {
$output .= "\n$indent<ul class='sub-menu'>\n";
}
}
function end_lvl(&$output, $depth = 0, $args = array()) {
$indent = str_repeat("\t", $depth);
if ($depth == 0) {
$output .= "$indent</ul>";
// 在具有“浏览所有”类的导航元素外部显示按钮
$output .= "<a>Browse All</a>";
$output .= "</div>\n";
} else {
$output .= "$indent</ul>\n";
}
}
}
以下是所需的示例:
class My_Walker extends Walker_Nav_Menu {
function start_lvl(&$output, $depth = 0, $args = array()) {
$indent = str_repeat("\t", $depth);
if ($depth == 0) {
$output .= "\n$indent<div class='sub-menu__depth-1'><ul class='sub-menu sub-menu__main'>\n";
} else {
$output .= "\n$indent<ul class='sub-menu'>\n";
}
}
function end_lvl(&$output, $depth = 0, $args = array()) {
$indent = str_repeat("\t", $depth);
if ($depth == 0) {
// 在具有“浏览所有”类的导航元素外部显示按钮
$output .= "$indent</ul><a>Browse All</a></div>\n";
} else {
$output .= "$indent</ul>\n";
}
}
}
请注意,上述示例中的注释提到了在具有“浏览所有”类的导航元素外部显示按钮。你可以根据需要修改按钮的文本和样式。
英文:
I have a custom two level menu in WordPress. There is an upper level and when you hover over the items, a submenu appears. Two menu items in the submenu have a button that is not in the other submenus. These two paragraphs have a "browse all" class. I need to check this class in Walker_Nav_Menu and add a custom button to the submenu. How can I check for class "browse all"?
In my code I'm creating a wrapper for ul.sub-menu. I need to check if there is a "browse all" class in the element in order to add a button to this wrapper. Such a button will only be in items with the "browse all" class.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
class My_Walker extends Walker_Nav_Menu {
function start_lvl( & $output, $depth = 0, $args = array()) {
$indent = str_repeat("\t", $depth);
if ($depth == 0) {
$output. = "\n$indent<div class='sub-menu__depth-1'><ul class='sub-menu sub-menu__main'>\n";
} else {
$output. = "\n$indent<ul class='sub-menu'>\n";
}
}
function end_lvl( & $output, $depth = 0, $args = array()) {
$indent = str_repeat("\t", $depth);
if ($depth == 0) {
$output. = "$indent</ul> <
/div>\n";
} else {
$output. = "$indent</ul>\n";
}
}
}
<!-- end snippet -->
Below is an example of how it should be:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
class My_Walker extends Walker_Nav_Menu
{
function start_lvl(&$output, $depth = 0, $args = array())
{
$indent = str_repeat("\t", $depth);
if ($depth == 0) {
$output .= "\n$indent<div class='sub-menu__depth-1'><ul class='sub-menu sub-menu__main'>\n";
} else {
$output .= "\n$indent<ul class='sub-menu'>\n";
}
}
function end_lvl(&$output, $depth = 0, $args = array())
{
$indent = str_repeat("\t", $depth);
if ($depth == 0) {
//here, a button appears outside the sub-menu if the navigation element has the class "browse all"
$output .= "$indent</ul>
<a>Browse All</a>
</div>\n";
} else {
$output .= "$indent</ul>\n";
}
}
}
<!-- end snippet -->
答案1
得分: 1
我不认为你可以直接在 start_lvl
或 end_level
中进行这项操作,因为它们仅创建包装 UL。但是,它们没有你所寻找的类,这些类位于实际导航项上,这些导航项在 start_el
和 end_el
中进行处理/渲染。
但我想你可以向该类添加一个属性,一个数组 - 并在其中保存信息,即特定深度的当前(子)菜单是否需要添加这些额外元素,或者不需要。
class My_Walker extends Walker_Nav_Menu {
private $needsCustomButtons = [];
function start_lvl( & $output, $depth = 0, $args = array()) {
$this->needsCustomButtons[$depth] = false;
// 在这里执行其他需要的操作
}
public function start_el( & $output, $data_object, $depth = 0, $args = null, $current_object_id = 0 ) {
// 执行其他操作
$classes = empty( $menu_item->classes ) ? array() : (array) $menu_item->classes;
$classes[] = 'menu-item-' . $menu_item->ID;
if(in_array('browse-all', $classes)) {
$this->needsCustomButtons[$depth] = true;
}
// 在这里执行更多操作
}
function end_lvl( & $output, $depth = 0, $args = array()) {
// 如果 $this->needsCustomButtons[$depth] 在这里为 true,那么你知道
// 需要添加两个额外的导航项,因此在添加结束的 `</li>` 标签之前,将它们连接到 $output 中。
}
}
注意:以上代码示例中包含了你的代码片段,并添加了一些注释以便理解。
英文:
I don't think you can do that directly in start_lvl
or end_level
- because those only create the wrapping UL. But that one doesn't have the classes you are looking for, those are on the actual navigation items, and those are processed/rendered in start_el
and end_el
.
But I suppose you could add a property to the class, an array - and in that one you keep the info, whether the current (sub-)menu of the specific depth requires these additional elements to be added, or not.
class My_Walker extends Walker_Nav_Menu {
private $needsCustomButtons = [];
function start_lvl( & $output, $depth = 0, $args = array()) {
$this->needsCustomButtons[$depth] = false;
// rest of the stuff that needs doing here
}
public function start_el( &$output, $data_object, $depth = 0, $args = null, $current_object_id = 0 ) {
// stuff
$classes = empty( $menu_item->classes ) ? array() : (array) $menu_item->classes;
$classes[] = 'menu-item-' . $menu_item->ID;
if(in_array('browse-all', $classes)) {
$this->needsCustomButtons[$depth] = true;
}
// more stuff here
}
function end_lvl( & $output, $depth = 0, $args = array()) {
// if $this->needsCustomButtons[$depth] is true here, then you know
// your two extra nav items need adding, so concatenate them to
// $output here, before the closing `</li>` tag gets added.
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论