Thịnh Văn Hạnh Menu (hay còn gọi là thanh điều hướng) là một thành phần cực kỳ quan trọng giúp định hình cấu trúc và trải nghiệm người dùng trên website. WordPress cho phép bạn thêm rất nhiều vị trí menu tùy chỉnh. Trong bài viết này, BKNS sẽ hướng dẫn bạn toàn tập cách tạo menu đa cấp trong WordPress từ cơ bản bằng giao diện kéo thả đến nâng cao bằng WordPress menu code. Hãy cùng theo dõi nhé!
Tóm Tắt Bài Viết
Phần lớn người dùng WordPress không cần đụng đến code để tạo menu con (sub-menu). Bạn chỉ cần sử dụng tính năng kéo thả có sẵn trong trang quản trị.
Từ bảng điều khiển (Dashboard), bạn điều hướng đến Giao diện (Appearance) > Menu. Tại đây, hãy nhập Tên menu và nhấn nút Tạo trình đơn.
Bước 2: Thêm các mục vào thanh điều hướng
Ở cột bên trái, bạn có thể chọn các Trang, Bài viết, Chuyên mục hoặc Liên kết tự tạo để Thêm vào menu.
Đây là bước quan trọng nhất. Để biến một mục thành menu con (sub-menu), bạn chỉ cần click giữ chuột vào mục đó, kéo nhẹ sang bên phải một khoảng (để nó nằm thụt vào trong so với mục cha). Sau khi sắp xếp xong, hãy tích chọn Vị trí hiển thị ở dưới cùng và nhấn Lưu menu.
Để tạo menu đa cấp, bạn cần tải dữ liệu một lần và cho nó vào 1 biến sau đó sử dụng kết hợp hàm lặp foreach và if để hiển thị menu cao cấp. Nhưng trước khi tạo menu đa cấp, bạn cần phân tích dữ liệu trả về của hàm menu và lấy là những trường cần thiết.
Nếu bạn đang tự code theme hoặc muốn tùy biến sâu cấu trúc HTML của thanh điều hướng, bạn có thể can thiệp bằng code PHP. Đầu tiên, bạn cần phân tích dữ liệu trả về của hàm lấy menu.
<?php $menuLocations = get_nav_menu_locations(); $menuID = $menuLocations['main-nav']; $primaryNav = wp_get_nav_menu_items($menuID); echo var_dump($primaryNav); ?>
Đoạn code trên sử dụng hàm var_dump để hiển thị cấu trúc của mảng menu. Trên màn hình sẽ cho người dùng thấy được những dữ liệu của biến và trường dữ liệu đó hiện đang được lưu trữ:
Hàm trên hiển thị một mảng. Để thực hiện thêm menu đa cấp, bạn chỉ cần quan tâm 2 mục là ID và menu_item_parent. Trong đó, trường ID là để xác định, còn trường menu_item_parent là để xem nó là con của ID nào.
Thay vì viết một hàm để truyền vào tham số ID nhằm lấy ra danh sách con, bạn có thể sử dụng 3 hàm lặp để lấy ra 3 cấp bằng cấu trúc dưới đây:
<ul id="menu-1">
<?php
$menuLocations = get_nav_menu_locations();
$menuID = $menuLocations['main-nav'];
$primaryNav = wp_get_nav_menu_items($menuID);
$id_parent = 0;
foreach ( $primaryNav as $navItem ) {
if($navItem -> menu_item_parent == $id_parent){
echo '<li> <a href="'.$navItem->url.'" title="'.$navItem->title.'">'.$navItem->title.'</a>';
$sub="";
foreach ( $primaryNav as $navItem2 ) {
if($navItem2 -> menu_item_parent == $navItem ->ID){
$sub .= '<li> <a href="'.$navItem2->url.'" title="'.$navItem2->title.'">'.$navItem2->title.'</a>';
$sub2="";
foreach ( $primaryNav as $navItem3 ) {
if($navItem3 -> menu_item_parent == $navItem2 ->ID){
$sub2 .= '<li> <a href="'.$navItem3->url.'" title="'.$navItem3->title.'">'.$navItem3->title.'</a></li>';
}
}
$sub .= '<ul>'.$sub2.'</ul>';
$sub .= '</li>';
}
}
echo '<ul>'.$sub.'</ul>';
echo '</li>';
}
}
?>
</ul>
Lưu ý, cách dùng nhiều vòng lặp foreach ở trên giúp bạn hiểu rõ nguyên lý vận hành. Tuy nhiên, để tối ưu hiệu suất thực tế trên file header.php, WordPress cung cấp sẵn hàm wp_nav_menu() với tham số depth hỗ trợ menu nhiều cấp:
<?php
wp_nav_menu( array(
'theme_location' => 'main-nav',
'container' => 'nav',
'depth' => 3, // Khai báo độ sâu 3 cấp cho menu
) );
?>
Vậy là bài viết trên đây, BKNS đã hướng dẫn bạn toàn tập cách tạo menu đa cấp trong WordPress từ thao tác kéo thả cơ bản đến tùy biến bằng mã code. Nếu bạn còn thắc mắc nào về bài viết xin hãy để lại bình luận ở dưới để chúng tôi có thể giải đáp nhanh nhất. Đừng quên truy cập website bkns.vn để cập nhật thêm nhiều thông tin hữu ích khác nữa nhé!
Theo dõi trên
Hướng dẫn chuyển tên miền về BKNS
