Tạo Nút Tải Về đếm Ngược Không Cần Plugin Cho Bài Viết Wordpress

Để tạo nút tải về đếm ngược thời gian và tích hợp với Advanced Custom Fields (ACF) trong WordPress, bạn cần sử dụng một số đoạn mã PHP, JavaScript, HTML, và CSS. Việc sử dụng ACF sẽ giúp bạn dễ dàng điền link tải về trực tiếp từ bảng điều khiển WordPress mà không cần chỉnh sửa mã nguồn.

Tạo nút tải về đếm ngược không cần plugin cho bài viết WordPress

Bước 1: Tạo trường ACF cho Nút tải về đếm ngược

Cài đặt và kích hoạt plugin Advanced Custom Fields (ACF).

Tạo một trường tùy chỉnh mới (Custom Field) với:

Tên trường: link_download

Loại trường: URL

Gán trường này cho bài viết, trang, hoặc loại nội dung mà bạn muốn.

Điền link vào trong bài viết

Bước 2: Chèn code Nút tải về đếm ngược vào file fuctions.php

Mã PHP dưới đây sẽ hiển thị nút tải về và lấy link từ trường ACF vào file fuctions.php

//Tạo nút tải về đếm ngược cho bài viết
function tunlw_button_download() {
// Lấy link tải về từ ACF
$link_download = get_field('link_download');

if ($link_download): ?>
    <button id="downloadBtn" data-url="<?php echo esc_url($link_download); ?>">
        Bấm để tải về
    </button>
    <div id="countdownContainer" style="display: none;">
        Đang đếm ngược: <span id="countdown">10</span> giây
    </div>
<?php endif; ?>
<!-- Custom CSS -->
<style>
	#downloadBtn {
	    padding: 10px 20px;
	    font-size: 16px;
	    color: #fff;
	    background-color: #007bff;
	    border: none;
	    border-radius: 5px;
	    cursor: pointer;
	    transition: opacity 0.3s;
	}

	#countdownContainer {
	    margin-top: 10px;
	    font-size: 16px;
	    color: #333;
	}
</style>
<script type="text/javascript">
	document.addEventListener("DOMContentLoaded", () => {
    const downloadBtn = document.getElementById("downloadBtn");
    const countdownContainer = document.getElementById("countdownContainer");
    const countdown = document.getElementById("countdown");
    let timeLeft = 10; // Thời gian đếm ngược (giây)
    let timer;

    downloadBtn.addEventListener("click", () => {
        // Hiển thị phần đếm ngược và ẩn nút bấm
        downloadBtn.style.display = "none";
        countdownContainer.style.display = "block";

        // Bắt đầu đếm ngược
        timer = setInterval(() => {
            timeLeft--;
            countdown.textContent = timeLeft;

            if (timeLeft <= 0) {
                clearInterval(timer);
                const url = downloadBtn.getAttribute("data-url");
                if (url) {
                    // Mở link ở tab mới
                    window.open(url, "_blank");
                }
            }
        }, 1000);
    });
});

</script>
<?php }
add_shortcode('sc_button_download', 'tunlw_button_download'); 
//--------------------------------------------------------------------------------------------------

//Tạo nút tải về đếm ngược cho bài viết

function tunlw_button_download() {

// Lấy link tải về từ ACF

$link_download = get_field('link_download');

if ($link_download): ?>

Bấm để tải về

</button>

Đang đếm ngược: <span id="countdown">10</span> giây

</div>

<?php endif; ?>

<style>

#downloadBtn {

padding: 10px 20px;

font-size: 16px;

color: #fff;

background-color: #007bff;

border: none;

border-radius: 5px;

cursor: pointer;

transition: opacity 0.3s;

}

#countdownContainer {

margin-top: 10px;

font-size: 16px;

color: #333;

}

</style>

document.addEventListener("DOMContentLoaded", () => {

const downloadBtn = document.getElementById("downloadBtn");

const countdownContainer = document.getElementById("countdownContainer");

const countdown = document.getElementById("countdown");

let timeLeft = 10; // Thời gian đếm ngược (giây)

let timer;

downloadBtn.addEventListener("click", () => {

// Hiển thị phần đếm ngược và ẩn nút bấm

downloadBtn.style.display = "none";

countdownContainer.style.display = "block";

// Bắt đầu đếm ngược

timer = setInterval(() => {

timeLeft--;

countdown.textContent = timeLeft;

if (timeLeft <= 0) {

clearInterval(timer);

const url = downloadBtn.getAttribute("data-url");

if (url) {

// Mở link ở tab mới

window.open(url, "_blank");

}

}, 1000);

});

</script>

<?php }

add_shortcode('sc_button_download', 'tunlw_button_download');

//--------------------------------------------------------------------------------------------------

Xem thêm bài viết khác

Cách sử dụng:

Chèn shortcode vào template nơi bạn muốn hiển thị nút tải về (ví dụ: single.php, page.php).

Khi tạo hoặc chỉnh sửa bài viết/trang, bạn sẽ thấy trường ACF link_download. Điền link tải về vào đó.

Kết luận:

Với đoạn mã trên, bạn sẽ có một nút tải về có đếm ngược thời gian, mang lại trải nghiệm người dùng tốt hơn.

Bạn có thể tùy chỉnh giao diện nút bằng CSS hoặc thêm hiệu ứng để làm cho nút đẹp mắt hơn.

Lợi ích của cách làm này:

Dễ dàng quản lý link tải về từ bảng điều khiển WordPress.
Không cần chỉnh sửa mã nguồn mỗi khi thay đổi link tải về.
Tăng trải nghiệm người dùng với hiệu ứng đếm ngược.

Gợi ý mở rộng:

Bạn có thể thêm tính năng kiểm tra trước khi tải về, ví dụ như yêu cầu người dùng đăng nhập hoặc đồng ý điều khoản.
Có thể tùy chỉnh thời gian đếm ngược bằng cách thay đổi giá trị timeLeft trong JavaScript.

Nếu bạn cần hỗ trợ thêm về việc tích hợp hoặc tùy chỉnh, hãy cho mình biết nhé!

Theo dỗi thêm mình qua Fanpage hoặc Youtube nhé.

Chúc bạn thành công.