Tambahkan kelas 'has_children' ke induk li saat memodifikasi Walker_Nav_Menu

Saya sedang menulis kelas walker yang disesuaikan untuk wp_nav_menu dan ingin dapat menentukan apakah li berisi submenu. Jadi saya ingin markup saya menjadi:

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

Saya tahu cara menambah dan menghapus kelas dengan baik, saya tidak bisa menemukan apa pun untuk memberi tahu saya jika item saat ini memiliki item anak-anak.

Ada ide?

Terima kasih sebelumnya.

start_el()harus mendapatkan informasi ini dalam $argsparameternya, tetapi tampaknya WordPress hanya mengisinya jika $argsarray , sedangkan untuk menu navigasi khusus, itu adalah objek. Ini dilaporkan dalam tiket Trac . Tapi tidak masalah, Anda bisa mengisinya sendiri, jika Anda juga mengganti display_element()metode di custom walker Anda (karena ini adalah tempat termudah untuk mengakses larik elemen anak):

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 ) {
            // ...
        }
    }

Pembaruan: Pada WordPress 3.7 (Oktober 2013), kelas-kelas CSS telah ditambahkan untuk menunjukkan item menu anak dan halaman dalam menu tema - tidak perlu menggunakan custom walker seperti yang dijaga di inti WordPress.

Kelas CSS diberi nama menu-item-has-childrendan page_item_has_children.

Untuk solusi lengkap bagi siapa saja yang sedang terburu-buru (memuji jawaban Jan Fabry sebelumnya), lihat implementasi lengkap di bawah ini.

Keluarkan navigasi dalam templat tema Anda:

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

Kemudian, masukkan hal-hal berikut dalam tema Anda 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);
    }
}

Output HTML yang dihasilkan akan menyerupai berikut ini:

<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>

Untuk informasi lebih lanjut tentang penggunaan kelas walker WordPress, lihat Memahami Kelas Walker .

Nikmati!

Fungsi ini persis apa yang Anda inginkan. Ini juga menunjukkan Anda cara yang cukup efektif untuk memodifikasi item menu nav. Selain itu, Anda dapat membukanya untuk fungsi yang lebih lanjut (mis. Tema anak) melalui filter item:

/**
 * Classes for a navigation named "Topnav" in the nav location "top".
 * Shows examples on how to modify the current nav menu item
 * 
 * @param (object) $items
 * @param (object) $menu
 * @param (object) $args
 */
function wpse16818_nav_menu_items( $items, $menu, $args )
{
    # >>>> start editing

    // examples for possible targets
    $target['name'] = 'Topnav';
    // The targeted menu item/s
    $target['items'] = array( (int) 6 );

    # <<<< stop editing

    // filter for child themes: "config_nav_menu_topnav"
    $target = apply_filters( 'config_nav_menu_'.strtolower( $target['name'] ), $target );

    // Abort if we're not with the named menu
    if ( $menu->name !== $target['name'] ) 
        return;

    foreach ( $items as $item )
    {
        // Check what $item contains
        echo '<pre>'; print_r($item); echo '</pre>';

        // First real world example:
        $item->classes = 'span-4';

        // Second real world example:
        // Append this class if we are in one of the targeted items
        if ( in_array( (int) $item->menu_order, $target['items'] ) )
            $item->classes .= ' last';
    }

    return $items;
}
add_filter( 'wp_get_nav_menu_items', 'wpse16818_nav_menu_items', 10, 3 );

Dan ya, hampir setiap kasus - tidak perlu walker khusus.

jika Anda ingin membuat drop down, Anda dapat melakukannya dengan css saja. membuat kustom nav di WP dengan anak-anak, WordPress secara otomatis menetapkan kelas .sub-menu ke child ul. Coba CSS ini

    nav li {position:relative;}
   .sub-menu {display:none; position:absolute; width:300px;}
    nav ul li:hover ul {display:block;}

Anda mungkin ingin menambahkan beberapa jQuery untuk membuatnya sedikit, tetapi ini akan memberi Anda menu drop down yang berfungsi.

if ( $this->has_children ) {
    $item_output .= 'has_children';
}