wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

使用示例

• 示例1

  再也不用担心缓存了

  这是我一路上学会的一个小技巧
  .js和.css文件的版本是从它最后一次更新的时间开始的。

  /**
   * Never worry about cache again!
   */
  function my_load_scripts($hook) {
  
  	// create my own version codes
  	$my_js_ver  = date("ymd-Gis", filemtime( plugin_dir_path( __FILE__ ) . 'js/custom.js' ));
  	$my_css_ver = date("ymd-Gis", filemtime( plugin_dir_path( __FILE__ ) . 'style.css' ));
  	
  	// 
  	wp_enqueue_script( 'custom_js', plugins_url( 'js/custom.js', __FILE__ ), array(), $my_js_ver );
  	wp_register_style( 'my_css', 	plugins_url( 'style.css', 	 __FILE__ ), false,   $my_css_ver );
  	wp_enqueue_style ( 'my_css' );
  
  }
  add_action('wp_enqueue_scripts', 'my_load_scripts');
  

  这样，您将始终使用缓存的版本，除非同时更改了文件，这是最理想的情况。

• 示例2

  当您将依赖于jQuery的脚本排入队列时，请注意WordPress中的jQuery以noConflict模式运行，这意味着您不能使用通用的$别名。您必须使用完整的jQuery。或者，使用$快捷方式将代码放在noConflict包装器中。

  jQuery( document ).ready( function( $ ) {
      // $() will work as an alias for jQuery() inside of this function
      [ your code goes here ]
  } );

• 示例3

  使用钩子

  将脚本和样式从单个动作挂钩排队。

  /**
   * Proper way to enqueue scripts and styles.
   */
  function wpdocs_theme_name_scripts() {
  	wp_enqueue_style( 'style-name', get_stylesheet_uri() );
  	wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
  }
  add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
  

• 示例4

  链接依赖于jQuery的主题脚本

  主题中包含的JavaScript文件通常需要提前加载另一个JavaScript文件才能使用其函数或变量。使用$deps参数，wp_enqueue_script()和wp_register_script()函数允许您在注册新脚本时标记依赖项。这将导致WordPress在链接新脚本之前自动将这些依赖项链接到HTML页面。如果这些依赖项的句柄未注册，WordPress将不会链接新脚本。本例的主题脚本 custom_script.js 需要依赖jQuery库：

  /**
   * Enqueue a script with jQuery as a dependency.
   */
  function wpdocs_scripts_method() {
  	wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom_script.js', array( 'jquery' ) );
  }
  add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );
  

• 示例5

  我想在 bcworkz 的评论中添加一条评论。在使用jquery时，通常情况下，文件中的代码应该这样格式化：

  (function( $ ) {
  
  	"use strict";
  	
  	// javascript code here. i.e.: $(document).ready( function(){} ); 
  
  })(jQuery);
  

  确保jQuery在无冲突模式和严格模式下运行是一种常见做法
  
  严格模式在几个方面有所帮助：

  • 它能捕捉到一些常见的编码错误，抛出异常。
  • 当采取相对 "不安全" 的行动（如获得对全局对象的访问）时，它可以防止，或抛出错误。
  • 它禁用了那些令人困惑或考虑不周的功能。
• 示例6

  链接 script.aculo.us 库

  下面是链接脚本的基本用法示例。script.aculo.us库已经包含并由WordPress以scriptaculous手柄注册。

  /**
   * Enqueue script.aculo.us.
   *
   * Tha callback is hooked to 'wp_enqueue_script' to ensure the script is only enqueued on the front-end.
   */
  function my_scripts_method() {
      wp_enqueue_script( 'scriptaculous' );
  }
  add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
  

  上面的示例链接了script.aculo.us库仅在前端。如果在管理屏幕中需要库，您可以使用admin_enqueue_scripts操作钩子，但是，这会将其排入所有管理屏幕，这通常会导致插件/核心冲突，最终破坏WordPress管理屏幕的体验。相反，您应该只在需要的单个屏幕上链接它，请参阅插件管理屏幕上的链接脚本部分以获取示例。

• 示例7

  注册和排队脚本时，不需要同时调用wp_register_script()和wp_enqueue_script()。只需调用wp_enqueue_script()
  例如：

  wp_register_script ( 'custom-script', get_template_directory_uri() . '/js/custom-script.js' );
  wp_enqueue_script ( 'custom-script' );
  

  应该是：

  wp_enqueue_script ( 'custom-script', get_template_directory_uri() . '/js/custom-script.js' );
  

  只有在不知道是否要立即加载时才进行注册。

• 示例8

  这没有文档记录，但在 $in_footer 为 `false`的情况下调用此函数实际上通常会将脚本注册为一个依赖项，应该解析并输出该依赖项，而不仅仅是针对页眉。然后，当输出排队等待页脚的脚本时，将只输出尚未包含的脚本。这会导致这样的行为：如果在页眉已被处理之后才排队，则假定在页眉中排队的脚本将出现在页脚中。因此 $in_footer 实际上应该被理解为 $in_footer_only。

• 示例9

  因为此函数和wp_enqueue_style都使用 WP_Scripts::enqueue()，它可以将句柄数组作为第一个参数，所以也可以将句柄数组传递到wp_enqueue_script/style：

  /**
   * Enqueue multiple handles
   */
  function enqueue_multiple() {
      wp_enqueue_script( array( 'backbone', 'jquery', 'iris' ) );
  }
  add_action( 'wp_enqueue_scripts', 'enqueue_multiple' );
  

• 示例10

  未满足的依赖关系将*不会*有警告

  如果不满足依赖项（第3个参数），则不会打印脚本标记，并且不会显示警告或错误。

  这看起来不像一个bug，只是预期的行为。文件中提及这一点就足以防止误解。

  此示例永远不会加载/js/example.js

  /**
   * ... enqueue plugin scripts.
   */
  function load_plugin_scripts() {
      wp_enqueue_script(
  		'script-name',
  		plugin_dir_url( __FILE__ ) . '/js/example.js',
  		array('not-existant'),
  		'1.0.0',
  		true
  	);
  }
  add_action( 'wp_enqueue_scripts', 'load_plugin_scripts' );
  

• 示例11

  关于如何将包括SRI（子资源完整性）标记的多个样式和脚本排队的示例。这在很大程度上是基于这篇文章的，但我试图在某种程度上简化代码，特别是考虑到我可能想要包括和管理许多脚本/样式。

  需要注意的重要一点是，在将样式/脚本排队时指定的句柄需要与my_add_sri函数中引用的句柄匹配。还要注意的是，除了明显的SRI标记差异外，my_add_sri函数中脚本上使用的str_replace方法与样式上使用的方法不同。

  /**
  * Load custom CSS and JavaScript.
  */
  add_action( 'wp_enqueue_scripts', 'wpdocs_my_enqueue_scripts' );
  function wpdocs_my_enqueue_scripts() : void {
      // Enqueue my styles.
      wp_enqueue_style( 'wpdocs-bootstrap-style', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css' );
      wp_enqueue_style( 'wpdocs-datatables-bootstrap-style', 'https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap4.min.css' );
      
      // Enqueue my scripts.
      wp_enqueue_script( 'wpdocs-bootstrap-bundle-script', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.bundle.min.js', array(), null, true );
      wp_enqueue_script( 'wpdocs-datatables-bootstrap-script', 'https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/dataTables.bootstrap4.min.js', array(), null, true );
      wp_enqueue_script( 'wpdocs-jquery-datatables-script', 'https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js', array(), null, true );    
      
      // Add filters to catch and modify the styles and scripts as they're loaded.
      add_filter( 'style_loader_tag', __NAMESPACE__ . 'wpdocs_my_add_sri', 10, 2 );
      add_filter( 'script_loader_tag', __NAMESPACE__ . 'wpdocs_my_add_sri', 10, 2 );
  }
  
  /**
  * Add SRI attributes based on defined script/style handles.
  */
  function wpdocs_my_add_sri( $html, $handle ) : string {
      switch( $handle ) {
          case 'wpdocs-bootstrap-style':
              $html = str_replace( ' />', ' integrity="sha512-MoRNloxbStBcD8z3M/2BmnT+rg4IsMxPkXaGh2zD6LGNNFE80W3onsAhRcMAMrSoyWL9xD7Ert0men7vR8LUZg==" crossorigin="anonymous" />', $html );
              break;
          case 'wpdocs-datatables-bootstrap-style':
              $html = str_replace( ' />', ' integrity="sha512-PT0RvABaDhDQugEbpNMwgYBCnGCiTZMh9yOzUsJHDgl/dMhD9yjHAwoumnUk3JydV3QTcIkNDuN40CJxik5+WQ==" crossorigin="anonymous" />', $html );
              break;
          case 'wpdocs-bootstrap-bundle-script':
              $html = str_replace( '></script>', ' integrity="sha512-kBFfSXuTKZcABVouRYGnUo35KKa1FBrYgwG4PAx7Z2Heroknm0ca2Fm2TosdrrI356EDHMW383S3ISrwKcVPUw==" crossorigin="anonymous"></script>', $html );
              break;
          case 'wpdocs-datatables-bootstrap-script':
              $html = str_replace( '></script>', ' integrity="sha512-OQlawZneA7zzfI6B1n1tjUuo3C5mtYuAWpQdg+iI9mkDoo7iFzTqnQHf+K5ThOWNJ9AbXL4+ZDwH7ykySPQc+A==" crossorigin="anonymous"></script>', $html );
              break;
          case 'wpdocs-jquery-datatables-script':
              $html = str_replace( '></script>', ' integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous"></script>', $html );
              break;
      } 
      return $html;
  }

• 示例12

  另请参见：

  wp_enqueue_style

• 示例13

  对于那些对@damiankaelgreen有同样问题的人：

  在这种情况下，脚本是在一个HTML标记脚本中调用的文件，用于定义客户端脚本（JavaScript）。

  对于引入 PHP文件，请使用get_template_part()。

• 示例14

  此示例链接自定义样式表和脚本以及文件版本

  function custom_enqueue(){
      //wp_enqueue_style('string $handle', mixed $src, array $deps, mixed $ver, string $meida );
      wp_enqueue_style('customstyle', get_template_directory_uri() . '/css/fatblog.css', array(), '1.0.0', 'all' );
      //wp_enqueue_style('string $handle', mixed $src, array $deps, mixed $ver, bol $in_footer );
      wp_enqueue_script('customjs', get_template_directory_uri() . '/js/fatblog.js', array(), '1.0.0', 'true' );
  }
  add_action('wp_enqueue_scripts', 'custom_enqueue');

• 示例15

  jquery-ui-dialog所需的CSS不会自动出现！

  您必须使用注册的句柄“wp-jquery-ui-dialog”单独调用wp_enqueue_style()。

• 示例16

  链接依赖于script.aculo.us的插件脚本

  此示例旨在在插件文件中注册和链接依赖于script.aculo.us的新插件脚本。有关依存关系的信息，请参见上面的示例。

  /**
   * Enqueue script with script.aculo.us as a dependency.
   */
  function my_scripts_method() {
  	wp_enqueue_script( 'newscript', plugins_url( '/js/newscript.js' , __FILE__ ), array( 'scriptaculous' ) );
  }
  add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
  

• 示例17

  仅在插件管理屏幕上链接脚本

  此示例仅在特定的管理屏幕上链接脚本，与第一个示例代码下面的段落中描述的场景相反。

  <?php
  /**
   * Register the plugin script.
   */
  function wpdocs_plugin_admin_init() {
      // Register our script.
      wp_register_script( 'my-plugin-script', plugins_url( '/script.js', __FILE__ ) );
  }
  add_action( 'admin_init', 'wpdocs_plugin_admin_init' );
  
  /**
   * Add Administration screen for the plugin.
   */
  function wpdocs_plugin_admin_menu() {
      /* Add our plugin submenu and administration screen */
      $page_hook_suffix = add_submenu_page( 'edit.php',	// The parent page of this submenu.
  		__( 'My Plugin', 'my-textdomain' ),				// The submenu title.
  		__( 'My Plugin', 'my-textdomain' ),				// The screen title.
  		'manage_options', 								// The capability required for access to this submenu.
  		'my_plugin-options', 							// The slug to use in the URL of the screen.
  		'wpdocs_plugin_manage_menu' 					// The function to call to display the screen.
  	);
  
      /*
  	 * Use the retrieved $page_hook_suffix to hook the function that links our script.
  	 * This hook invokes the function only on our plugin administration screen,
  	 * see: https://developer.wordpress.org/reference/hooks/admin_print_scripts-hook_suffix/
  	 */
      add_action( "admin_print_scripts-{$page_hook_suffix}", 'wpdocs_plugin_admin_scripts');
  }
  add_action( 'admin_menu', 'wpdocs_plugin_admin_menu' );
  
  /**
   * Enqueue registered script in the admin.
   */
  function wpdocs_plugin_admin_scripts() {
      // Link our already registered script to a page.
      wp_enqueue_script( 'my-plugin-script' );
  }
  
  /**
   * Display callback for the plugin Administration screen.
   */
  function wpdocs_plugin_manage_menu() {
      // Display our administration screen.
  }
  

• 示例18

  这个文档真的应该更好地定义什么是 "脚本"......因为：这个函数是用来排队.php或html脚本的吗？不!

  这对许多开发人员来说似乎很明显，但如果您正在阅读此文档，您应该会对该函数的用途有所了解，所以我写此文是为了帮助您。

  显然，在这种情况下，术语“脚本”被用作不是由服务器评估的程序，而是需要传递给客户端（并由浏览器评估）的程序。因此，在这种情况下，预期将由服务器评估的PHP文件将不会被视为脚本（即使许多人可能会将其称为脚本），因此它不应包含在wp_enqueue_script()中，而应使用require_once()或可能的include_once()包含。

• 示例19

  不确定这是否是报告它的地方，但我认为“WordPress包含并注册的默认脚本”表中出现的Tiny MCE句柄是不正确的。它说的是tiny_mce，但根据注册Tiny MCE脚本的代码应该是wp-tinymce。

• 示例20

  用于加载脚本（wp_enqueue_scripts）的动作挂钩在文档的头部部分调用，因此为了将脚本加载到页面上，您必须在页面模板中包括以下内容：

  get_header();

• 示例21

  当使用wp_add_inline_script()将稍后要添加一些内联JS的自定义脚本文件排队时。通过将函数中的最后一个参数设置为true，您最好在页脚中加入自定义脚本

  wp_enqueue_script( $handle, $src, $deps, $ver, true );