Tạo nút đếm ngược hiển thị mã sau 30 giây trong Wordpress

Hướng dẫn tạo button đếm ngược hiển thị mã nội dung Wordpress

Mô tả chức năng: Ban đầu sẽ có 1 button, khi người dùng nhấn vào button thì thời gian sẽ bắt đầu đếm ngược sau một khoảng thời gian mặc định là 30 giây. Sau khi thời gian đếm ngược quay về 0 thì button sẽ bị ẩn đi và sẽ hiển thị mã hoặc nội dung. Và nội dung hiển thị cũng sẽ được mã hoá base64 nhằm bảo mật tránh người dùng F12 thần thánh kkk.

Xem thêm: Tạo button Wordpress 60 giây đếm ngược hiển thị link download

Hướng dẫn sử dụng

Bước 1: Truy cập nguồn website > chọn thư mục child theme của bạn. Trong thư mục child theme, tạo thư mục có tên “js“. Trong thư mục js hãy tạo thêm 1 file tên “countdown.js” và sao chép mã code bên dưới vào trong file “countdown.js” này.

*Lưu ý: Bạn nên sử dụng child theme, lý đơn giản đó là đảm bảo các tinh chỉnh của bạn sẽ không bị mất đi nếu sau này cập nhật themes bản mới hơn.

(function ($) {
  $(document).ready(function () {
    var countdownInterval = null;
    var revealButton = $("#revealButton");
    var codeContainer = $("#codeContainer");
    var encodedContent = codeContainer.data("encoded-content"); // Mã hoá nội dung base64

    codeContainer.hide(); // Hide the code container initially

    revealButton.on("click", function () {
      revealButton.prop("disabled", true);
      countdownInterval = setInterval(function () {
        var remainingTime = parseInt(revealButton.data("remaining-time")) || 30; //có thể thay đổi số giây từ 30 thành số giây bạn muốn
        remainingTime--;

        if (remainingTime <= 0) {
          clearInterval(countdownInterval);
          revealButton.hide();
          codeContainer.show(); // Show the code container after countdown
          codeContainer.text(decodeURIComponent(escape(atob(encodedContent)))); // Giải mã hoá và hiển thị nội dung
        }

        revealButton.data("remaining-time", remainingTime);
        revealButton.text("Mã sẽ hiển thị sau " + remainingTime + " giây");
      }, 1000);
    });
  });
})(jQuery);

Bước 2: Truy cập phần giao diện trên webiste > Theme File Editor > Functions.php và sao chép đoạn code bên dưới vào nó.

function enqueue_custom_script()
{
          wp_enqueue_script('custom-script', get_stylesheet_directory_uri() . '/js/countdown.js', array('jquery'), '1.0', true);
}

add_action('wp_enqueue_scripts', 'enqueue_custom_script');
function demnguoc_wiki_shortcode($atts)
{
          $atts = shortcode_atts(
                    array(
                              'noidung' => '',
                    ),
                    $atts
          );

          $encoded_content = base64_encode($atts['noidung']);
          $encoded_content_js = esc_js($encoded_content);

          ob_start(); ?>
          <button id="revealButton">Nhấn để hiển thị mã</button>
          <div id="codeContainer" data-encoded-content="<?php echo $encoded_content_js; ?>">
                    <!-- Encoded content will be displayed after countdown -->
          </div>
          <?php
          $output = ob_get_clean();
          return $output;
}

add_shortcode('demnguoc_wiki', 'demnguoc_wiki_shortcode');

Bước 3: Sao chép dán đoạn shortcode bên dưới vào bất kỳ nơi nào bạn muốn, và thay đổi phần nội dung hiển thị.

[demnguoc_wiki noidung="nội dung muốn hiển thị thay đổi ở đây"]

UPDATE Cách 2: Đếm ngược hiển thị text lấy mã mật khẩu sau 30 giây

(Dành cho các bạn thấy cách 1 quá phức tạp khó hiểu)

Bạn chỉ cần copy đoạn code này đưa nó vào trong file Functions.php là được mà không cần phải mò vào nguồn thêm tệp js gì hết cho phức tạp. Đặc biệt có mã hoá luôn cả phần nội dung cho bạn để tránh những người nhấn F12 hoặc Ctrl + U để thấy được mã muốn ấn. Tuyệt vời nhỉ :)))

function custom_content_shortcode($atts, $content) {
$atts = shortcode_atts(array(
'text' => '',
), $atts);

$output = '<style>
#start-countdown {
background-color: #0073e6;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
}
#start-countdown:disabled {
background-color: #ccc;
cursor: not-allowed;
}
</style>';

$output .= '<div id="countdown-container">';
$output .= '<button id="start-countdown">Hiển thị mã</button>';
$output .= '<div id="additional-content" style="display:none;"></div>'; // Để trống vì nội dung sẽ được thêm thông qua JavaScript
$output .= '</div>';

$output .= '<script>
jQuery(function($) {
$("#start-countdown").click(function() {
var $countdownButton = $(this);
$countdownButton.prop("disabled", true);
var countdown = 30;

var countdownInterval = setInterval(function() {
if (countdown <= 0) {
clearInterval(countdownInterval);
$countdownButton.hide();
// Hiển thị nội dung sau 30 giây
var base64Content = "' . base64_encode(esc_html($atts['text'])) . '";
$("#additional-content").text(atob(base64Content)).show();
} else {
$countdownButton.text("Vui lòng đợi: " + countdown + " giây");
countdown--;
}
}, 1000);
});
});
</script>';

return $output;
}

function load_jquery() {
if (!is_admin()) {
wp_enqueue_script('jquery');
}
}
add_action('wp_enqueue_scripts', 'load_jquery');
add_shortcode('noidung', 'custom_content_shortcode');

Và đoạn shortcode để hiển thị phần chữ text nội dung đó là:

[noidung text="noi dung muon hien thi"]

Chúc các bạn thành công!!!!