Dang Minh Hai

Wordpress Developer

  • title
  • title
  • title
  • title

Cách tạo menu trong WordPress

Nguồn:
https://thachpham.com/wordpress/wordpress-development/tu-tao-them-menu.html

Bước 1. Khởi tạo Menu Location

Để tạo một menu location không có gì là khó khăn, chỉ với một vài dòng đặt vào file functions.php là bạn tạo được. Nhưng trước khi tạo menu location, hãy chắc chắn là theme của bạn đã hỗ trợ tính năng menu bằng cách kiểm tra xem có đoạn dưới trong file function của theme chưa, nếu chưa thì thêm vào.

add_theme_support( 'menus' );

Xong rồi, bây giờ ta sẽ có một hàm tên là register_nav_menus() với một tham số duy nhất là tên location như sau:

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

Ở đoạn trên, chúng ta sẽ tạo ra một menu location mang tên Menu chính với slug là main-nav. Cái slug sẽ là tên để chúng ta xác định khi viết code hiển thị ra ngoài, không khoảng trắng, không dấu và không in hoa.

Bây giờ hãy save lại và vào phần Appearance -> Menus -> Locations thì bạn sẽ thấy tên location mà ta vừa tạo.

Location vừa tạo

Thế nếu muốn thêm nhiều location thì sao? Đơn giản, chỉ việc thêm nhiều tham số vào hàm bên trên như sau:

register_nav_menus(
	array(
		'main-nav 	=> 'Menu chính',
		'footer-nav' 	=> 'Footer menu'
	)
);

Bước 2. Hiển thị location ra ngoài theme

Bạn cứ hiểu là location được chỉ định hiển thị ở đâu thì menu sẽ xuất hiện ở đó khi bạn thêm vào trong Dashboard.

Để hiển thị location, ta sẽ dùng hàm wp_nav_menu(). Hàm này nó có nhiều tham số hơn là cái hàm tạo location. Bây giờ hãy thử mở theme của bạn lên và chèn hàm này vào vị trí mà bạn thích, như file header.php chẳng hạn.

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

Ở trên mình đã lượt bỏ đi khá nhiều tham số không bắt buộc, bạn có thể xem danh sách đầy đủ tại đây.

0 0 đánh giá
Đánh giá bài viết
Theo dõi
Thông báo của
guest
0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận