Hoàng Web

Thiết Kế Website WordPress

  • Kho giao diện
  • Dịch Vụ
    • Tăng tốc độ WordPress
    • Tối ưu website WordPress
    • Thiết kế website WordPress
    • Viết plugin WordPress
    • Sửa lỗi nâng cấp website
  • Bảng giá
  • Quy trình làm việc
  • Giới thiệu
  • Liên Lạc
Trang chủ » Wordpress » WordPress wp_nav_menu – tùy biến hiển thị menus con theo menu kế cận

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

Thứ Ba, 07/10/2014 by Hoàng Quách

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

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

<?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.
wp_nav_menu-direct_parent

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:
wp_nav_menu-show_parent

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.
wp_nav_menu-base-parent

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

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với bạn bè bằng cách nhấn nút chia sẻ ở bên dưới. Theo dõi chúng tôi trên Twitter và Facebook

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Bài viết liên quan:

  1. Tùy biến hiển thị menus trong wordpress – Nav Menu Walker
  2. Tùy biến thêm menu item ngoài vào wp_nav_menu [WordPress]
  3. Thêm trường tùy biến cho wp_nav_menu item
  4. [WordPress] Lấy dữ liệu post_type liên kết với nav_menu_item
  5. Lấy menu item wp_nav_menu trang hiện tại trong wordpress
  6. Hiển thị wordpress submenu dưới parent menu – wp_nav_menu
  7. Thêm liên kết trang chủ vào nav menu trong wordpress
  8. Tạo menu trong wordpress
  9. Cách thêm class vào menu wp_nav_menu trong WordPress
  10. Thêm mô tả cho menu trong Genesis Child Themes

Chuyên mục: Wordpress Tìm kiếm: wp_nav_menu

Đăng ký nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Bạn đã đăng ký thành công!

Lỗi! hãy làm lại.

thông tin của bạn được 100% bảo mật...

Tôi giúp gì cho bạn?

Nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Cám ơn bạn đã đăng ký.

Lỗi, hãy làm lại

thông tin của bạn được 100% bảo mật...

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 (8h:00 – 21h:00)

Email: [email protected]

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI

  • Facebook
  • Snapchat

SẢN PHẨM

  • Plugin Auto-Sync Google Shopping cho WooCommerce
  • Phần mềm chặn click ảo
  • WP2Speed.com – Tăng tốc WordPress

LIÊN KẾT

  • Hướng dẫn thanh toán
  • Chính sách hoàn tiền
  • Trung tâm hỗ trợ

Copyright © 2021 | All rights reserved | HOANG WEB
Mọi hình thức sao chép nội dung trên website này mà chưa được sự đồng ý đều là trái phép.