Tạo nút download kèm thời gian đếm ngược cho WordPress không dùng plugin

Nút tải xuống kèm thời gian đếm ngược là một tính năng thường thấy trên các trang web hoặc ứng dụng, đặc biệt là những trang cung cấp dịch vụ tải xuống tệp tin. Trong bài viết này, mình sẽ chia sẻ cho bạn code tạo nút này, bạn có thể dễ dàng áp dụng cho website của mình.

Tạo nút download kèm thời gian đếm ngược cho WordPress

Mục đích

• Tạo sự chờ đợi: Thời gian đếm ngược tạo ra cảm giác chờ đợi, có thể làm tăng sự hứng thú của người dùng đối với tệp tin sắp tải xuống.
• Ngăn chặn tải xuống quá tải: Trong một số trường hợp, thời gian đếm ngược được sử dụng để hạn chế số lượng tải xuống đồng thời, giúp giảm tải cho máy chủ. Hiển thị quảng cáo: Một số trang web sử dụng thời gian đếm ngược để hiển thị quảng cáo trước khi cho phép người dùng tải xuống tệp tin.
• Tăng tính bảo mật: Đôi khi, thời gian chờ được thêm vào để giảm tải các cuộc tấn công DDoS.

Cách hoạt động

• Khi người dùng nhấp vào nút tải xuống, một bộ đếm thời gian sẽ bắt đầu.
• Trong thời gian đếm ngược, người dùng có thể thấy đồng hồ đếm ngược hiển thị thời gian còn lại trước khi tải xuống bắt đầu.
• Sau khi thời gian đếm ngược kết thúc, nút tải xuống sẽ trở nên khả dụng và người dùng có thể bắt đầu tải xuống tệp tin.

Cài đặt nút download kèm thời gian đếm ngược

Chèn đoạn code bên dưới vào functions của theme bạn đang dùng.

function btn_dowload($atts){
    ob_start();?>
    <div class="box-get">
        <div class="box-get-coupon btn-red-pt box-coupon text-center" post-id="<?php echo get_the_ID();?>" data-link="<?php echo base64_encode($atts['link']); ?>">
            <span>Bấm vào đây để tải xuống</span>
        </div>
    </div>
<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('.box-get-coupon.box-coupon').click(function(){
            jQuery('.box-get-coupon').removeClass('btn-red-pt');
            jQuery('.box-get-coupon').off('click');
            var n=15;
            var encodedLink = jQuery(this).attr('data-link');
            var downloadLink = atob(encodedLink);
            var intervalId = setInterval(function(){
                n--;
                if(n>0){
                    jQuery('.box-get-coupon').html('Link sẽ hiển thị sau: ' + n + ' giây ');
                }
                if(n==0){
                    clearInterval(intervalId);
                    jQuery('.box-get-coupon').html('<a href="' + downloadLink + '" download>Tải xuống ngay</a>');
                }
            },1000);
        });
    }); 
</script>
<?php
    $content = ob_get_contents();
    ob_end_clean();
    return $content;
}
add_shortcode('btn_dowload','btn_dowload');

Thêm css làm đẹp cho nút

.box-get-coupon.btn-red-pt.box-coupon.text-center,
.box-get-coupon.box-coupon.text-center{
    background: #8224e3;
    padding: 10px;
    border-radius: 10px;
    width: fit-content;
    margin: 0 auto;
    color: #fff;
    cursor: pointer;
}
.box-get-coupon.box-coupon.text-center a {
    color: #fff;
}

Thêm nút khi đăng bài viết

Bạn thêm một html và chèn đoạn code này vào và thay thế link download của bạn

[btn_dowload link="link download của bạn"]