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
1271 lượt xem

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

tạo menu đa cấp cho wordpress

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: http://shopconggiao.com/

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.

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

Thông báo: GiuseArt đang xây dựng một website chia sẻ tài nguyên thiết kế đồ họa hoàn toàn miễn phí cho người Công Giáo, dự kiến ra mắt vào đầu năm 2019. Nếu bạn muốn, hãy tham gia cùng chúng tôi nhé! Tham gia ngay
Thẻ tìm kiếm:

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

Bình luận Facebook

Trả lời

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 *

Chat Facebook