Xin chào các bạn, hôm nay mình sẽ hướng dẫn các bạn làm về chức năng menu đa cấp ( nhiều cấp ) và có thể làm được cả mega menu.
Trước tiên chúng ta có đoạn code cơ bản như sau:
<?php
$menuLocations = get_nav_menu_locations();
$menuID = $menuLocations['main-nav'];
$primaryNav = wp_get_nav_menu_items($menuID);
foreach ( $primaryNav as $navItem ) {
echo '<li class="menu-item menu-item-type-post_type menu-item-object-page"> <a href="'.$navItem->url.'" title="'.$navItem->title.'">'.$navItem->title.'</a> </li>';
}
?>
Hàm trên sẽ lấy dữ liệu menu của main-nav, là một vị trí mà mình đã tạo ở file function. Các bạn có thể tham khảo bài viết Hướng dẫn cách tạo menu trong WordPress
Bây giờ thì sẽ hiễn thị menu đa cấp ra giao diện. Mình sử dụng 3 hàm lặp để lấy ra 3 cấp, các bạn có thể thêm theo cấu trúc dưới.
<ul id="menu-1" class="nav">
<?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 class="menu-item'.$navItem ->ID.'"> <a href="'.$navItem->url.'" title="'.$navItem->title.'">'.$navItem->title.'</a>';
$sub="";
foreach ( $primaryNav as $navItem2 ) {
if($navItem2 -> menu_item_parent == $navItem ->ID){
$sub .= '<li class="menu-item'.$navItem2 ->ID.'"> <a href="'.$navItem2->url.'" title="'.$navItem2->title.'">'.$navItem2->title.'</a>';
$sub2="";
foreach ( $primaryNav as $navItem3 ) {
if($navItem3 -> menu_item_parent == $navItem2 ->ID){
$sub2 .= '<li class="menu-item'.$navItem3 ->ID.'"> <a href="'.$navItem3->url.'" title="'.$navItem3->title.'">'.$navItem3->title.'</a></li>';
}
}
$sub .= '<ul>'.$sub2.'</ul>';
$sub .= '</li>';
}
}
echo '<ul>'.$sub.'</ul>';
echo '</li>';
}
}
?>
</ul>
Với cách như trên thì bạn chỉ cần thêm class hay id để dể dàng tùy biến menu của mình đẹp hơn nha.
Đây là hình họa mình đã làm megamenu theo hàm trên. Kết quả thật tuyệt đúng không các bạn.
Lời kết
Mình làm được thì các bạn củng làm được, hãy để lại bình luận nếu bạn thắc mắc.
Hãy theo dõi chuyên mục mẹo và thủ thuật wordpress của mình để được cập những bài viết hay về wordpress nha.