Thêm Caret vào các mục menu với Menu phụ trong WordPress Theme

Tôi đang làm việc trên một chủ đề tùy chỉnh bằng cách sử dụng wp_nav_menu (). Những gì tôi muốn làm là thêm một dấu mũ vào các mục menu có menu phụ. Ví dụ: Nếu menu của tôi trông như thế này:

• Mục menu 1
• Mục 2
  • Mục menu 2a
  • Mục menu 2b
• Mục 3

Tôi muốn có thể định dạng nó như thế này:

• Danh sách mục
• Mục menu 1
• Mục menu 2>
  • Mục menu 2a
  • Mục menu 2b
• Mục 3

Mà không biết cấu trúc của menu. Đây có vẻ như là một vấn đề định dạng khá phổ biến, vì vậy tôi đã tự hỏi liệu có bất kỳ chức năng tích hợp nào để cung cấp cho việc này không.

Tôi làm điều này bằng cách sử dụng jQuery (vì nó không nhất thiết phải ở trong văn bản (đối với trình đọc màn hình, v.v.) - chỉ là một tùy chọn khác ...:

jQuery(document).ready(function() {
  jQuery('ul#nav li').has('ul').addClass('parentul');
});

Sau đó, với lớp "Parentul" đó, tôi đặt một hình nền của một mũi tên và đặt nó sang bên phải> ...

Bạn có thể làm điều này bằng cách sử dụng một walker tùy chỉnh. Dán lớp sau vào cuối hàm của bạn.php:

class Nfr_Menu_Walker extends Walker_Nav_Menu{

                /**
         * Traverse elements to create list from elements.
         *
         * Display one element if the element doesn't have any children otherwise,
         * display the element and its children. Will only traverse up to the max
         * depth and no ignore elements under that depth. It is possible to set the
         * max depth to include all depths, see walk() method.
         *
         * This method shouldn't be called directly, use the walk() method instead.
         *
         * @since 2.5.0
         *
         * @param object $element Data object
         * @param array $children_elements List of elements to continue traversing.
         * @param int $max_depth Max depth to traverse.
         * @param int $depth Depth of current element.
         * @param array $args
         * @param string $output Passed by reference. Used to append additional content.
         * @return null Null on failure with no changes to parameters.
         */
        function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {

                if ( !$element )
                        return;

                $id_field = $this->db_fields['id'];

                //display this element
                if ( is_array( $args[0] ) )
                        $args[0]['has_children'] = ! empty( $children_elements[$element->$id_field] );

                //Adds the 'parent' class to the current item if it has children               
                if( ! empty( $children_elements[$element->$id_field] ) ) {
                        array_push($element->classes,'parent');
                        $element->title .= ' >';
                }

                $cb_args = array_merge( array(&$output, $element, $depth), $args);

                call_user_func_array(array(&$this, 'start_el'), $cb_args);

                $id = $element->$id_field;

                // descend only when the depth is right and there are childrens for this element
                if ( ($max_depth == 0 || $max_depth > $depth+1 ) && isset( $children_elements[$id]) ) {

                        foreach( $children_elements[ $id ] as $child ){

                                if ( !isset($newlevel) ) {
                                        $newlevel = true;
                                        //start the child delimiter
                                        $cb_args = array_merge( array(&$output, $depth), $args);
                                        call_user_func_array(array(&$this, 'start_lvl'), $cb_args);
                                }
                                $this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output );
                        }
                        unset( $children_elements[ $id ] );
                }

                if ( isset($newlevel) && $newlevel ){
                        //end the child delimiter
                        $cb_args = array_merge( array(&$output, $depth), $args);
                        call_user_func_array(array(&$this, 'end_lvl'), $cb_args);
                }

                //end this element
                $cb_args = array_merge( array(&$output, $element, $depth), $args);
                call_user_func_array(array(&$this, 'end_el'), $cb_args);
        }
}

Và sau đó trong header.php (hoặc bất cứ khi nào wp_nav_menu của bạn) làm điều gì đó như thế này:

<?php
    $walker = new Nfr_Menu_Walker(); 
    wp_nav_menu( array( 'theme_location' => 'primary', 'walker' => $walker ) ); 
?>

Phần chính của walker là câu lệnh if sau:

if( ! empty( $children_elements[$element->$id_field] ) ) {
                    array_push($element->classes,'parent');
                    $element->title .= ' >';
}

Điều này kiểm tra xem mục đó có con hay không và nếu nó thêm lớp css 'cha mẹ' vào nó, sau đó thay đổi tiêu đề từ 'xxxx' thành 'xxxx>'.

(Chuyển thể từ http://wordpress.org/support/topic/wp_nav_menu-add-a-parent- class )

Ngày nay, có vẻ như chính WordPress sẽ tạo ra một menu-item-has-childrenlớp trên menu licó một ul.sub-menu.

Người ta có thể dễ dàng thêm các kiểu vào đây để thêm ảnh nền thay vì phải sử dụng jQuery hoặc tương tự.