是否通过短码在页脚添加JS?

时间:2018-09-13 作者:Drewdavid

我创建了一个进行一些PHP处理的短代码,然后返回一些javascript;当前代码如下:

<?php
add_shortcode( \'round_time_to_next_15_min_interval\', \'round_time_to_next_15_min_interval\' );

function round_time_to_next_15_min_interval() {

// get current date & time
$current_date = date(\'d-M-Y g:i:s A\');
$current_time = strtotime($current_date);

// create new date & time that is the nearest next 15 minute interval
$frac = 900;
$r = $current_time % $frac;
$new_time = $current_time + ($frac-$r);
$new_date = date(\'d-M-Y g:i:s A\', $new_time);

// JS script to localize time for user & insert result into form field
$html_out = "<script>
var date = new Date(\'" . $new_date . " UTC\');
var NextWebinarTime = date.toLocaleString();
// document.getElementById(\'webinartime\').innerHTML = NextWebinarTime;
document.querySelector(\'[value=\\"Next Webinar Time:\\"]\').innerHTML = NextWebinarTime;
</script>
";

// return script
return $html_out;

}
?>
目前,正如预期的那样,短代码在使用短代码的地方准确地吐出代码。

我想做的是让它将JS脚本放在页面的页脚,但我不知道如何将其纳入我当前的代码中。

1 个回复
最合适的回答,由SO网友:Xhynk 整理而成

我会给你的地址写上地址,你很可能会排队,并考虑使用wp_add_inline_script()wp_localize_script().

但是,如果出于某种原因,您不愿意这么做,您可以删除return 并使用add_action(\'wp_footer\', \'…\');. 这实际上类似于在页面上使用某个短代码时,仅将注册的脚本/样式排队。

如果在放置短代码时不需要任何东西,可以使用它包装整个代码,否则需要通过命名和传递函数或使用Closure 具有use(). 下面是它的后一个版本:

add_shortcode( \'round_time_to_next_15_min_interval\', \'round_time_to_next_15_min_interval\' );
function round_time_to_next_15_min_interval() {

    // get current date & time
    $current_date = date(\'d-M-Y g:i:s A\');
    $current_time = strtotime( $current_date );

    // create new date & time that is the nearest next 15 minute interval
    $frac = 900;
    $r = $current_time % $frac;
    $new_time = $current_time + ($frac-$r);
    $new_date = date(\'d-M-Y g:i:s A\', $new_time);

    // JS script to localize time for user & insert result into form field
    $script = "<script id=\'round_time_to_next_15_min_interval\'>
        var date = new Date(\'" . $new_date . " UTC\');
        var NextWebinarTime = date.toLocaleString();
        // document.getElementById(\'webinartime\').innerHTML = NextWebinarTime;
        document.querySelector(\'[value=\\"Next Webinar Time:\\"]\').innerHTML = NextWebinarTime;
    </script>
    ";

    add_action( \'wp_footer\', function() use( $script ){
        echo $script;
    });

    // return script
    // return $script; // Commented Out so it doesn\'t output at source of the shortcode
}
我翻转了JavaScript注释,因此它输出innerHTML 在这个问题上Example Page.

请注意,如果您在一个页面上多次使用此短代码,您将多次获得脚本输出。如果是这种情况,则需要包含某种类型的标志(例如,全局变量从0开始,在第一次运行后递增为1,如果大于0,则不输出脚本),以便它仅在第一次运行时输出-或者如果您将文件排队,则不会出现问题。

结束