WordPress创建倒计时显隐文本按钮及functions.php报错修复

1 修复functions.php语法报错问题 #

报错原因 #

functions.php是PHP执行文件，不能直接写入<script>这类HTML/JS代码，PHP解析器遇到未被正确包裹的<会判定为语法异常。

正确添加代码 #

把下面这段代码完整添加到你Flatsome子主题的functions.php文件末尾即可：

// 前端页脚注入倒计时功能JS
add_action('wp_footer', 'inject_countdown_custom_js');
function inject_countdown_custom_js() {
?>
<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>
<?php
}

上述代码通过WordPress官方推荐的wp_footer钩子注入JS，不会触发PHP语法错误。

2 修复按钮不生效问题 #

不生效原因 #

• 原JS代码添加错误导致功能未正常加载
• JS默认仅对从谷歌、谷歌越南站点跳转过来的访问者渲染按钮，直接打开站点的访问者看不到按钮
• 自定义属性不符合HTML规范，部分浏览器读取属性可能出现异常

修复方案 #

按钮代码无需修改，直接插入到文章/页面的内容编辑区即可。如果需要测试非谷歌来源也能显示按钮，临时注释或删除JS里的if (flagref)包裹判断即可。

可选优化建议 #

• 把自定义属性改为标准data-前缀格式，比如data-code-ref="ref51"、data-countdown="8"，对应修改JS里的取值逻辑为cNode.attr('data-code-ref')即可，兼容性更好
• 如果需要给所有访问者显示按钮，直接删除JS中if (flagref)的包裹判断即可

内容的提问来源于stack exchange，提问作者Anita