如何检查Walker_Nav_Menu中的菜单项类别

huangapple go评论61阅读模式
英文:

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( &amp; $output, $depth = 0, $args = array()) {
    $indent = str_repeat(&quot;\t&quot;, $depth);
    if ($depth == 0) {
      $output. = &quot;\n$indent&lt;div class=&#39;sub-menu__depth-1&#39;&gt;&lt;ul class=&#39;sub-menu sub-menu__main&#39;&gt;\n&quot;;
    } else {
      $output. = &quot;\n$indent&lt;ul class=&#39;sub-menu&#39;&gt;\n&quot;;
    }
  }

  function end_lvl( &amp; $output, $depth = 0, $args = array()) {
    $indent = str_repeat(&quot;\t&quot;, $depth);
    if ($depth == 0) {
      $output. = &quot;$indent&lt;/ul&gt; &lt;
        /div&gt;\n&quot;;
    } else {
      $output. = &quot;$indent&lt;/ul&gt;\n&quot;;
    }
  }
}

<!-- 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(&amp;$output, $depth = 0, $args = array())
	{
		$indent = str_repeat(&quot;\t&quot;, $depth);
		if ($depth == 0) {
			$output .= &quot;\n$indent&lt;div class=&#39;sub-menu__depth-1&#39;&gt;&lt;ul class=&#39;sub-menu sub-menu__main&#39;&gt;\n&quot;;
		} else {
			$output .= &quot;\n$indent&lt;ul class=&#39;sub-menu&#39;&gt;\n&quot;;
		}
	}
	function end_lvl(&amp;$output, $depth = 0, $args = array())
	{
		$indent = str_repeat(&quot;\t&quot;, $depth);
		if ($depth == 0) {
    //here, a button appears outside the sub-menu if the navigation element has the class &quot;browse all&quot;
			$output .= &quot;$indent&lt;/ul&gt;
    &lt;a&gt;Browse All&lt;/a&gt;        
    &lt;/div&gt;\n&quot;;
		} else {
			$output .= &quot;$indent&lt;/ul&gt;\n&quot;;
		}
	}
}

<!-- end snippet -->

答案1

得分: 1

我不认为你可以直接在 start_lvlend_level 中进行这项操作,因为它们仅创建包装 UL。但是,它们没有你所寻找的类,这些类位于实际导航项上,这些导航项在 start_elend_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( &amp; $output, $depth = 0, $args = array()) {
    $this-&gt;needsCustomButtons[$depth] = false;
    
    // rest of the stuff that needs doing here
  }

  public function start_el( &amp;$output, $data_object, $depth = 0, $args = null, $current_object_id = 0 ) {
    // stuff

    $classes   = empty( $menu_item-&gt;classes ) ? array() : (array) $menu_item-&gt;classes;
	$classes[] = &#39;menu-item-&#39; . $menu_item-&gt;ID;

    if(in_array(&#39;browse-all&#39;, $classes)) {
      $this-&gt;needsCustomButtons[$depth] = true;
    }

    // more stuff here

  }

  function end_lvl( &amp; $output, $depth = 0, $args = array()) {
    // if $this-&gt;needsCustomButtons[$depth] is true here, then you know
    // your two extra nav items need adding, so concatenate them to
    // $output here, before the closing `&lt;/li&gt;` tag gets added.
  }
}

huangapple
  • 本文由 发表于 2023年2月8日 19:07:39
  • 转载请务必保留本文链接:https://go.coder-hub.com/75384889.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定