Thủ Thuật Wordpress

WordPress wp_nav_menu – tùy biến hiển thị menus con theo menu kế cận

Posted on by Tin Mới
Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài WordPress wp_nav_menu – tùy biến hiển thị menus con theo menu kế cận

Trong bài trước, mình nói tới cách lấy và hiển thị dữ liệu wp_nav_menu submenu của parent menu, bằng cách sử dụng filter wp_nav_menu_objects và tất nhiên cùng nguyên tắc đó bạn cũng có thể tùy biến menu với walker .
Với bài viết này, bạn có thêm một lựa chọn tạo menu hiển thị dựa theo parent menu hoặc mọi menu kế cận (sibling). Tạo plugin với đoạn code dưới đây hoặc có thể viết vào functions.php 

   sub_menu ) ) { $root_id = 0; // find the current menu item foreach ( $sorted_menu_items as $menu_item ) { if ( $menu_item-> current ) { // set the root id based on whether the current menu item has a parent or not $root_id = ( $menu_item-> menu_item_parent ) ? $menu_item-> menu_item_parent : $menu_item-> ID; break; } } // find the top level parent if ( ! isset( $args-> direct_parent ) ) { $prev_root_id = $root_id; while ( $prev_root_id != 0 ) { foreach ( $sorted_menu_items as $menu_item ) { if ( $menu_item-> ID == $prev_root_id ) { $prev_root_id = $menu_item-> menu_item_parent; // don't set the root_id to 0 if we've reached the top of the menu if ( $prev_root_id != 0 ) $root_id = $menu_item-> menu_item_parent; break; } } } } $menu_item_parents = array(); foreach ( $sorted_menu_items as $key =>  $item ) { // init menu_item_parents if ( $item-> ID == $root_id ) $menu_item_parents[] = $item-> ID; if ( in_array( $item-> menu_item_parent, $menu_item_parents ) ) { // part of sub-tree: keep! $menu_item_parents[] = $item-> ID; } else if ( ! ( isset( $args-> show_parent ) && in_array( $item-> ID, $menu_item_parents ) ) ) { // not part of sub-tree: away with it! unset( $sorted_menu_items[$key] ); } } return $sorted_menu_items; } else { return $sorted_menu_items; } }

Hướng dẫn sử dụng

Dữ menu gốc:
wp_nav_menu1

Hiển thị menu như bình thường với hàm wp_nav_menu , để bật tính năng hiện thị wordpress menus theo trang menu được chọn bạn khai báo thêm trường tham số ‘sub_menu’=> true. 

    'primary', 'sub_menu' =>  true ) );

Nếu muốn bỏ qua menu mẹ thì bỏ thêm giá trị ‘direct_parent’=> true. 

 wp_nav_menu( array( 'theme_location' =>  'primary', 'sub_menu' =>  true, 'direct_parent' =>  true ) );

Trong hình trên, mình chọn vào item “Portugal” được bôi mầu vàng. Sử dụng Code trên sẽ không hiển thị menu mẹ và menu kề cận tầng trên.
wp_nav_menu-direct_parent

Bạn cũng đều có thể cho hiển thị menu mẹ và toàn bộ menu cùng level với menu mẹ ở up-level 1, với tính chất ‘show_parent’=> true. Ví dụ code và hình ảnh minh họa:
wp_nav_menu-show_parent

Và nếu kích hoạt cả 2 tính chất ‘show_parent’ & ‘direct_parent’ thì kết quả hiển thị các submenu và menu mẹ của nó mà thôi.
wp_nav_menu-base-parent

Link demo: http://wp-sub-menu-demo.christianvarga.com/locations/europe/portugal/

Để nhận được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng cũng có thể thu được sự trợ giúp trên Twitter và Facebook

Bài viết WordPress wp_nav_menu – tùy biến hiển thị menus con theo menu kế cận được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan

Bài Viết Khác


Quảng cáo
Ads_ngang