创建一个按钮以在一定时间后显示隐藏的文本

Question

我想创建一个按钮（在 Wordpress 上），它会在几秒钟后显示一个文本。 我试图将此代码添加到 Childtheme (flatsome) function.php 但我收到一个错误由于文件 wp-content/themes/flatsome-child 的第 13 行出现错误，您的 PHP 代码更改已回滚/函数.php。请修复并再次尝试保存。 语法错误，意外的 ' 行： <script type = "text/javascript">:

<script type = "text/javascript" >

var referrer = document.referrer;
ifm_list_browser = ['google.com', 'google.com.vn'];

function checkFefer(f, e) {
    var i = 0;
    for (i = 0; i < e.length; i++) {
        if (f.indexOf(e[i]) > -1) return true;
    }

    return false;
}

let stores = {
    'ref48': 'ký tự đặc biệt',
    'ref49': 'các bạn có thể chèn số 122344',
    'ref50': 'đây là demo vui vẻ',
    'ref51': '343596',
}

var flagref = checkFefer(referrer, ifm_list_browser)
if (flagref) {
    var html = '<p style="text-align:center;"><button style="background: #e81e1e;border-radius: 10px;border:none;color: #ffffff;width: 59%;padding: 10px 0;text-transform: uppercase;font-weight: bold;font-size: 16px;outline: none; cursor: pointer;" id="countDown40" get-code="true" class="coundownmobile" onclick="startcountdown(); this.onclick=null;">Lấy mã bảo mật</button></p>';
    jQuery(document).ready(function($) {
        $("#references40").empty();
        html = $.parseHTML(html);
        $("#references40").append(html);
    });

}

function startcountdown() {
    document.getElementById('countDown40').setAttribute("style", "background: #0b1df5;border-radius: 10px;border:none;color: #ffffff;width: 59%;padding: 10px 0;text-transform: uppercase;font-weight: bold;font-size: 16px;outline: none; cursor: pointer;");
    let cNode = jQuery("#references40");
    let cKey = cNode.attr('code-ref');
    let cCount = cNode.attr('countdown');
    let counter = parseInt(cCount) || 40;
    var countdownCode = setInterval(function() {
        counter--;
        document.getElementById('countDown40').innerHTML = 'Mã bảo mật sẽ hiện sau ' + counter + ' giây' + ' bạn  nhé';
        if (counter == 0) {
            document.getElementById('countDown40').innerHTML = `Mã bảo mật của bạn là: ${stores[cKey]}`;
            document.getElementById('countDown40').setAttribute("style", "background: #ea3b7b;border-radius: 10px;border:none;color: #ffffff;width: 59%;padding: 10px 0;text-transform: uppercase;font-weight: bold;font-size: 16px;outline: none; cursor: pointer;");
            clearInterval(countdownCode);
            return false;
        }
    }, 1000);
}

</script>

此外，当我尝试将此代码用于 Wordpress 上的按钮时，它不起作用：

<div id="references40" code-ref="ref51" countdown="8" style="text-align: center; font-weight: 600;"> TEXT HERE </div>

请帮我解决它的问题。提前致谢。

Answer 1

您收到 PHP 错误的原因是您试图将 HTML 模板代码放入 PHP 文件中。 PHP 文件用于执行代码。如果要向主题添加代码，可以使用下面的代码。这挂钩 wp_footer 挂钩，并将您的代码放在主题的页脚中。

add_action('wp_footer', 'footer_code_so_69690506'); 
function footer_code_so_69690506() { 
    ?>
    <--YOUR html code -->
    <?php
}