Bước 1. Tạo Menu Header

Trước khi tạo vị trí menu, hãy đảm bảo theme của bạn đã hỗ trợ tính năng menu. Kiểm tra xem file functions.php của theme có đoạn mã dưới đây chưa. Nếu chưa, hãy thêm vào.

add_theme_support( "menus" );

Đăng kí và tạo 2 menu sẽ hiển thị trong trong quản trị WordPress. Ở đây mình đăng kí menu có tên là Header Menu với key là header_menu và Footer Menu có key là footer_menu. TEXT_DOMAIN là biến toàn cầu mình đặt cho text domain của website, biến này đã được tạo và đặt ở file cấu hình wp-config.php

        register_nav_menus( array(
            'header_menu' => __( 'Header Menu', TEXT_DOMAIN ),
            'footer_menu'  => __( 'Footer Menu', TEXT_DOMAIN ),
        ));

Bước 2. Hiển thị menu ra ngoài giao diện website

Để hiển thị vị trí menu, bạn sẽ sử dụng hàm wp_nav_menu(). Hàm này có nhiều tham số hơn so với hàm tạo vị trí menu và thông tin menu trong quản trị WordPress. Hãy mở theme của bạn và chèn hàm này vào vị trí mong muốn, ví dụ như menu ở đầu trang web trong file header.php.

<?php 
wp_nav_menu( array(
     'theme_location' => 'header_menu', // tên key menu bạn muốn hiển thị
     'container' => 'nav', // thẻ html của menu bạn muốn bao quanh bằng thẻ nav
     'container_class' => 'header_menu', // tên class của thẻ container phía trên
     'menu_class' => 'nav-menu nav navbar-nav' // class của menu bên trong
) );
?>

Hãy so sánh cấu trúc đó với đoạn code hiển thị vị trí menu mà bạn vừa thêm vào, bạn sẽ hiểu ngay ý nghĩa của nó. Bây giờ, bạn chỉ cần thêm CSS để menu hiển thị như mong muốn. Nếu bạn đã có sẵn CSS cho menu, hãy thêm class của bạn vào hàm wp_nav_menu() thông qua các tham số của hàm.

Trong bài viết này, mình không hướng dẫn chi tiết cách tạo một menu đẹp mắt như các trang web khác. Thay vào đó, mình chỉ muốn hướng dẫn bạn cách tạo một menu trong WordPress. Từ đó, bạn có thể tự chuyển các mẫu menu từ HTML và CSS sang menu WordPress một cách dễ dàng.

Hiền Trịnh Thu