讓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更改為您想要的日期，但請確保使用該確切格式。