使用 wp_add_inline_script 函数向 WordPress 站点输出脚本
前面我们介绍了wpadd_inline_style函数的使用，并为主题添加自定义样式切换功能，既然有函数可以向站点输出 css 样式，同时也可以向站点输出 script 脚本，用到的是wp_add_inline_script 函数。
函数只有在脚本已经在队列中时才会添加代码，接受包含代码的字符串$data。如果将两个或更多的代码块添加到同一个脚本$handle中，它们将按照添加的顺序打印，也就是说，后者添加的代码可以重新声明前面的代码。
一、使用
wp_add_inline_script( $handle, $data );
二、参数
1、$handle
(string) (必填)添加额外样式的脚本的名称，小写的字符串。默认值:无
2、$data
(string) (必填)包含要添加的CSS的字符串。默认值:无
3、$position
(string)(可选)是在 handle 之前还是之后添加内联脚本。默认值:after
三、来源
文件: wp-includes/functions.wp-scripts.php
function wp_add_inline_script( $handle, $data, $position = 'after' ) {
_wp_scripts_maybe_doing_it_wrong( __FUNCTION__ );
if ( false !== stripos( $data, '' ) ) {
_doing_it_wrong( __FUNCTION__, sprintf(
/* translators: 1: [script], 2: wp_add_inline_script() */
__( 'Do not pass %1$s tags to %2$s.' ),
'[code]<script>[/code]',
'[code]wp_add_inline_script()[/code]'
), '4.5.0' );
$data = trim( preg_replace( '#[script[^>]*>(.*)[/script]#is', '$1', $data ) );
}
return wp_scripts()->add_inline_script( $handle, $data, $position );
}
注：HTML 标签会被站点直接解析，所以 code 的尖括号改成了中括号。
四、实例
1、下面的代码可以很容易地将Typekit’s JavaScript添加到您的主题中:
function mytheme_enqueue_typekit() {
wp_enqueue_script( 'mytheme-typekit', 'https://use.typekit.net/.js', array(), '1.0' );
wp_add_inline_script( 'mytheme-typekit', 'try{Typekit.load({ async: true });}catch(e){}' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_typekit' );
输出结果：
[script type="text/javascript" src="https://use.typekit.net/.js?ver=1.0"]
try{Typekit.load({ async: true });}catch(e){}
[/script]
注：加载 JS 脚本标签由于站点会直接解析，所以将尖括号改成了中括号。
2、添加内联脚本
function theme_prefix_enqueue_script() {
wp_enqueue_script( 'main-js', '/main.js', array(), '1.0' );
wp_add_inline_script( 'main-js', 'alert("hello world");' );
}
add_action( 'wp_enqueue_scripts', 'theme_prefix_enqueue_script' );
注：『main-js』需要与已加载的 JS 脚本名称一样，内联脚本将添加到已加载脚本之前或者之后的位置。
3、对于依赖于jquery的脚本，请使用以下命令:
function theme_prefix_enqueue_script() {
if ( ! wp_script_is( 'jquery', 'done' ) ) {
wp_enqueue_script( 'jquery' );
}
wp_add_inline_script( 'jquery-migrate', 'jQuery(document).ready(function(){});' );
}
add_action( 'wp_enqueue_scripts', 'theme_prefix_enqueue_script' );
通过wp_add_inline_script函数，我们就可以在 PHP 代码中控制并输出 JS 脚本。原文地址
