wp_enqueue_style( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, string $media = 'all' )

使用示例

• 示例1

  为了根据文件的上次修改时间进行适当的版本控制，可以使用类似于以下的内容：

  wp_enqueue_style('main-styles', get_template_directory_uri() . '/css/style.css', array(), filemtime(get_template_directory() . '/css/style.css'), false);

  当style.css文件在服务器上更新后，WP将附加适当的时间戳。

  注意：不要将time()用作第四个参数或将其附加到文件中，因为这几乎在所有情况下都会破坏缓存。

• 示例2

  使用钩子

  来自单个动作挂钩的脚本和样式

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

• 示例3

  仅在插件的选项页面上加载样式表：

  /**
   * This example will work at least on WordPress 2.6.3, 
   * but maybe on older versions too.
   */
  add_action( 'admin_init', 'wpdocs_plugin_admin_init' );
  add_action( 'admin_menu', 'wpdocs_plugin_admin_menu' );
     
  /**
   * Register our stylesheet.
   */
  function wpdocs_plugin_admin_init() {
  	wp_register_style( 'wpdocsPluginStylesheet', plugins_url( 'stylesheet.css', __FILE__ ) );
  }
  
  /**
   * Register our plugin page and hook stylesheet loading.
   */
  function wpdocs_plugin_admin_menu() {
  	$page = add_submenu_page( 'edit.php', 
  		__( 'Wpdocs Plugin', 'textdomain' ), 
  		__( 'Wpdocs Plugin', 'textdomain' ),
  		'administrator',
  		__FILE__, 
  		'wpdocs_plugin_manage_menu' );
    
  	add_action( "admin_print_styles-{$page}", 'wpdocs_plugin_admin_styles' );
  }
  
  /**
   * Enqueue our stylesheet.
   */
  function wpdocs_plugin_admin_styles() {
  	wp_enqueue_style( 'wpdocsPluginStylesheet' );
  }
  
  /**
   * Output our admin page.
   */
  function wpdocs_plugin_manage_menu() {
  	 // ...
  }
  

• 示例4

  如何删除URL中的ver？

  如果要删除URL中的ver参数（例如，有意缓存文件），请传入null而不是false以删除该参数。例如：

  wp_enqueue_script('oxfam_js_cookie', 'https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.0/js.cookie.min.js', array(), null, true);

  通过这样做，您将获得：

  <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.0/js.cookie.min.js'></script>

• 示例5

  排队不应是特定于协议的，请删除https。我有如下更新代码

  wp_enqueue_script('oxfam_js_cookie', '//cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.0/js.cookie.min.js', array(), null, true);
  

• 示例6

  覆盖队列中的所有样式表

  /* adds stylesheet file to the end of the queue */
  function wpdocs_override_stylesheets()
  {
      $dir = plugin_dir_url(__FILE__);
      wp_enqueue_style('theme-override', $dir . '/theme-overrides.css', array(), '0.1.0', 'all');
  }
  add_action('wp_enqueue_scripts', 'wpdocs_override_stylesheets', PHP_INT_MAX);

• 示例7

  使用此方法可以将子主题的style.css排队。

  function my_theme_enqueue_styles() {
  
      $parent_style = 'jobcareertheme';
  
      wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
      wp_enqueue_style( 'child-style',
          get_stylesheet_directory_uri() . '/style.css',
          array( $parent_style ),
          wp_get_theme()->get('1.0.0')
      );
  }
  add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

• 示例8

  请注意，谷歌字体已更改其URL，因此当嵌入多个字体系列时，只会加载一个。这一变化“与世界上其他地方使用查询变量以及PHP本身的方式根本不兼容”。

  修复方法是在$version参数上设置null，这可以防止解析URL和丢失其他字体系列。

• 示例9

  这是按页面模板有条件地加载css文件（css将加载在tamplate-name.php页面上）
  你可以通过另一个条件来更改
  代码应该用在主题的functions.php
  注意：代码适用于子主题。如果您想在父主题中使用它，请将get_stylesheet_directory_uri()替换为get_stylesheet_uri()。

  $handle = 'wpdocs';
  wp_register_style( $handle, get_stylesheet_directory_uri().'/relative/path/to/stylesheet.css', array(), '', true );
  if ( is_page_template( 'template-name.php' ) ) {
  	wp_enqueue_style( $handle );
  }

• 示例10

  另见：

  wp_enqueue_script

• 示例11

  加载特定于IE的样式表：

  add_action( 'wp_enqueue_scripts', 'enqueue_my_styles' );
  function enqueue_my_styles() {
      
      global $wp_styles;
      
      // Load the main stylesheet
      wp_enqueue_style( 'my-theme', get_stylesheet_uri() );
      
      /**
       * Load our IE-only stylesheet for all versions of IE:
       * <!--[if IE]> ... <![endif]-->
       * 
       * NOTE: It is also possible to just check and see if the $is_IE global in WordPress is set to true before 
       * calling the wp_enqueue_style() function.  If you are trying to load a stylesheet for all browsers 
       * EXCEPT for IE, then you would HAVE to check the $is_IE global since WordPress doesn't have a way to 
       * properly handle non-IE conditional comments.
       */
      wp_enqueue_style( 'my-theme-ie', get_stylesheet_directory_uri() . "/css/ie.css", array( 'my-theme' )  );
      $wp_styles->add_data( 'my-theme-ie', 'conditional', 'IE' );
  }

• 示例12

  如果您希望仅加载小屏幕css，请使用最后一个参数：

  wp_enqueue_style( 'example-small-css', get_template_directory_uri() . '/assets/css/small.min.css', array(), '1.0.0', '(max-width: 480px)' );

• 示例13

  将主题样式表排队时，使用wp_get_theme()->get( 'Version' )来获取style.css文件的最新版本号。当你对你的样式进行修改时，可以很好地破坏缓存。

  如：

  wp_enqueue_style( 'my=theme', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ), 'all' );