当前浏览:首页 / WordPress函数 / wp_add_inline_script()

wp_add_inline_script( string $handle, string $data, string $position = 'after' ): bool

向注册的脚本添加额外代码

addmore...

scriptmore...


描述

只有当脚本已经在队列中时,才会添加代码。
接受包含代码的字符串$data。如果将两个或多个代码块添加到同一个脚本$handle中,它们将按照添加的顺序打印,即后一个添加的代码可以重新声明前一个。

另见

  • WP_Scripts::add_inline_script()

参数

$handlestring必填
要向其中添加内联脚本的脚本的名称。
$datastring必填
包含要添加的JavaScript的字符串。
$positionstring可选
是在句柄之前还是之后添加内联脚本。默认'after'

默认:'after'


返回

bool 成功时为true,失败时为false。



源码

查看源码 官方文档


更新日志

版本描述
4.5.0开始引入

用户贡献的笔记

  • 贡献者:Jules ColleRommel Castro

    显然,我们现在应该使用wp_add_inline_script而不是wp_localize_script来显露脚本需要使用的全局对象。

    因此,尽管以前您可以(现在仍然可以)这样做:

    wp_enqueue_script( 'wpdocs-my-script', 'https://url-to/my-script.js' );
    wp_localize_script( 'wpdocs-my-script', 'MYSCRIPT', array(
        'ajaxUrl' => admin_url( 'admin-ajax.php' ),
        'otherParam' => 'some value',
    ) );

    现在似乎建议这样做(我个人认为这更丑陋):

    wp_enqueue_script( 'wpdocs-my-script', 'https://url-to/my-script.js' );
    wp_add_inline_script( 'wpdocs-my-script', 'const MYSCRIPT = ' . json_encode( array(
        'ajaxUrl' => admin_url( 'admin-ajax.php' ),
        'otherParam' => 'some value',
    ) ), 'before' );

    注意,需要将'before'作为第三个参数添加到wp_add_inline_script函数中。

    现在,在JS脚本中,您可以像这样访问这些PHP参数:

    console.log( MYSCRIPT.ajaxUrl ); // output: "https://your-site/wp-admin/admin-ajax.php"
    console.log( MYSCRIPT.otherParam ); // output: "some value"
  • 贡献者:Clifford Paulick

    以下代码可用于将Typekit的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"></script>
    <script type="text/javascript"> try{Typekit.load({ async: true });}catch(e){} </script>
  • 贡献者:Pepro Dev. Group

    添加CSS样式,无依赖项

    wp_register_style( 'myprefix-dummy-css', false );
    wp_enqueue_style( 'myprefix-dummy-css' );
    wp_add_inline_style( 'myprefix-dummy-css', "body *{ box-sizing: inherit; }");

    添加JavaScriptCode而不依赖

    wp_register_script( 'myprefix-dummy-js-header', '',);
    wp_enqueue_script( 'myprefix-dummy-js-header' );
    wp_add_inline_script( 'myprefix-dummy-js-header', "console.log('loaded in header');");

    添加带有jQuery依赖项的JavaScript代码

    wp_register_script( 'myprefix-dummy-js-footer', '', array("jquery"), '', true );
    wp_enqueue_script( 'myprefix-dummy-js-footer'  );
    wp_add_inline_script( 'myprefix-dummy-js-footer', "console.log('loaded in footer');");
  • 贡献者:Aurovrata Venet

    当您希望确保匿名函数使用的对象是使用javascript库实例化的,而javascript库可能会与其他插件或WordPress内核本身加载的其他版本冲突时,这是一个方便的功能。例如,如果需要使用不同版本的jQuery,可以执行以下操作:

    wp_register_script( 'jquery3.2.1', 'https://code.jquery.com/jquery-3.2.1.min.js' );
    wp_add_inline_script( 'jquery3.2.1', 'var jQuery3_2_1 = $.noConflict(true);' );
    wp_enqueue_script( 'plugin-javascript', plugins_url( 'js.js', __FILE__ ), array( 'jquery3.2.1' ) );

    这将在浏览器加载jQuery库v3.2.1之后立即实例化一个新的jQuery对象`jquery3_2_1`,确保它具有正确的版本引用,然后可以将其作为属性传递`js.js`脚本,

    ( function( $ ) { //$ now uses v3.2.1 of jquery.
      // Alert jQuery version.
      alert($.fn.jquery);
      // Plugin/theme code should go here.
    }( jQuery3_2_1 ) );
  • 贡献者:Aurovrata Venet

    注意:对于新的区块主题(如Twenty Twenty),如果调用太晚(如在短代码呈现回调函数中),wp_localize_script/wp_add_inline_script将不再工作。要实现这一点,您需要使用挂在wp_footer操作上的匿名函数调用,

    $data=array();// your data object you want to pass to your front-end script.
    $localise = json_encode($data);
    add_action('wp_footer', function() use ($localise){
      printf('<script type="text/javascript">var myData = %s</script>', $localise);
    });
  • 贡献者:dhinju

    用于添加内联脚本

    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' );

    对于依赖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' );