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

Question

我想创建一个按钮(在Wordpress上)，它将在几秒钟后显示文本。我试图将此代码添加到Childtheme (flatsome) function.php中，但我得到了一个错误您的PHP代码更改由于文件wp-content/themes/flatsome-child/functions.php的第13行错误而回滚。请修复并再次尝试保存。语法错误，意外的'<'，期望文件结束，行:<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
}