Hướng dẫn cách tạo thêm Menu trong WordPress

Trong WordPress, việc sử dụng Menu tương đối linh hoạt với kết hợp giữa Menu và Widget. Mặc định, wordpress sẽ có Menu chính. Tuy nhiên, trong một số trường hợp hoặc để dễ dàng sử dụng và tùy biến ta có thể tạo thêm Menu.

HƯỚNG DẪN CÁCH TẠO THÊM MENU TRONG WORDPRESS

Các bước tiến hành tạo thêm menu trong WordPress

• Khởi tạo Menu Location.
• Hiển thị Menu Location ngoài Theme
• Thêm menu và tùy chỉnh.

Khởi tạo Menu Location

Đầu tiên bạn vào file: functions.php của theme kiểm tra xem đã có dòng bên dưới chưa? Nếu chưa có thì thêm nó vào.

add_theme_support( 'menus' );

Tiếp theo tìm đến dòng register_nav_menus, nếu chưa có thì cũng thêm vào.

register_nav_menus(
        array(
                'menu-nav' => 'Menu chính'
        )
);

Giải thích ý nghĩa như sau: chữ menu-nav là tên sẽ sử dụng để gọi nó ra khi code. Chữ Menu chính là tên sẽ nhìn thấy trong phần Menu của Theme. Bạn có thể thay đổi, tuy nhiên nếu như trong theme đã có sẵn thì không nên thay. Bởi khi thay bạn sẽ phải tìm ở trong theme để sửa (thường là trong header.php).

Bây giờ để thêm 1 Menu bạn sẽ thêm một dòng tương tự như vậy vào bên dưới. Khi nhiều hơn 1 menu, dòng khai báo cuối sẽ không có dấu (,). Như bên dưới mình thêm left-nav với tên là Menu trái.

register_nav_menus(
        array(
                'menu-nav' => 'Menu chính',
                'left-nav' => 'Menu trái'
        )
);

Sau khi thêm xong bạn lưu lại và ra phần Menu của mục Giao diện (Themes) trong trang quản trị để kiểm tra xem menu mới thêm đã xuất hiện chưa. Nếu chưa thấy bạn kiểm tra kỹ lại những gì đã thực hiện

Hiển thị Menu Location ngoài Theme

Để hiển thị menu ngoài theme bạn sử dụng hàm wp_nav_menu(). Dưới đây là một ví dụ để hiển thị Menu chính.

<?php wp_nav_menu( array(
     'theme_location' => 'menu-nav', // tên location cần hiển thị
     'container' => 'nav', // thẻ container của menu
     'container_class' => 'menu-nav', //class của container
     'menu_class' => 'menu clearfix' // class của menu bên trong
) ); ?>

Hàm wp_nav_menu() còn có nhiều tham số, các bạn có thể tham khảo thêm ở trang codex của WordPress.

Thêm menu và tùy chỉnh.

Sau khi thêm vào vị trí bạn muốn, hãy vào trang của bạn để kiểm tra. Đây chỉ là những hiển thị cơ bản. Để menu hiển thị đẹp hơn và theo mong muốn bạn nên kết hợp sử dụng với CSS.

css sẽ Update sau

Trong khuôn khổ bài viết này mình không viết về CSS. Ở trên mình đã chừa sẵn 1 chỗ để chèn 1 đoạn CSS làm ví dụ, khi nào có thời gian mình sẽ Update sau! Chúc các bạn thành công!