Trang chủ »  Mẹo - thủ thuật »  Tạo menu đa cấp cho theme wordpress

Tạo menu đa cấp cho theme wordpress

31/05/2021  -   149 views

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.

  • Tổng hợp các đoạn code về woocommerce
  • Tạo custom post type và taxonomy trong wordpress
  • Hướng dẫn cách tạo menu trong WordPress
  • Hướng dẫn cách import/export dữ liệu giữ nội dung và hình ảnh
  • Share giao diện form đăng nhập/đăng ký tuyệt đẹp
  • Những đoạn code hay dùng trong lập trình theme wordpress
  • 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.

    Hãy tham gia group của mình để cùng xây dựng cộng đồng mạnh mẽ và follow các bài viết mới nhất về wordpress của mình nhé. Tvcdev WordPress Community 

    Chúc các bạn thành công !. See you.

    0 0 đánh giá
    Article Rating
    Theo dõi
    Thông báo của
    guest
    0 Comments
    Phản hồi nội tuyến
    Xem tất cả bình luận

    Bài viết liên quan

    Mẹo - thủ thuật 10/05/2022

    Chuyển hướng người dùng đến URL trước đó sau khi login thành công

    Đoạn code sau đây sinh ra để giải quyết vấn đề sau khi login thành công thì sẽ điều hướng ng(...)

    WP Theme 25/09/2021

    Hướng dẫn tạo child theme trong wordpress

    Chào các bạn, hôm nay mình hướng dẫn đến các bạn một bài viết củng khá quan trọng trong wordp(...)

    Mẹo - thủ thuật 25/07/2021

    Hướng dẫn cách import/export dữ liệu giữ nội dung và hình ảnh

    Có nhiều cách để export/import dữ liệu chuyển từ website này sang website khác. Nếu các bạn dùng (...)

    Mẹo - thủ thuật 20/07/2021

    Hướng dẫn tạo chức năng search autocomplete trong wordpress

    Hôm nay mình sẽ hướng dẫn đến các bạn một bài viết liên quan về ajax củng như mẹo và thủ (...)

    0
    Rất thích suy nghĩ của bạn, hãy bình luận.x