Thủ thuật

Cách tạo đồng hồ đếm ngược sự kiện trong wordpress

[Thủ thuật WordPress] Hướng dẫn cách tạo đồng hồ đếm ngược sự kiện trong wordpress – Bạn muốn tạo một đồng hồ đếm ngược với các sự kiện hấp dẫn sẽ được diễn ra trong tương lai, bạn đang băn khoăn về việc tạo đồng hồ đếm ngược sự kiện trong wordpress? Với Plugin T (-) Countdown sẽ hiển thị một đồng hồ đếm ngược bằng HTML5 với tùy biến cao bạn có thể sử dụng nó như một widget hoặc trong một bài viết hay trang bằng cách sử dụng một shortcode.

Trong bài viết trước đây về thủ thuật WordPress mình có hướng dẫn các bạn cách chuyển hướng liên kết cũ thành liên kết mới trong bài viết giúp bạn có thể dễ dàng chuyển hướng liên kết khi thay đổi mà vẫn giữ được từ khóa trên công cụ tìm kiếm tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn cách tạo đồng hồ đếm ngược sự kiện trong wordpress đơn giản nhất.

Chọn để xem

Tạo đồng hồ đếm ngược sự kiện trong wordpress

Việc tạo đồng hồ đếm ngược, nó là hoàn hảo cho việc thông báo khi người dùng truy cập trang web và họ sẽ thấy một sự kiện sắp tới, chẳng hạn như thời gian sẽ xuất hiện bài viết hoặc một sản phẩm khuyến mãi nào đó, hay các sự kiện hấp dẫn sẽ diễn ra làm cho độc giả tò mò và họ sẽ quay lại trang Web của bạn. Với bộ đếm thời gian được tùy biến cao cũng như đầy đủ các tùy chọn Shortcode có sẵn sẽ giúp bạn dễ dàng thiết kế một đồng hồ đếm ngược với một phong cách riêng của bạn.

Giống như mọi Plugin khác đầu tiên bạn cần cài đặt Plugin và kích hoạt nó để sử dụng (tham khảo bài viết hướng dẫn cài đặt Plugin WordPress với các phương pháp rất đơn giản). Sau khi cài đặt và kích hoạt xong bạn sẽ thấy xuất hiện thêm một Menu có tên T(-) Countdown xuất hiện trong Menu Cài đặt. Bạn kích vô Menu này để tiến hành cài đặt Plugin. Giao diện Plugin khá đơn giản với 3 tùy chọn.

Cấu hình Plugin

tạo đồng hồ đếm ngược sự kiện trong wordpress
Tạo đồng hồ đếm ngược sự kiện trong wordpress

Rockstar Features: Kích hoạt tính năng Rockstar (Đếm giờ)

Force Load CSS: Kiểu CSS có rất nhiều để bạn chọn lựa mẫu.

Custom CSS: Bạn có thể tự viết CSS cho riêng mình.

Sau khi chọn lựa xong bạn lưu lại các cài đặt > tục bạn vào Menu Giao diện > Widget. Lúc này bạn sẽ thấy xuất hiện một Widget có tên là T(-) Countdown bạn chỉ việc kéo widget này và thả vào Sidebar để hiển thị là được.

dong-ho-dem-nguoc-4.jpg

key windows giá rẻ

Giao diện thiết lập của widget.

dong-ho-dem-nguoc-5.jpg

Đầu tiên bạn đặt tên cho Widget ở thuộc tính Title, chọn thời gian ở phần Target, chọn kiểu đồng hồ ở phần Style, Nếu thời gian của bạn không có tuần thì bạn nên loại bỏ bằng cách kích chọn Omit weeks from timer, Inject JavaScript Inline chọn phần này nếu bạn muốn kết thúc sự kiện sớm hơn dự tính.

Tiếp tục thiết lập ở phần Rockstar Features

dong-ho-dem-nguoc-6.jpg

Above Countdown: Nội dung ở trước đồng hồ bạn có thể dùng mã HTML.

Below Countdown: Nội dung ở sau đồng hồ bạn có thể dùng mã HTML.

When Countdown Reaches Zero: Nội dung khi đồng hồ trở về số 0 (Hết thời gian).

dong-ho-dem-nguoc-7.jpg

Ở phần này bạn mã hóa theo ngôn ngữ để hiển thị – Sau khi thực hiện các cài đặt bạn nhấn Lưu thay đổi và ra ngoài trang chủ bạn sẽ thấy kết quả như thế này.

dong-ho-dem-nguoc-8.jpg

Ngoài ra bạn cũng có thể sử dụng Shortcode để chèn trực tiếp vô bài viết với cấu trúc sau.

[tminus t= “DD-MM-YYYY HH:MM:SS”]Nội dung khi đồng hồ đếm ngược về số 0[/tminus]

Ở cấu trúc trên bạn thay phần DD-MM-YYYY HH:MM:SS thành Ngày-Tháng-Năm Giờ-Phút-Giây tương ứng bạn nhé

dong-ho-dem-nguoc-9.jpg

Sau khi thực hiện xong bạn quay ra trang chủ và click vô bài viết vừa tạo bạn sẽ thấy xuất hiện một cái đồng hồ đếm ngược thật hoàn hảo.

dong-ho-dem-nguoc-10.jpg

Ngoài ra bạn có thể tham khảo một số cách sử dụng Shortcode theo link bên dưới!

Documentation

Như vậy mình đã hướng dẫn các bạn cách tạo đồng hồ đếm ngược sự kiện đa năng rồi đấy. Quá đơn giản để bạn có thể tạo đồng hồ đếm ngược sự kiện trong wordpress phải không?

Tỉ lệ / 5. Phiếu:

Chúng tôi rất tiếc vì bài đăng này không hữu ích cho bạn!

Hãy để chúng tôi cải thiện bài đăng này!

Hãy cho chúng tôi biết làm thế nào chúng tôi có thể cải thiện bài đăng này?

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button