让Wordpress读取短码字符串并将变量解析为Javascript

我的Wordpress网站上有一个倒计时器。供我参考。我通过我站点的页脚从子主题调用/包含.js

目前，本教程让我通过

插入倒计时

我想插入倒计时计时器，它带有一个短代码，其中包含一个要解析到.js中以设置目标日期的变量

下面是js文件中的相关代码行，带有静态/硬编码日期。这就是我想要将变量转发到的地方

var target_date=新日期（“2019年8月15日”）.getTime（）

这样我就可以使用一个.js include来创建多个倒计时

例如，短代码：
[倒计时目标=“2019年8月15日”]

如何让Wordpress识别短代码、加载span id并解析变量以设置目标日期/时间

注意：如果短代码工作起来很复杂，我不介意安装插件。我的主要要求是能够解析一个变量，因此，如果可以用其他方法进行解析，我很乐意对此进行研究。
此解决方案将允许每页使用一个计时器。我知道你说你可能需要不止一个，但如果没有，这将工作

在你的站点的某个地方包含这个JS。请注意，我已经把它放在
的里面了。准备好了
，请确保它保持原样。我还从您的示例中删除了一行，该行将使用短代码进行设置

<script type="text/javascript">
    jQuery( document ).ready(function() {

        var days, hours, minutes, seconds;

        var countdown = document.getElementById("countdown");

        setInterval(function () {

            var current_date = new Date().getTime();
            var seconds_left = (target_date - current_date) / 1000;

            days = parseInt(seconds_left / 86400);
            seconds_left = seconds_left % 86400;

            hours = parseInt(seconds_left / 3600);
            seconds_left = seconds_left % 3600;

            minutes = parseInt(seconds_left / 60);
            seconds = parseInt(seconds_left % 60);

            countdown.innerHTML = days + "d, " + hours + "h, "
            + minutes + "m, " + seconds + "s";  

        }, 1000);
    });     
</script>

然后您可以在任何页面中使用此短代码
[aw_countdownTimer target_date=“2014年2月14日”]
。只需将2014年2月14日的
更改为您想要的日期，但一定要使用准确的格式。
您希望在同一页面上有多个计时器吗？很可能，所以我想我最好考虑一下。这是否意味着还有第二个变量？我刚刚提出了一个解决方案，可以在每页上使用一个计时器。不幸的是，我在每页使用多个计时器时遇到了问题。好的，太好了。我会试试看。请看下面我的答案，希望它能帮上忙。我还不太适应。我将functions.php添加到我的子主题中，并包含了您的代码（在php标记中）。当我加载页面并查看源代码时，我看到
var target_date=new date（“2014年2月14日”）.getTime（）
。我错过什么了吗？还有，为什么我们要定义两种短代码类型？我不确定“两种短代码类型”是什么意思。这里只有一个短代码。如果您指的是
add_shortcode（'aw_countdownTimer'，'aw_countdownTimer'）
然后
aw_countdownTimer
是短代码的名称，
aw_countdown_timer
是短代码执行的函数。您是否完全按照我的回答对JS执行了操作？这是必须的。另外，我刚刚从PHP中删除了一个

，它只是为了我的测试，我最初忘记了删除它。是的，我只是用你的替换了我的.js。它仍然被包括在我的网站页脚。也许事情发生的顺序不对。。。它应该在标题中吗？（关于我的另一个问题……我想出来了，谢谢）
function aw_countdown_timer ($atts) {
    extract(shortcode_atts(array(
        'target_date' => '',
    ), $atts, 'aw_countdownTimer' ));
    echo '<script>var target_date = new Date("' . $target_date . '").getTime();</script>';
    echo '<span id="countdown"></span>';
}
add_shortcode( 'aw_countdownTimer', 'aw_countdown_timer' );