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

使用示例

• 示例1

  显然，我们现在应该使用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"

• 示例2

  以下代码可用于将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>

• 示例3

  添加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');");

• 示例4

  当您希望确保匿名函数使用的对象是使用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 ) );

• 示例5

  注意：对于新的区块主题（如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);
  });

• 示例6

  用于添加内联脚本

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