[英]Have Wordpress Read a Shortcode String and Parse a Variable to Javascript
I have a countdown timer on my Wordpress site. 我在Wordpress网站上有一个倒数计时器。 For reference I used this tutorial . 作为参考,我使用了本教程 。 I call/include the .js from a child theme via the footer of my site. 我通过网站的页脚调用/包含来自子主题的.js。
Currently the tutorial has me inserting the countdown timer via <span id="countdown"></span>
. 目前,本教程让我通过<span id="countdown"></span>
插入倒数计时器。
I would like to insert the countdown timer instead, with a shortcode, that contains a variable to be parsed into the .js to set the target date. 我想用一个短代码插入倒数计时器,该计时器包含一个要解析为.js来设置目标日期的变量。
Here is the relevant line of code from the js file, with the static/hard coded date. 这是js文件中的相关代码行,带有静态/硬编码日期。 This is where I want to forward my variable to. 这是我要将变量转发到的地方。
var target_date = new Date("Aug 15, 2019").getTime();
This way I can use a single .js include to create multiple countdown timers. 这样,我可以使用单个.js包含来创建多个倒数计时器。
Eg Shortcode: [Countdown Timer target="Aug 15, 2019"]
例如,简码: [Countdown Timer target="Aug 15, 2019"]
How do I get Wordpress to recognise the shortcode, load the span id and parse the variable to set the target date/time? 如何让Wordpress识别简码,加载范围ID并分析变量以设置目标日期/时间?
Note: I don't mind installing a plugin if there is complexity having the shortcode work. 注意:如果要让简码工作复杂,我不介意安装插件。 My main requirement is to be able to parse a variable, so if it can be done some other way I'd be happy to look into that. 我的主要要求是能够解析变量,因此,如果可以通过其他方式完成此操作,我将很乐意对此进行研究。
This solution will allow for a single timer per page. 该解决方案将允许每页一个计时器。 I know you said you may possibly need more than one, but if not, this will work. 我知道您说过您可能需要多个,但是如果没有,这将起作用。
Include this JS somewhere in your site. 将此JS包含在您网站的某个位置。 Notice I have have it inside of .ready
, please make sure it stays that way. 注意,我在.ready
有它,请确保它保持这种状态。 I also deleted a single line from your example, which will be set with the shortcode. 我还从您的示例中删除了一行,该行将使用简码设置。
<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>
Then include this PHP in your theme's functions.php
file. 然后将此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' );
Then you can use this shortcode [aw_countdownTimer target_date="Feb 14, 2014"]
in any page. 然后,您可以在任何页面中使用此[aw_countdownTimer target_date="Feb 14, 2014"]
。 Just change the Feb 14, 2014
to your desired date, but make sure to use that exact format. 只需将Feb 14, 2014
更改为您想要的日期,但请确保使用该确切格式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.