Cách code chức năng chuông thông báo wordpress

Bạn muốn thêm một chiếc chuông thông báo xinh xắn lên góc header để thông báo khuyến mãi, cập nhật mới hay tin hot cho khách truy cập? Rất tuyệt, vì đây là một cách rất thông minh để thu hút sự chú ý, tăng thời gian on-site, và đặc biệt còn hỗ trợ SEO nếu bạn làm đúng cách.

Cùng mình triển khai nhé! ✨

✅ Bước 1: Chuẩn bị mã HTML, CSS và JavaScript

Đầu tiên, bạn cần sao chép đoạn mã chuông thông báo đã thiết kế sẵn (gồm HTML, CSS và JS). Đoạn mã này có:

• Biểu tượng chuông dễ thương 🔔

• Số lượng thông báo được đếm tự động

• Danh sách các thông báo hiện ra khi click chuông

• Mỗi thông báo có tiêu đề, nội dung và thời gian rất gọn gàng

💡 Tip SEO: Nội dung trong thông báo nên chứa từ khóa quan trọng một cách tự nhiên như “theme chuẩn SEO”, “khuyến mãi WordPress”, “update Flatsome”… để Google hiểu được nội dung website bạn đang nói gì.

🛠 Bước 2: Thêm mã vào giao diện Flatsome

Bạn đang dùng Flatsome? Quá tuyệt, việc thêm chuông rất dễ:

▸ Thêm HTML + JS vào Header:

• Vào Giao diện > Tùy biến > Header > UX Builder (nếu bạn dùng builder).

• Hoặc vào Flatsome > Theme Options > Header > Custom HTML.

• Dán đoạn HTML của chuông vào nơi bạn muốn hiển thị (gợi ý: góc phải header cho nổi bật).

▸ Thêm CSS:

• Vào Giao diện > Tùy biến > CSS bổ sung (Additional CSS).

• Dán toàn bộ phần CSS vào đó để đảm bảo chuông hiện đúng kiểu dáng.

▸ Thêm JavaScript:

• Vào Flatsome > Advanced > Custom JS, hoặc dùng plugin Header Footer Code Manager để chèn phần JS.

🎯 Bước 3: Tối ưu SEO cho phần chuông thông báo

Bạn không chỉ đặt cho đẹp đâu, hãy tối ưu luôn để Google “mê” chiếc chuông của bạn:

• Viết nội dung thông báo chuẩn SEO: Chèn từ khóa chính/phụ tự nhiên.

• Dùng các từ ngữ hấp dẫn như: Giảm giá cực sốc, Ưu đãi siêu to khổng lồ, Update VIP dành riêng cho bạn…

• Tránh nhồi nhét quá nhiều từ khóa nhé, Google không thích đâu.

• Đặt tiêu đề cho từng thông báo rõ ràng, ngắn gọn.

📱 Bước 4: Kiểm tra trên mọi thiết bị

Dù bạn thấy đẹp trên máy tính, đừng quên kiểm tra trên điện thoại và tablet nữa nhé. Bạn có thể dùng:

• Dev Tools (F12) trong trình duyệt để xem giao diện mobile

• Hoặc dùng công cụ Google Mobile-Friendly Test

💡 Giao diện thân thiện mobile cũng là một tiêu chí SEO cực kỳ quan trọng!

🎁 Một số mẹo nhỏ giúp chuông “ăn điểm” với cả người dùng lẫn Google

• Dùng màu sắc bắt mắt nhưng nhẹ nhàng, dễ nhìn

• Cập nhật nội dung thông báo thường xuyên (Google thích nội dung tươi mới)

• Chèn liên kết nội bộ (internal link) nếu thông báo dẫn đến bài viết/blog/page nào đó

Lợi ích khi thêm chuông thông báo trên website

• Tăng tương tác người dùng mà không cần pop-up gây khó chịu

• Thông báo dễ thấy, dễ click, không chiếm quá nhiều diện tích

• Nội dung có thể index SEO nếu bạn triển khai đúng

• Tạo sự chuyên nghiệp, hiện đại cho website

Tổng kết

Việc thêm chuông thông báo vào header Flatsome không chỉ đơn giản là “cho vui”, mà còn giúp bạn:

✅ Giữ chân người dùng
✅ Tăng nhận diện thông điệp
✅ Tối ưu SEO cực tốt
✅ Tăng tỷ lệ chuyển đổi nếu biết cách viết nội dung hấp dẫn