Bài 6 : Cách Tạo và GET Menu trong lập trình Theme WordPress

Lợi Trương - Admin Follow Author

Đã làm CMS thì không thể nào muốn thêm một trang vào menu thì phải mở file code ra gắn đúng không nào? Nên vì thế hôm này mình sẽ hướng dẫn các bạn cách code vào sử dụng Menu trong WordPress một cách tự động nhất.

Lưu ý, mọi bài viết mình đều share full code từng file. Nếu các bạn làm theo từng bước không hiểu có thể theo dõi Full code theo từng bài viết hoặc tải full source code tại đây nhé : tại đây.

Code khai báo Menu trong file Function.php

Bạn gắn đoạn code này vào file function.php để khai báo 1 cái menu với tên là Top Menu

function create_menu(){
	register_nav_menu('topmenu',_('Top Menu')); //register_nav_menu là hàm khai báo menu của wordpress
} 
add_action ('init','create_menu');

function create_menu(){

register_nav_menu('topmenu',_('Top Menu')); //register_nav_menu là hàm khai báo menu của wordpress

}

add_action ('init','create_menu');

Code Get Meu ra file Header.php

Chúng ta sẽ thay thế đoạn code menu tĩnh bằng đoạn code get menu này nhé :

<?php wp_nav_menu(
        array(
            'theme_location' => 'topmenu',//topmenu là tên menu các bạn đã khai báo ở function
            'menu_class' =>'mainmenu', //class css của menu
            'menu_id' => 'top-menu'//id của menu nếu bạn cần chỉnh css hay gì đó
        )
); ?>

<?php wp_nav_menu(

array(

'theme_location' => 'topmenu',//topmenu là tên menu các bạn đã khai báo ở function

'menu_class' =>'mainmenu', //class css của menu

'menu_id' => 'top-menu'//id của menu nếu bạn cần chỉnh css hay gì đó

)

); ?>

Sau khi làm đúng 2 bước trên bạn đã hoàn thành xong cách load menu trong WordPress rồi. Đơn giản thôi đúng không nào?

Nếu gặp lỗi css thì bạn hãy đặt ‘menu-class’ lại cho đúng tên class trong css nhé.

**Đây là kết quả sau khi chúng ta khai báo và get Menu**

Thêm – Chỉnh Sửa Menu Trong Site Admin

Bây giờ, các bạn vào site admin Tạo và chọn những gì bạn muốn Get ra ngoài Menu.

**Giao diện chỉnh sửa menu trong WP rất đơn giản dễ hiểu.**

**có thể xóa hoặc thêm bất cứ thứ gì bạn muốn**

Ở phần này, có thể các bạn sẽ thắc mắc “Liên Kết Tự Tạo” là gì ? hiểu nôm na là bạn tạo một cái <li> và bạn link nó qua website khác chẳng hạn

Sau khi chọn và save xong , các bạn làm bước ở hình dưới nếu trường hợp có nhiều menu nhé.

Lưu ý :

Trong Menu của WordPress , khi bạn đang ở trang này hoặc link nào thì ở thẻ <li> nó sẽ có class là : current_page_item current-menu-item . Bạn dựa vào 2 class này để add css active cho phù hợp nhé!

Xong

Vậy là với những đoạn code đơn giản , những thao tác dễ ẹt thì chúng ta đã có một Menu tự động , lần sau muốn thêm gì là cứ vào site admin ra là xong , không cần phải mở file code nữa nhé !!

Và đây là kết quả :

Website sau khi được khởi tạo menu tự động

Bài sau , mình sẽ hướng dẫn các bạn cách tạo Trang Chuyên Mục cho website , chức năng này rất quan trọng là không thể thiếu của một website . Các ban nhớ theo dõi bài viết sau nhé.

Nếu có thắc mắc gì hãy để lại Comment của các bạn ở phía dưới . Hãy thực hành và làm theo để hiểu rõ nhé.