WordPress 修改 Walker_Nav_Menu 時，將’has_children’ 類新增到父級

問題描述

我正在為 wp_nav_menu 編寫一個自定義的 walker 類，並希望能夠指定 li 是否包含子選單。所以我想要我的標記是：

<li class="has_children [other-wordpress-classes]">
    <a class="parent-link">Some item</a>
    <ul class="sub-menu">

我知道如何新增和刪除課程，我只是找不到任何東西告訴我，如果當前專案有子專案。

有任何想法嗎？

提前致謝。

最佳解決方案

start_el()應該在 $args 引數中獲取此資訊，但是如果 $args 是一個陣列，則 WordPress 只會填寫此資訊，而對於自定義導航選單則是 WordPress 的一個物件。這在 a Trac ticket 中報道。但是沒有問題，您可以自己填寫，如果您還可以在自定義步行者中覆蓋 display_element()方法 (因為這是訪問子元素陣列最簡單的地方)：

class WPSE16818_Walker extends Walker_Nav_Menu
{
    function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output )
    {
        $id_field = $this->db_fields['id'];
        if ( is_object( $args[0] ) ) {
            $args[0]->has_children = ! empty( $children_elements[$element->$id_field] );
        }
        return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }

    function start_el( &$output, $item, $depth, $args ) {
        if ( $args->has_children ) {
            // ...
        }
    }

次佳解決方案

更新：從 WordPress 3.7(2013 年 10 月) 開始，新增 CSS 類以在主題選單中指示子選單項和頁面 – 無需使用自定義步行器，因為它在 WordPress 核心中處理。

CSS 類名為 menu-item-has-children 和 page_item_has_children 。

對於任何人匆忙的完整解決方案 (信用於 Jan Fabry 之前的答案)，請參閱下面的完整實現。

輸出主題模板中的導航：

wp_nav_menu( array(
    'theme_location' => 'navigation-primary',
    'container' => false,
    'container_class' => '',
    'container_id' => '',
    'menu_class' => '',
    'menu_id' => '',
    'walker' => new Selective_Walker(),
    'depth' => 2
    )
);

然後，在主題的 functions.php 中包含以下內容：

class Selective_Walker extends Walker_Nav_Menu {
    function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
        $id_field = $this->db_fields['id'];

        if ( is_object( $args[0] ) ) {
            $args[0]->has_children = !empty( $children_elements[$element->$id_field] );
        }

        return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }

    function start_el( &$output, $item, $depth, $args ) {
        if ( $args->has_children ) {
            $item->classes[] = 'has_children';
        }

        parent::start_el(&$output, $item, $depth, $args);
    }
}

生成的 HTML 輸出將類似於以下內容：

<ul>
    <li><a href="#">Home</a></li>
    <li class="has_children"><a href="#">About</a>
        <ul class="sub-menu">
            <li><a href="#">Our Mission</a></li>
        </ul>
    </li>
    <li><a href="#">Services</a></li>
    <li class="has_children"><a href="#">Products</a>
        <ul class="sub-menu">
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
        </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
</ul>

有關使用 WordPress’walker 類的更多資訊，請參閱 Understanding the Walker Class 。

請享用！

參考文獻

Add ‘has_children’ class to parent li when modifying Walker_Nav_Menu

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

WordPress 修改 Walker_Nav_Menu 時，將’has_children’ 類新增到父級