Cách dùng hook custom trong Flatsome WordPress

28/12/2024
7 Phút đọc
64 Lượt xem
Đánh giá
5/5 - (1 bình chọn)

Hook custom trong Flatsome là giải pháp mạnh mẽ giúp bạn mở rộng và tùy chỉnh giao diện website mà không làm ảnh hưởng đến mã nguồn gốc. Đây là công cụ lý tưởng để thêm các phần tử, nội dung hoặc tính năng vào những vị trí mà theme mặc định không hỗ trợ.

1. Hook là gì và Vai Trò của Hook trong Flatsome?

Hook trong WordPress là các “điểm móc” cho phép bạn chèn hoặc chỉnh sửa nội dung tại những vị trí xác định trên website mà không cần sửa trực tiếp vào code của theme.

  • Action Hooks: Cho phép thêm mới chức năng tại một thời điểm cụ thể. Ví dụ: Thêm nút “Mua ngay” dưới tiêu đề sản phẩm.
  • Filter Hooks: Cho phép chỉnh sửa hoặc lọc dữ liệu trước khi hiển thị ra trang web. Ví dụ: Thay đổi định dạng giá sản phẩm.

Trong Flatsome, ngoài các hook có sẵn, theme còn cung cấp 3 hook custom để người dùng tự thêm nội dung vào trang sản phẩm chi tiết mà không cần can thiệp vào core theme.

Hook custom trong Flatsome cho phép bạn thêm hoặc chỉnh sửa nội dung ở các vị trí cụ thể trên trang sản phẩm mà theme mặc định không hỗ trợ, giúp tùy chỉnh giao diện dễ dàng và linh hoạt.
Cách dùng hook custom trong Flatsome WordPress

2. Danh Sách Hook Custom trong Flatsome

Flatsome bổ sung ba hook tùy chỉnh đặc biệt dành cho trang sản phẩm:

  • flatsome_custom_single_product_1
  • flatsome_custom_single_product_2
  • flatsome_custom_single_product_3

Vị trí hiển thị:

  • flatsome_custom_single_product_1: Hiển thị ngay dưới tiêu đề sản phẩm.
  • flatsome_custom_single_product_2: Xuất hiện dưới phần mô tả ngắn.
  • flatsome_custom_single_product_3: Nằm ở cuối trang, phía trên khu vực review sản phẩm.

3. Lợi Ích Khi Dùng Hook Custom trong Flatsome

  • Tối ưu UX/UI: Thêm banner khuyến mãi, logo hoặc đoạn văn bản giới thiệu vào trang sản phẩm.
  • Giữ nguyên bản theme gốc: Dễ dàng cập nhật Flatsome mà không lo mất các tùy chỉnh.
  • Nâng cao SEO Onpage: Chèn nội dung liên quan, giảm tỷ lệ thoát trang và cải thiện trải nghiệm người dùng.
  • Tiết kiệm thời gian: Không cần sửa trực tiếp trong file template, chỉ cần vài dòng code đơn giản là đủ.

4. Ví Dụ Thực Tế – Thêm Biểu Ngữ Khuyến Mãi vào Trang Sản Phẩm

Giả sử bạn muốn thêm một biểu ngữ (banner) “Giảm giá 20% – Mua ngay hôm nay!” vào dưới tiêu đề sản phẩm.

Bước 1: Kéo Hook Custom trong UX Builder

  1. Vào UX Builder → Trang sản phẩm chi tiết.
  2. Kéo phần Product Hooks vào và chọn flatsome_custom_single_product_1.

Bước 2: Thêm Code Tùy Chỉnh trong functions.php

Kết Quả:

  • Vị trí hiển thị: Dưới tiêu đề sản phẩm.
  • Giao diện: Biểu ngữ màu vàng nổi bật, thu hút khách hàng ngay khi vào trang.

5. Ví Dụ 2 – Thêm Video Giới Thiệu Sản Phẩm Dưới Phần Mô Tả Ngắn

Hiển thị: Video sẽ được chèn ngay dưới phần mô tả ngắn, giúp khách hàng có thêm thông tin trực quan về sản phẩm.

6. Tối Ưu Hóa và Lưu Ý Khi Sử Dụng Hook Custom

  • Sử dụng child theme: Luôn chỉnh sửa trong theme con để tránh mất code khi cập nhật theme chính.
  • Kiểm tra trước khi public: Xem trước giao diện để đảm bảo hiển thị đúng vị trí mong muốn.
  • Giữ code gọn gàng: Tổ chức hook trong các file riêng để dễ quản lý (ví dụ: custom-hooks.php).

Kết Luận

Hook custom trong Flatsome là giải pháp hoàn hảo để cá nhân hóa giao diện mà không làm ảnh hưởng đến core theme. Bằng cách sử dụng các ví dụ cụ thể như thêm banner khuyến mãi, video sản phẩm hoặc các nội dung tùy chỉnh, bạn có thể tạo ra những trang web độc đáo, chuyên nghiệp và gia tăng trải nghiệm người dùng.

👉 Bắt tay vào thực hành ngay hôm nay để biến website của bạn thành công cụ bán hàng mạnh mẽ!

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

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