Cách tạo nút đếm ngược để hiển thị PASS trong WordPress

Nếu bạn muốn chia sẻ mật khẩu hoặc một chuỗi ký tự nào đó ở trong 1 bài viết mà không hiển thị ngay lập tức, đoạn mã dưới đây sẽ giúp bạn làm điều đó.

1. Hình ảnh demo nút đếm ngược

Người dùng sẽ cần chờ một khoảng thời gian sau khi nhấn nút hiển thị mật khẩu mới có thể xem được nội dung.

Việc này không chỉ giữ chân người dùng lâu hơn trên trang web của bạn, có lợi cho SEO, mà còn được nhiều trang web áp dụng. Đặc biệt, đoạn mã này cũng có thể tích hợp vào plugin “Yêu cầu nhập mật khẩu để xem tiếp nội dung”.

Cách tạp nút đếm ngược để hiển thị PASS trong WordPress

2. Chi sẻ Code chèn vào functions

Trước tiên bạn chỉ cần dán code sau vàowp-content/themes/{YOUR-THEME}/functions.phpnhé

/*
 * Code đếm ngược để hiển thị mật khẩu
 * Cách dùng [pass_countdown code="1234"]
 * Author: digitalmarketing24h.com
 * */add_shortcode('pass_countdown', 'devvn_passvideo_button_countdown_func');
function devvn_passvideo_button_countdown_func($atts)
{
    $atts = shortcode_atts(array(
        'time' => 10,
        'code' => '',
        'before_code' => '',
        'title' => 'Nhấp vào đây để lấy mã bảo mật',
        'mess' => 'Mã bảo mật sẽ hiện sau %s giây',
    ), $atts, 'button_countdown');
    $time = isset($atts['time']) ? intval($atts['time']) : 10;
    $code = isset($atts['code']) ? sanitize_text_field($atts['code']) : '';
    $title = isset($atts['title']) ? sanitize_text_field($atts['title']) : '';
    $mess = isset($atts['mess']) ? sanitize_text_field($atts['mess']) : '';
    $before_code = isset($atts['before_code']) ? sanitize_text_field($atts['before_code']) : '';
    ob_start();
    ?>
    <span data-counter="<?php echo $time;?>" data-mess="<?php echo esc_attr($mess);?>" data-before="<?php echo esc_attr($before_code);?>" data-code="<?php echo esc_attr(base64_encode($code));?>" class="coundownmobile" onclick="startcountdown(this); this.onclick=null;">
        <?php echo $title;?>
    </span>
    <?php
    return ob_get_clean();
}
add_action('wp_footer', 'countdown_script');
function countdown_script(){
    ?>
    <style>
        .coundownmobile{
            background: #e81e1e;
            border-radius: 10px;
            border: none;
            color: #ffffff;
            display: inline-block;
            text-align: center;
            padding: 10px;
            outline: none;
            cursor: pointer;
        }
        .coundownmobile.countdown-loading {
            background: #FF5722;
        }
        .coundownmobile.countdown-done {
            background: green;
        }
    </style>
    <script type="text/javascript">
        function startcountdown(btn){
            btn.classList.add("countdown-loading");
            let counter = btn.getAttribute('data-counter');
            let $code = btn.getAttribute('data-code');
            let mess = btn.getAttribute('data-mess');
            let before = btn.getAttribute('data-before');
            let startcountdown = setInterval(function(){
                counter--;
                btn.innerHTML = mess.replace(/%s/gi, counter);
                if(counter == 0){
                    if($code) {
                        btn.innerHTML = before + ' ' + atob($code);
                        btn.classList.add("countdown-done");
                    }
                    clearInterval(startcountdown);
                    return false;
                }}, 1000);
        }
    </script>
    <?php
}

* Code đếm ngược để hiển thị mật khẩu

* Cách dùng [pass_countdown code="1234"]

* Author: digitalmarketing24h.com

* */

add_shortcode('pass_countdown', 'devvn_passvideo_button_countdown_func');

function devvn_passvideo_button_countdown_func($atts)

{

$atts = shortcode_atts(array(

'time' => 10,

'code' => '',

'before_code' => '',

'title' => 'Nhấp vào đây để lấy mã bảo mật',

'mess' => 'Mã bảo mật sẽ hiện sau %s giây',

), $atts, 'button_countdown');

$time = isset($atts['time']) ? intval($atts['time']) : 10;

$code = isset($atts['code']) ? sanitize_text_field($atts['code']) : '';

$title = isset($atts['title']) ? sanitize_text_field($atts['title']) : '';

$mess = isset($atts['mess']) ? sanitize_text_field($atts['mess']) : '';

$before_code = isset($atts['before_code']) ? sanitize_text_field($atts['before_code']) : '';

ob_start();

<span data-counter="<?php echo $time;?>" data-mess="<?php echo esc_attr($mess);?>" data-before="<?php echo esc_attr($before_code);?>" data-code="<?php echo esc_attr(base64_encode($code));?>" class="coundownmobile" onclick="startcountdown(this); this.onclick=null;">

<?php echo $title;?>

</span>

<?php

return ob_get_clean();

}

add_action('wp_footer', 'countdown_script');

function countdown_script(){

<style>

.coundownmobile{

background: #e81e1e;

border-radius: 10px;

border: none;

color: #ffffff;

display: inline-block;

text-align: center;

padding: 10px;

outline: none;

cursor: pointer;

}

.coundownmobile.countdown-loading {

background: #FF5722;

}

.coundownmobile.countdown-done {

background: green;

}

</style>

function startcountdown(btn){

btn.classList.add("countdown-loading");

let counter = btn.getAttribute('data-counter');

let $code = btn.getAttribute('data-code');

let mess = btn.getAttribute('data-mess');

let before = btn.getAttribute('data-before');

let startcountdown = setInterval(function(){

counter--;

btn.innerHTML = mess.replace(/%s/gi, counter);

if(counter == 0){

if($code) {

btn.innerHTML = before + ' ' + atob($code);

btn.classList.add("countdown-done");

}

clearInterval(startcountdown);

return false;

}}, 1000);

}

</script>

<?php

}

3. Shortcode ra vị trí mong muốn.

Cách dùng như sau. Bạn dùng shortcode [pass_countdown] để hiển thị nút đếm ngược

4. Chỉnh sửa các tham số

time: Đây là thời gian đếm ngược. Tính theo giây. Mặc định là 10
code: Là mã, mật khẩu muốn chia sẻ
before_code: là đoạn text phía trước mật khẩu trên
title: là tên nút khi chưa ấn
mess: là dòng thông báo đếm ngược sau khi ấn nút. %s là số giây còn lại

Ví dụ cụ thể

Ví dụ bạn muốn hiển thịđếm ngược 20ssẽ hiển thị mật khẩu1234 thì shortcode sẽ như sau:

[pass_countdown code="1234" time="20"]

1	[pass_countdown code="1234" time="20"]

Tổng kết:

Dó là các đơn giản nhất để bạn có thể tạo ra một nút đếm ngược hiển thị mật khẩu. Đừng quên Digitalmarketing 24H đang cung cấp đa dạn các tài liệu website như: Plugin, Kho Theme, Ebook, Tài liệu photoshop… Các sản phẩm đều chất lượng, bổ ích , ủng hộ mình nhé!

Xem thêm: