do_action( 'admin_enqueue_scripts', string $hook_suffix )

使用示例

• 示例1

  在管理界面中有选择地将脚本排队引入

  admin_enqueue_scripts操作钩子还可以用于针对特定的管理页面。在这个例子中，我们在edit.php的头部分加载了一个javascript文件。

  /**
   * Enqueue a script in the WordPress admin on edit.php.
   *
   * @param int $hook Hook suffix for the current admin page.
   */
  function wpdocs_selectively_enqueue_admin_script( $hook ) {
      if ( 'edit.php' != $hook ) {
          return;
      }
      wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'myscript.js', array(), '1.0' );
  }
  add_action( 'admin_enqueue_scripts', 'wpdocs_selectively_enqueue_admin_script' );

• 示例2

  找出您的$hook名称

  如果您不确定要有条件加载脚本的当前管理页面的$hook名称，请将其添加到页面中：

  $screen = get_current_screen(); 
  print_r($screen);

• 示例3

  在管理面板中引入自定义样式表

  有时您希望将一组CSS 或 Javascript文档加载到所有管理页面。您可以从插件或主题函数文件中执行此操作：

  /**
   * Register and enqueue a custom stylesheet in the WordPress admin.
   */
  function wpdocs_enqueue_custom_admin_style() {
          wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' );
          wp_enqueue_style( 'custom_wp_admin_css' );
  }
  add_action( 'admin_enqueue_scripts', 'wpdocs_enqueue_custom_admin_style' );

• 示例4

  使用此函数在特定管理页面中加载脚本或css的另一种方法

  在本例中，我们在nav-menus.php页面的头部分加载了一个javascript和一个css文件。

  function add_script_to_menu_page()
  {
  	// $pagenow, is a global variable referring to the filename of the current page, 
  	// such as ‘admin.php’, ‘post-new.php’
  	global $pagenow;
  
  	if ($pagenow != 'nav-menus.php') {
  		return;
  	}
  	
  	// loading css
      wp_register_style( 'some-css', get_template_directory_uri() . '/css/some.css', false, '1.0.0' );
      wp_enqueue_style( 'some-css' );
  	
  	// loading js
  	wp_register_script( 'some-js', get_template_directory_uri().'/js/some.js', array('jquery-core'), false, true );
      wp_enqueue_script( 'some-js' );
  }
  
  add_action( 'admin_enqueue_scripts', 'add_script_to_menu_page' );

• 示例5

  仅在特定子菜单页面上加载css和js

  // custom css and js
  add_action('admin_enqueue_scripts', 'cstm_css_and_js');
  
  function cstm_css_and_js($hook) {
      // your-slug => The slug name to refer to this menu used in "add_submenu_page"
  		// tools_page => refers to Tools top menu, so it's a Tools' sub-menu page
      if ( 'tools_page_your-slug' != $hook ) {
          return;
      }
  
      wp_enqueue_style('boot_css', plugins_url('inc/bootstrap.css',__FILE__ ));
      wp_enqueue_script('boot_js', plugins_url('inc/bootstrap.js',__FILE__ ));
  }

• 示例6

  想在head以外知道$hook_suffix的值比较棘手，尤其是在自定义管理页面上。这个垃圾小技巧可以帮助你：

  function wpdocs_myselective_css_or_js( $hook ) {
      echo '<h1 style="color: crimson;">' . esc_html( $hook ) . '</h1>';
  }
  
  add_action( 'admin_enqueue_scripts', 'wpdocs_myselective_css_or_js' ); 

• 示例7

  在菜单页和菜单页下的所有子菜单上加载脚本。

  /** Add Admin Pages **/
  function add_admin_pages() {
  
      // Add Menu Page
      add_menu_page('Top Level Menu', 'Top Level Menu', 'manage_options', 'top-level-menu', 'your_callback_menu', 'dashicons-admin-tools', 10);
  
      // Add Sub Menu Page
      add_submenu_page('top-level-menu', 'Sub Menu', 'Sub Menu', 'manage_options', 'sub-menu', 'your_callback_submenu');
  
  }
  add_action('admin_menu', 'add_admin_pages');
  
  /** Enqueue Stylesheets **/
  function add_admin_scripts($hook) {
  
      // global $parent_file defined on admin-header.php line 27
      // https://core.trac.wordpress.org/browser/tags/5.9/src/wp-admin/admin-header.php#L27
      global $parent_file;
      if ('top-level-menu' != $parent_file) {
          return;
      }
  
      // For example we load sweetalert on your menu page and all sub-menu below your menu page.
      wp_enqueue_script('sweetalert-js', 'https://unpkg.com/sweetalert/dist/sweetalert.min.js');
  
  }
  add_action('admin_enqueue_scripts', 'add_admin_scripts');

• 示例8

  如果您想从创建的菜单和子菜单中将CSS、JS加载到特定页面，该怎么办？（多页）

  function addPage()
  {
  global $customMenu, $customSubMenu;
          /**
           * Menu
           */
         $customMenu = add_menu_page( 'Custom Menu', 'Custom Menu', 'manage_options', 'custom-menu', 'customMenuPage', '', 10);
          /**
           * Sub Menu Pages
           */
          $customSubMenu = add_submenu_page( 'custom-menu', 'Settings', 'Settings', 'manage_options', 'settings', 'settings_page');
  }
  add_action( 'admin_menu', 'addPage');
    
  /** Enqueue Stylesheets **/
  function enqueueAdminStyles( $hook)
      {
          global $customMenu, $customSubMenu;
          $allowed = array( $customMenu, $customSubMenu);
          if( !in_array( $hook, $allowed)  )
          {
              return;
          }
          wp_enqueue_style( '-main-', 'assets/admin/css/ucsi.css', '', '1');
      }
  add_action( 'admin_enqueue_scripts', 'enqueueAdminStyles');

• 示例9

  注意：如果您试图使用$hook_suffix来检查您是否在子菜单页面上，那么您应该知道一个重要的错误。这主要影响在主题或插件中分发代码的人，其中代码将在WordPress安装中以多种语言运行。

  https://core.trac.wordpress.org/ticket/18857

  基本上，$hook_suffix的父菜单页slug部分可以被翻译，因此它与您期望的字符串不匹配。

  您可以使用以下代码来解决此错误：

  function enqueue_my_assets( $hook_suffix ) {
  	$parent_menu_slug = sanitize_title( __( 'Parent Menu Title', 'parent-translation-domain' ) );
  
  	if ( $parent_menu_slug . '_page_my_sub_menu' != $hook_suffix ) {
  		return;
  	}
  
  	// we must be on the right page then ...
  }
  add_action( 'admin_enqueue_scripts', 'enqueue_my_assets', 10, 1 );

  基本上，您首先得到翻译后的父菜单段，并在检查$hook_suffix时使用它，以确保您在正确的页面上。

• 示例10

  下面是如何挂钩命名空间函数的方法：

  namespace YourNameSpace;
  
  function register_your_admin_script() {
  	wp_enqueue_script( 'your-admin-script', get_template_directory_uri() . '/js/your-admin-script.js', array(), '1.0.0', true );
  }
  
  add_action( 'admin_enqueue_scripts', __NAMESPACE__ . '\register_your_admin_script' );