Cách thêm đồng hồ đếm ngược vào website WordPress đơn giản và nhanh nhất

Đồng hồ đếm ngược hay countdown timer không chỉ xuất hiện vào đêm 30 tết, nó là một tính năng khá phổ biến với những trang web chạy flash sale, trang coming soon, … giúp người dùng xác định được thời gian bắt đầu và kết thúc sự kiện một cách cụ thể.

Nếu bạn cũng muốn thêm tính năng này vào trang web WordPress nhưng lại không biết nhiều về code hay công nghệ, thì chúng mình đang “gãi đúng chỗ ngứa” cho bạn đấy. Bài viết sau đây sẽ hướng dẫn cách thêm nút đếm ngược vào trang WordPress một cách siêu đơn giản và nhanh chóng.

Khi nào và tại sao cần dùng tính năng đếm ngược

Bạn có thể thêm nút đếm ngược đến ngày bắt đầu hoặc ngày kết thúc cho các trang web như:

  • Trang web đang xây dựng và sắp ra mắt (coming soon);
  • Trang web tổ chức một sự kiện quan trọng (công chiếu phim, tour âm nhạc, …);
  • Landing page cho một chiến dịch marketing;
  • Trang web đang chạy sale, khuyến mại, …
Đồng hồ đếm ngược trong website WordPress

Sử dụng nút countdown mang lại những lợi ích sau:

  • Giúp người dùng theo dõi được ngày bắt đầu, kết thúc sự kiện một cách chính xác nhất để không bỏ lỡ sự kiện;
  • Trang web của bạn sẽ đẹp mắt, thu hút, và chuyên nghiệp hơn với nút countdown;
  • Tạo cảm giác gấp gáp, giúp kích thích người dùng hành động, giúp tăng tỷ lệ chuyển đổi.

Các cách để thêm đồng hồ đếm ngược

Có các cách khác nhau để thêm đồng hồ đếm ngược trong WordPress như:

  1. Sử dụng code – tất nhiên, bạn phải là dân chuyên, nếu không bạn sẽ phải thuê một lập trình viên hoặc công ty làm web uy tín. Cách này tốn kém, lâu hơn, và nếu có lỗi xảy ra bạn sẽ khó khắc phục.
  1. Dùng page builder: đây là một cách đơn giản và không cần code. Tuy nhiên không phải page builder nào cũng có sẵn module cho nút countdown. Hoặc bạn sẽ phải mua bản pro để có tính năng này.
  1. Dùng một theme có sẵn tính năng countdown: thông thường, các theme dạng coming soon đều sẽ có sẵn tính năng này. Một số theme loại khác cũng có hỗ trợ, ví dụ như theme EventPress – một theme business mà mình đã review trên trang FreeWPThemes.
Dùng theme để thêm đồng hộ đếm ngược vào website WordPress

Tuy nhiên, không phải theme nào cũng phù hợp với trang web của bạn, hoặc đơn giản là bạn không muốn thay đổi theme đang dùng.

  1. Sử dụng plugin chuyên dụng: so với 3 cách trên, đây là cách nhanh chóng và đơn giản nhất. Bạn không cần biết gì về code, không cần mất thêm chi phí, cũng không cần thay đổi giao diện website.

Dưới đây là hướng dẫn thêm nút đếm ngược vào trang WordPress bằng plugin hết sức dễ dàng và nhanh chóng.

Thêm nút đếm ngược vào trang web bằng plugin

Bước 1: Cài đặt plugin

Có khá nhiều plugin giúp bạn thêm đồng hồ đếm ngược vào trang, nhưng để đơn giản, nhanh, mà vẫn đẹp mắt, mình sẽ dùng plugin Countdown Timer Ultimate.

Đây là plugin miễn phí và có sẵn trên wordpress.org nên bạn hãy vào trong Admin của trang, đi tới Plugin > Add new để cài đặt và kích hoạt plugin nhé:

Dùng plugin Countdown Timer Ultimate để thêm nút đếm ngược vào trang web

Sau khi kích hoạt xong plugin Countdown Timer Ultimate, có thể plugin này sẽ hiện ra một thông báo về việc chia sẻ dữ liệu của trang web với nhà sản xuất plugin như sau: 

Chia sẻ dữ liệu của trang web với nhà sản xuất plugin Countdown Timer Ultimate

Mục này không cần thiết nên tốt hơn hết, bạn nhấn Skip để bỏ qua cho nhanh.

Bước 2: Tạo và cài đặt nút đếm ngược

Đầu tiên, hãy vào Countdown Timer > Add Timer, bạn sẽ thấy giao diện tạo nút đếm ngược như sau:

Tạo và cài đặt nút đếm ngược

Hãy điền tên cho nút đếm ngược này để dễ ghi nhớ và quản lý nhé.

Ở đây có các phần cài đặt và tùy chỉnh hiển thị của đồng hồ đếm ngược. Trong đó, phần quan trọng nhất là Expiry Date. Bạn muốn đồng hồ đếm ngược đến đến mấy giờ, mấy phút, ngày bao nhiêu, … thì hãy tùy chọn ở đây nhé:

Tùy chọn thời gian đếm ngược của đồng hồ

Ví dụ như ảnh trên, mình cho đồng hồ đếm ngược từ giờ cho đến 23:59:59 ngày 31 tháng 12 năm 2020.

Lưu ý: plugin sẽ mặc định lấy múi giờ mà bạn cài cho trang web. Ví dụ, plugin thông báo múi giờ hiện tại của mình là UTC+0. Nếu muốn đồng hồ chạy khớp với múi giờ mà bạn muốn, nhằm tránh sai lệch thông tin, hãy click luôn vào phần General Setting để cài đặt múi giờ cho trang WordPress của bạn. 

Cài đặt múi giờ cho trang WordPress

Bước 3: Tùy chỉnh hiển thị của nút đếm ngược

Vẫn ở trong phần tạo Timer, các phần còn lại ở dưới cho phép tùy chỉnh hiển thị của đồng hồ. Bạn hãy sử dụng các mục này để giúp phần đếm ngược bắt mắt và phù hợp với trang web hơn nhé. 

Ví dụ, để phóng to, thu nhỏ các nút đếm ngược sao cho chúng khớp với bố cục trang, bạn nhập kích cỡ mong muốn vào Countdown Width. Tuy nhiên, nếu bạn nhập kích cỡ quá nhỏ, ví dụ dưới 50px, các nút sẽ gần như biến mất khỏi trang. Mình đã thử và khá lúng túng khi không thấy nút countdown xuất hiện, nên bạn cũng lưu ý nhé.

Vì các nút đếm ngược của plugin Countdown Timer Ultimate được thiết kế dạng vòng tròn, nên bạn cũng chỉnh kích thước của các vòng tròn và kích thước viền của chúng cho đẹp mắt ở phần Background WidthCircle Width

Nếu muốn đánh dấu các nút ngày, giờ, phút, … bằng các màu khác nhau cho dễ phân biệt, hoặc cho trang web rực rỡ hơn, bạn nên tùy chỉnh màu cho viền của các nút ở Foreground Color

Sau khi tùy chỉnh hiển thị của các nút đếm ngược, nhớ nhấp Publish để lưu lại. Dưới đây là phần tùy chỉnh của mình

Tùy chỉnh hiển thị của các nút đếm ngược

Bước 4: Hiển thị nút đếm ngược ra ngoài trang

Bây giờ, bạn vào phần Countdown Timer ở menu bên phải, bạn sẽ thấy danh sách tên của các đồng hồ đếm ngược hiển thị ở đây. Hãy copy shortcode của đồng hồ mà bạn cần.

Copy shortcode của đồng hồ.

Sau đó, chỉ cần dán shortcode này vào trong bài đăng, trang mà bạn muốn.

Dưới đây là đồng hồ đếm ngược được hiển thị lên một trang của mình:

Đồng hồ đếm ngược được hiển thị lên website WordPress

Hoặc bạn có thể hiển thị nó lên một widget nào đó. Bạn chỉ cần dùng công cụ Customizer, hoặc vào Appearance > Widget, chọn widget Text, dán shortcode vào và kéo thả widget vào vị trí mong muốn (sidebar, footer, …).

Hiển thị đồng hồ lên một widget

Đây là kết quả:

Đồng hồ đếm ngược được hiển thị ngoài website WordPress

Thế là xong rồi đó!

Lời cuối

Tạo nút đếm ngược đến ngày bắt đầu hoặc kết thúc sự kiện không hề khó như bạn nghĩ đúng không? Plugin Countdown Timer Ultimate theo mình khá dễ dùng và tùy chỉnh dù nó vẫn hạn chế về kiểu dáng, thiết kế cho các nút đếm ngược. Nhưng nếu bạn muốn thêm nút countdown nhanh chóng và dễ dàng nhất thì đây là plugin khá tốt rồi.

Ngoài ra, bạn có thể tham khảo bài viết tạo nút thêm sự kiện vào lịch cá nhân để giúp khách hàng ghi nhớ sự kiện của bạn tốt hơn. Nếu kết hợp được cả tính năng này và nút đếm ngược, trang web của bạn sẽ ấn tượng và thành công hơn rất rất nhiều đó.

Để lại 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 *