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

9726 lượt xem
Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

Chào các bạn, mình xin gửi các bạn update một tính năng nhỏ trong giao diện bán hàng v1 của Giuseart, đó là menu đa cấp “danh mục sản phẩm” (vertical menu) nằm dọc tại widget của website.

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.

Xem demo: //dienthoai.ninhbinhweb.net

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ào giao diện > widget và tiến hành xóa widget chuyên mục đi nhé!

xóa widget trong wordpress
Xóa widget trong wordpress

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

Tạo widget text mớ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 javascript cầ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.

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ửa menu (<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
Tạo menu đa cấp cho wordpress

Chỉ với vài dòng code đơn giản là chúng ta đã tạo được menu đa cấp làm danh mục sản phẩm hiển thị ở widget cho website rồi. Các bạn có thể tham khảo plugin nào đó phù hợp hơn, hoặc dùng tạm menu theo bài hướng dẫn này nhé. Chúc các bạn làm tốt và chúc cho công việc của các bạn luôn thuận lợi.

5/5 - (5 bình chọn)
Chia sẻ bài viết:

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Thẻ tìm kiếm:

Bài viết mới cập nhật:

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *