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

Question

我在Wordpress网站上有一个倒数计时器。 作为参考，我使用了本教程 。 我通过网站的页脚调用/包含来自子主题的.js。

目前，本教程让我通过<span id="countdown"></span>插入倒数计时器。

我想用一个短代码插入倒数计时器，该计时器包含一个要解析为.js来设置目标日期的变量。

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

var target_date = new Date("Aug 15, 2019").getTime();

这样，我可以使用单个.js包含来创建多个倒数计时器。

例如，简码： [Countdown Timer target="Aug 15, 2019"]

如何让Wordpress识别简码，加载范围ID并分析变量以设置目标日期/时间？

注意：如果要让简码工作复杂，我不介意安装插件。 我的主要要求是能够解析变量，因此，如果可以通过其他方式完成此操作，我将很乐意对此进行研究。

Answer 1

该解决方案将允许每页一个计时器。 我知道您说过您可能需要多个，但是如果没有，这将起作用。

将此JS包含在您网站的某个位置。 注意，我在.ready有它，请确保它保持这种状态。 我还从您的示例中删除了一行，该行将使用简码设置。

<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>

然后将此PHP包含在主题的functions.php文件中。

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' );

然后，您可以在任何页面中使用此[aw_countdownTimer target_date="Feb 14, 2014"] 。 只需将Feb 14, 2014更改为您想要的日期，但请确保使用该确切格式。