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 về 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 lý đó 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 trên 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

<?php
 
// add hook
add_filter( 'wp_nav_menu_objects', 'my_wp_nav_menu_objects_sub_menu', 10, 2 );
 
// filter_hook function to react on sub_menu flag
function my_wp_nav_menu_objects_sub_menu( $sorted_menu_items, $args ) {
  if ( isset( $args->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:

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.

<?php
 
wp_nav_menu( array(
  'theme_location' => 'primary',
  'sub_menu' => true
) );

Nếu muốn bỏ qua menu mẹ thì 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.

Bạn 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 thuộc tính ‘show_parent’=>true. Ví dụ code và hình ảnh minh họa:

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

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

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook