我这样做是因为我的内联脚本依赖于另一个脚本,并且我希望在加载后可以灵活地插入它。
此外,这是一个内联脚本,因为我正在将php变量传递到javascript中(例如主题路径等)。
预先感谢。
#1 楼
嗯,您有wp_localize_script(),但这仅用于传递数据。否则,您可以执行以下操作:function print_my_inline_script() {
if ( wp_script_is( 'some-script-handle', 'done' ) ) {
?>
<script type="text/javascript">
// js code goes here
</script>
<?php
}
}
add_action( 'wp_footer', 'print_my_inline_script' );
您不应该依赖于内联脚本在其依赖的脚本之后打印,而是稍后。
#2 楼
只是不要使其成为内联脚本,然后将动态参数作为变量传递给它。奥托(Otto)就如何有效执行此操作编写了很好的指南。WordPress 3.3还将使此功能更加强大:https://core.trac.wordpress.org/ticket/11520
#3 楼
此解决方案类似于@scribu的答案,但遵循wp_enquque_script()
的形式,并且如果脚本的依赖项包含在标头中,则会将脚本放在标头中。/**
* Enqueue inline Javascript. @see wp_enqueue_script().
*
* KNOWN BUG: Inline scripts cannot be enqueued before
* any inline scripts it depends on, (unless they are
* placed in header, and the dependant in footer).
*
* @param string $handle Identifying name for script
* @param string $src The JavaScript code
* @param array $deps (optional) Array of script names on which this script depends
* @param bool $in_footer (optional) Whether to enqueue the script before </head> or before </body>
*
* @return null
*/
function enqueue_inline_script( $handle, $js, $deps = array(), $in_footer = false ){
// Callback for printing inline script.
$cb = function()use( $handle, $js ){
// Ensure script is only included once.
if( wp_script_is( $handle, 'done' ) )
return;
// Print script & mark it as included.
echo "<script type=\"text/javascript\" id=\"js-$handle\">\n$js\n</script>\n";
global $wp_scripts;
$wp_scripts->done[] = $handle;
};
// (`wp_print_scripts` is called in header and footer, but $cb has re-inclusion protection.)
$hook = $in_footer ? 'wp_print_footer_scripts' : 'wp_print_scripts';
// If no dependencies, simply hook into header or footer.
if( empty($deps)){
add_action( $hook, $cb );
return;
}
// Delay printing script until all dependencies have been included.
$cb_maybe = function()use( $deps, $in_footer, $cb, &$cb_maybe ){
foreach( $deps as &$dep ){
if( !wp_script_is( $dep, 'done' ) ){
// Dependencies not included in head, try again in footer.
if( ! $in_footer ){
add_action( 'wp_print_footer_scripts', $cb_maybe, 11 );
}
else{
// Dependencies were not included in `wp_head` or `wp_footer`.
}
return;
}
}
call_user_func( $cb );
};
add_action( $hook, $cb_maybe, 0 );
}
// Usage
enqueue_inline_script('test','alert(\'enqueue inline script test\');',array( 'jquery'));
注意:这使用匿名函数,但是对于5.3之前的PHP版本,可以轻松地将其转换为类。
#4 楼
从WordPress 4.5开始,您可以使用wp_add_inline_script():add_action( 'wp_enqueue_scripts', 'cyb_enqueue_scripts' );
function cyb_enqueue_scripts() {
wp_enqueue_script( 'myscript', 'url/to/myscript.js', array(), '1.0' );
wp_add_inline_script( 'myscript', 'Your inline javascript code gos here' );
}
#5 楼
我发现更好的方法是使用wp_localize_script()
,如@scribu建议。 通常,我决定使用嵌入式Javascript,因为我需要为脚本提供一些PHP变量。可以用
wp_localize_script()
解决。我将提供一个示例:您有一个带有某些选项的数组
$aFoo
,需要将其传递给脚本。$aFoo = array( 'option1' => $option1Value, 'option2' => $option2Value );
使用内嵌脚本:
<script>
var oFoo = {};
oFoo.option1 = <?php echo $aFoo['option1'] ?>;
oFoo.option2 = <?php echo $aFoo['option2'] ?>;
//do some stuff with oFoo
</script>
使用
wp_localize_script()
:wp_register_script( 'script_name', 'pathToScript/script.js', array( 'jquery' )); //if jQuery is not needed just remove the last argument.
wp_localize_script( 'script_name', 'object_name', $aFoo ); //pass 'object_name' to script.js
wp_enqueue_script( 'script_name' );
然后,
pathToScript/script.js
为:var oFoo = {};
oFoo.option1 = object_name.option1;
oFoo.option2 = object_name.option2;
//do some stuff with oFoo (no PHP needed)
这样,您就不再需要嵌入式脚本。
#6 楼
抄写是绝对正确的。无论如何,我想添加一些信息:我希望我的函数一次调用一个脚本,无论调用频率如何。它是与内容相关的功能,因此我不能等待任何钩子。我使用了scribus信息和WP核心的一些读物来提出这个问题:
function print_script_once() {
if(!wp_script_is('my-handle', 'done')) {
echo "<script>alert('once!');</script>";
global $wp_scripts;
$wp_scripts->done[] = 'my-handle';
}
}
add_action('get_footer', print_script_once);
使用此方法,我可以打印一次内联脚本。就我而言,我有一个创建共享按钮并需要对所有按钮执行一个脚本的函数。但只有一次。
评论
回声内联脚本方法是至少在某一点上如何构造“二十十七”主题的方法。我也使用这种技术。效果很好,并允许您挂接到不同的地方。
–乔什·哈布达斯(Josh Habdas)
17年6月1日在1:05
评论
当然,这仅在您所依赖的脚本已经输出的情况下有效吗?如果您所依赖的脚本也已在wp_footer中注册,并且在内联脚本代码之后执行,则内联脚本根本不会被写入客户端,因此会执行吗?
–山姆·和平(Sam Peacey)
2014年5月31日下午4:19
从Wordpress 4.5开始,您可以将wp_add_inline_script()与wordpress jquery一起使用
–神州Divakaran
16年6月25日在6:41