Thêm lớp 'has_children' vào cha mẹ li khi sửa đổi Walker_Nav_Mothy

Tôi đang viết một lớp walker tùy chỉnh cho wp_nav_menu và muốn có thể chỉ định nếu một li có chứa menu con. Vì vậy, tôi muốn đánh dấu của tôi là:

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

Tôi biết làm thế nào để thêm và loại bỏ các lớp tốt, tôi không thể tìm thấy bất cứ điều gì để cho tôi biết nếu mặt hàng hiện tại có mặt hàng trẻ em.

Có ý kiến ​​gì không?

Cảm ơn trước.

start_el()sẽ nhận được thông tin này trong $argstham số của nó , nhưng có vẻ như WordPress chỉ điền thông tin này vào nếu $argslà một mảng , trong khi đối với các menu điều hướng tùy chỉnh thì đó là một đối tượng. Điều này được báo cáo trong một vé Trac . Nhưng không có vấn đề gì, bạn có thể tự điền cái này vào, nếu bạn cũng ghi đè display_element()phương thức trong walker tùy chỉnh của mình (vì đây là nơi dễ nhất để truy cập vào mảng phần tử con):

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

Cập nhật: Kể từ WordPress 3.7 (tháng 10 năm 2013), các lớp CSS đã được thêm vào để chỉ ra các mục và trang menu con trong menu chủ đề - không cần sử dụng trình đi bộ tùy chỉnh như được chăm sóc trong lõi WordPress.

Các lớp CSS được đặt tên menu-item-has-childrenvà page_item_has_children.

Để biết giải pháp hoàn chỉnh cho bất kỳ ai đang vội (ghi có vào câu trả lời trước của Jan Fabry), hãy xem phần thực hiện đầy đủ bên dưới.

Xuất điều hướng trong mẫu của chủ đề của bạn:

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

Sau đó, bao gồm các mục sau trong chủ đề của bạn 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);
    }
}

Kết quả đầu ra HTML sẽ giống như sau:

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

Để biết thêm thông tin về việc sử dụng lớp walker của WordPress, hãy xem Tìm hiểu về Walker Class .

Thưởng thức!

Chức năng này là chính xác những gì bạn muốn có. Nó cũng cho bạn thấy một cách khá hiệu quả để sửa đổi các mục menu điều hướng. Hơn nữa, bạn có thể mở nó cho các chức năng nâng cao hơn (ví dụ: chủ đề con) thông qua bộ lọc mục:

/**
 * 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 );

Và vâng, có - trong gần như mọi trường hợp - không cần một người đi bộ tùy chỉnh.

nếu bạn muốn thực hiện thả xuống, bạn chỉ có thể làm điều đó với css. thực hiện điều hướng tùy chỉnh trong WP với trẻ em, WordPress tự động gán lớp .sub-menu cho con ul. Hãy thử CSS này

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

Bạn có thể muốn thêm một số jQuery để thêm vào một chút, nhưng điều này sẽ cung cấp cho bạn một menu thả xuống hoạt động.

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