Shortcode tạo nút click chờ 30s mới hiển thị liên kết hoặc kết quả
Bạn copy all đoạn code php phía dưới cho vào file function.php của theme đang active trên website wordpress của bạn nhé!
Demo:
[ogwsl_demo second=30 link=”MEPAGEVN” title_button=”Lấy mã” color_background=”#f40202″ color_button=”#ffffff” size_second=”24″]
/*
* Cách dùng [ogwsl second=30 link="MEPAGEVN" title_button="Lấy mã" color_background="#f40202" color_button="#ffffff" size_second="24"]
*/
if (!function_exists( 'OgWaitShowLink' ) ) {
add_shortcode('ogwsl', 'OgWaitShowLink');
function OgWaitShowLink($atts) {
extract(shortcode_atts(array(
'second' => 30, /*số giây sẽ đếm sau khi click nút*/
'size_second' => '24', /*kích thước số đếm*/
'link' => get_home_url(), /*Liên kết sẽ hiển thị sau khi đếm xong*/
'title_button' => 'Click here!!', /*Tiêu đề nút*/
'color_background' => '#f40202', /*Màu nền*/
'color_button' => '#ffffff', /*Màu chữ*/
),$atts));
return '<div class="ogwsl" onclick="animateValue(\'value-ogwsl\', '.$second.', 0, '.$second.'000, \'show-link\', \'btn-ogwsl\')" style="background:'.$color_background.';text-align:center;cursor: pointer;">
<div style="text-align:center"><button id="btn-ogwsl" class="btn btn-primary" style="background:'.$color_background.';color:'.$color_button.';cursor: pointer;">'.$title_button.'</button></div>
<div id="value-ogwsl" class="hidden" style="font-size:'.$size_second.'px; color:'.$color_button.'">'.$second.'</div>
<div id="show-link" class="hidden"><span style="color:'.$color_button.'">'.$link.'</span></div>
</div>
<script>function animateValue(idvalue, start, end, duration, showlink, idbtn) {
var btn = document.getElementById(idbtn);
var obj = document.getElementById(idvalue);
var sl = document.getElementById(showlink);
if (start === end) {return;};
btn.classList.add("hidden");obj.classList.remove("hidden");
var range = end - start;
var current = start;
var increment = end > start? 1 : -1;
var stepTime = Math.abs(Math.floor(duration / range));
var timer = setInterval(function() {
current += increment;
obj.innerHTML = current;
if (current == end) {
clearInterval(timer);sl.classList.remove("hidden");obj.classList.add("hidden");
}
}, stepTime);
}</script><style>.hidden{display:none !important}</style>
';
}
}