使用 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 脚本。原文地址