Tạo menu đa cấp danh mục sản phẩm cho website wordpress

Có nhiều plugin làm menu danh mục sản phẩm bao gồm sub-menu cùng nhiều hiệu ứng rất đẹp cho website wordpress của bạn. Tuy nhiên, trong bài viết này, mình hướng dẫn các bạn tạo menu danh mục sản phẩm hoàn toàn bằng code html và css để chèn vào widget của website, nên chắc chắn một điều là cũng nhẹ hơn rất nhiều so với dùng plugin.

Tự đánh giá:

Ưu điểm:Nhanh – gọn – nhẹ, phù hợp với website bán hàng ít sản phẩm
Nhược điểm:Click vào menu mới để mở sub-menu ra chưa tự động thu phần sub-menu cũ về. Mình sẽ update trong thời gian sớm nhất.

Bước 1: Xóa widget danh mục sản phẩm cũ.

Các bạn vàogiao diện > widgetvà tiến hành xóa widgetchuyên mụcđi nhé!

xóa-widget-trong-wordpress

Bước 2: Tạo widget danh mục sản phẩm mới

Tạowidget textmới và thêm vào vị trí mong muốn(Main sidebar), đưa lên trên cùng, nhập tiêu đề và dán đoạn code sau vào:

Giải thích đoạn code:cặp thẻ <header>…</header> chứa các thông số css và các đoạn javascriptcần thiết. Cặp thẻ <body>…</body> chứa các đoạn code html – nơi mà bạn cần chỉnh sửa để hiển thị menu lên website.

  <head>
    <title>Danh mục sản phẩm</title>
    <style>
       #menu { font: 16px “roboto condensed”, sans-serif; width: 100%; background: white; border-color: white; border-width: 1px;border-style: solid;}
        #menu ul{list-style: none;margin: 0;padding: 0;}
      #menu  li{display: block;padding-top: 0px;background: #f1f1f1;padding-left:25px;cursor: pointer;height: 44px; }
       #menu li:hover{background: #e1e1e1;}
        #menu a {font-weight: normal;display: block;border-bottom: 1px solid #f8f8f8; padding-top: 10px;padding-bottom: 14px;padding-left: 13px;text-decoration: none;}
    </style>
   <script src=“http://code.jquery.com/jquery-latest.js”></script>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js”></script>
<script>
$(document).ready(function(){
    $(“#menu ul”).hide();
    $(“#menu a”).click(function(){
    $(this).next(“#menu ul”).slideToggle(“slow”);
    });
});
</script>
</head>
    <body>
<div id=“menu”>
    <a>Điện thoại Blackberry</a>
    <ul>
        <li><a href=“#”>Blackberry OS 5–7</a></li>
        <li><a href=“#”>Blackberry 10</a></li>
        <li><a href=“#”>Blackberry chạy Android</a></li>
        <li><a href=“#”>Blackberry siêu sang</a></li>
    </ul>
    <a>Điện thoại Iphone</a>
    <ul>
        <li ><a href=“#”>iPhone 7</a></li>
        <li><a href=“#”>phone 6</a></li>
        <li><a href=“#”>Iphone 5</a></li>
        <li><a href=“#”>Iphone 4</a></li>
    </ul>
    <a>Điện thoại HTC</a>
    <ul>
        <li><a href=“#”>HTC One</a></li>
        <li><a href=“#”>HTC Nexus</a></li>
        <li><a href=“#”>HTC One M</a></li>
    </ul>
    <a>Điện thoại LG</a>
    <ul>
        <li><a href=“#”>LG Optimus</a></li>
        <li><a href=“#”>LG G2</a></li>
        <li><a href=“#”>LG G3</a></li>
        <li><a href=“#”>LG G4</a></li>
    </ul>
    <a>Điện thoại SONY</a>
    <ul>
        <li><a href=“#”>Sony Xperia XA</a></li>
        <li><a href=“#”>Sony Xperia C</a></li>
        <li><a href=“#”>Sony Xperia Z</a></li>
        <li><a href=“#”>Sony Xperia Z3</a></li>
    </ul>
    <a >Điện thoại OPPO</a>
    <ul >
        <li>Oppo F1s Plus</a></li>
        <li>Oppo C23498</a></li>
        <li>Oppo Trung Quốc</a></li>
        <li>Oppo Việt Nam</a></li>
    </ul>
</div>
    </body

Bước 3: Thực hiện chỉnh sửa menu và sub-menu thủ công.

Bởi mình làm menu danh mục sản phẩm bằng html và css nên các bạn chịu khó thực hiện việc chỉnh sửa menu và sub-menu thủ công chứ không phải tự động nhé. Tìm đến nội dung bên trong cặp thẻ <body>….</body> và sửamenu(<a></a>) vàsub-menu(<li>…</li>) tương ứng các bạn nhé!

Bước 4: Lưu lại và xem thành quả

tạo-menu-đa-cấp-cho-wordpress