Bạn tạo trang web download phần mềm, tranh ảnh, nhạc, game… nhưng muốn tăng thời gian onsite bằng cách tạo download button tải xuống sau một thời gian nhất định.
Có khác nhiều cách để tạo nút download button with timer countdown trong wordpress, bạn nên tìm kiếm cách nào add code tiện lợi và dễ dùng nhất. Mình hay dùng cách sau đây:
Sử dụng Plugin
Dùng WordPress Shortcodes Plugin cho tiện khi chèn vào bài viết
Cách này là cách mình hay dùng vì đây cũng là Plugin giúp chúng ta làm đẹp và trang trí bài viết rất tiện vì nó có rất nhiều các Shortcodes sẵn có. Đầu tiên để khóa nội dung button đếm ngược thời gian các bạn tải tiện ích Shortcodes Ultimate và cài đặt.
Hãy tập làm quen với đoạn code ngắn để tạo của Button của plugin này. Code để tạo nút tải xuống bình thường của plugin này sẽ có dạng như sau:
[su_button url="#" size="6" style="default" background="#00b512" color="#ffffff"]Button[/su_button]Tuy nhiên đó chỉ là một Button bình thường, để chèn thêm hiệu ứng đếm thời gian thì các bạn cần chèn code JS đếm thời gian vào phía trên thẻ đóng </body> trong file footer.php của giao diện.
<script>
var downloadButton = document.getElementById("download");
var counter = 10;
var newElement = document.createElement("p");
newElement.innerHTML = "You can download the file in 10 seconds.";
var id;
downloadButton.parentNode.replaceChild(newElement, downloadButton);
id = setInterval(function() {
counter--;
if(counter < 0) {
newElement.parentNode.replaceChild(downloadButton, newElement);
clearInterval(id);
} else {
newElement.innerHTML = "You can download the file in " + counter.toString() + " seconds.";
}}, 1000);
</script>Thông số trong đoạn JS trên:
var counter = 10; 10 là số giây bạn muốn người dùng chờ đợi
You can download the file in Bạn có thể tải xuống tệp trong
You can download the file in 10 seconds. Bạn có thể tải xuống tệp sau 10 giây.
Tùy biến code tải xuống của Shortcodes Ultimate. Để hoàn thành các bạn phải chèn id=”download” vào phía sau [su_button của đoạn code ngắn phía trên. Đoạn code hoàn chỉnh sẽ như sau:
[su_button id="download" url="#" size="6" style="default" background="#00b512" color="#ffffff"]Button[/su_button]Như vậy là bạn đã có một mã button download đếm ngược thời gian ngắn gọn để sử dụng thường xuyên cho các bài viết của blog mình rồi.
Xem thêm các thủ thuật wordprees hữu ích khác.
Plugin WordPress Download Manager
Paid version
Lazy Download Add-on là một tiện ích hữu ích bổ sung cho WordPress Download Manager bản free và pro cho phép bạn đặt thời gian trễ trước khi bắt đầu tải xuống. Có rất nhiều kiểu hiệu ứng để lựa chọn. Bạn còn có thể đặt thời gian chờ khác nhau cho các vai trò người dùng khác nhau. Thêm vào đó, bạn có thể chọn nơi mà mình sẽ áp dụng button download với thời gian trễ nữa.
Với Lazy Download Add-on thì các bạn chả cần làm thêm thao tác nào sau khi cài đặt tiện ích nữa, tuy nhiên để dùng Lazy Download Add-on bạn phải bỏ ra ít nhất $49.
Hoặc dùng các đoạn code có sẵn
Có rất nhiều đoạn code được chia sẻ nhằm nút download button with timer countdown, các bạn có thể tự áp dụng các đoạn code này cho trang wp của mình.
Đoạn code dưới đây là một ví dụ, để đoạn code này hoạt động thì khi đang soạn thảo bài viết các bạn lựa chọn Custom HTML và dán cả đoạn code này vào là xong. Tuy nhiên nên chỉ dụng cách này nếu trang của bạn thi thoảng mới cần tính năng này mà thôi.
<h2>We are preparing to download your File. Please wait …… </h2>
br>
<script>
var count = 15; // Number of remaining seconds.
var counter; // Handle for the countdown event.
function start() {
counter = setInterval(timer, 1000);
}
function timer() {
// Show the number of remaining seconds on the web page.
var output = document.getElementById("displaySeconds");
output.innerHTML = count;
// Decrease the remaining number of seconds by one.
count--;
// Check if the counter has reached zero.
if (count < 0) { // If the counter has reached zero...
// Stop the counter.
clearInterval(counter);
// Start the download.
window.location.href = "Your Link";
return;
}
}
// Start the countdown timer when the page loads.
window.addEventListener("load", start, false);
</script>
<br />
Your download will begin in <span id="displaySeconds">15</span> seconds.<br />
<br />
Các cách khác:
Ngoài một số cách mình đã giới thiệu ở trên ra thì còn có nhiều cách nữa, hãy tìm cho mình một biện pháp tốt nhất. Tham khảo thêm:
How to Install Download Button With Timer Countdown by dgntemplate
