Hướng dẫn sử dụng hàm wp_nav_menu trong WordPress

Hàm wp_nav_menu() trong WordPress giúp hiển thị menu điều hướng trên website. Đây là một chức năng quan trọng khi thiết kế giao diện tùy chỉnh và tối ưu trải nghiệm người dùng.

Sử dụng wp_nav_menu

Hàm này có cú pháp như sau:

wp_nav_menu( array $args = array() ); 

Ví dụ cơ bản

wp_nav_menu(array(
    'theme_location' => 'primary',
    'menu_class'     => 'nav-menu',
    'container'      => 'nav',
    'container_class'=> 'main-navigation'
));

Danh sách đầy đủ các tham số của wp_nav_menu():

• menu (string): Chỉ định menu cụ thể theo slug, ID hoặc tên.
• menu_class (string): Lớp CSS áp dụng cho menu (default: menu).
• menu_id (string): ID của thẻ <ul> chứa menu.
• container (string): Thẻ HTML bao bọc menu (default: div, có thể là nav, section, false để không sử dụng container).
• container_class (string): Lớp CSS của container.
• container_id (string): ID của container.
• theme_location (string): Vị trí menu đã đăng ký trong functions.php.
• depth (int): Số cấp độ menu hiển thị (default: 0, hiển thị tất cả cấp độ).
• fallback_cb (callable|string|false): Hàm thay thế nếu menu không tồn tại (default: wp_page_menu).
• walker (object): Class tùy chỉnh để hiển thị menu (default: Walker_Nav_Menu).
• before (string): HTML hiển thị trước mỗi liên kết menu.
• after (string): HTML hiển thị sau mỗi liên kết menu.
• link_before (string): HTML hiển thị trước văn bản trong mỗi liên kết menu.
• link_after (string): HTML hiển thị sau văn bản trong mỗi liên kết menu.
• items_wrap (string): Cấu trúc HTML bao quanh danh sách <ul> menu (default: <ul id="%1$s" class="%2$s">%3$s</ul>).
• item_spacing (string): Kiểm soát khoảng trắng trong HTML (default: preserve, có thể là discard).

Cách đăng ký menu trong functions.php

Trước khi sử dụng wp_nav_menu(), bạn cần khai báo vị trí menu trong functions.php:

function register_my_menus() {
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'textdomain'),
        'footer'  => __('Footer Menu', 'textdomain')
    ));
}
add_action('init', 'register_my_menus');

Hiển thị menu

Bạn có thể điều chỉnh menu theo nhu cầu bằng cách sử dụng các tham số bổ sung như:

wp_nav_menu(array(
    'theme_location' => 'primary',
    'menu_id'        => 'main-menu',
    'depth'          => 2,
    'fallback_cb'    => 'wp_page_menu'
));

Chỉnh menu bằng Walker Class

Bạn có thể tạo một class tùy chỉnh để hiển thị menu theo định dạng riêng:

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_el(&$output, $item, $depth = 0, $args = NULL, $id = 0) {
        $output .= '<li class="custom-menu-item">';
        $output .= '<a href="' . $item->url . '">' . $item->title . '</a>';
    }
}

wp_nav_menu(array(
    'theme_location' => 'primary',
    'walker'        => new Custom_Walker_Nav_Menu()
));

Kết luận

Hàm wp_nav_menu() là một công cụ mạnh mẽ trong WordPress giúp hiển thị menu điều hướng linh hoạt. Bạn có thể sử dụng các tham số có sẵn hoặc mở rộng bằng Walker Class để tùy chỉnh menu theo ý muốn. Điều này giúp website của bạn chuyên nghiệp và thân thiện hơn với người dùng.

Bạn có thể tìm hiểu thêm về wp_nav_menu() qua tài liệu chính thức của WordPress tại WordPress Developer Resources.

Xem thêm:

REST API vs Stream API: Hiểu sự khác biệt và cách sử dụng

Associative Array là gì? Cách sử dụng Associative Array (kèm ví dụ)