wp_enqueue_style()加载自定义css样式表

目录

描述

wp_enqueue_style() 方法可以安全地将 CSS 样式表加入到 WordPress 创建的页面中。

如果调用的是自定义的 CSS样式表,需要在使用前需要先通过 wp_register_style() 方法进行注册。

wp_enqueue_style() 描述

用法

<?php wp_enqueue_style$handle$src$deps$ver$media ); ?>

wp_enqueue_style() 用法

参数

$handle

(string) (必填) Name used as a handle for the stylesheet. As a special case, if the string contains a '?' character, the preceding part of the string refers to the registered handle, and the succeeding part is appended to the URL as a query string.

默认值: None

$src

(string|boolean) (可选) URL to the stylesheet. Example: 'http://example.com/css/mystyle.css'. This parameter is only required when WordPress does not already know about this style. You should never hardcode URLs to local styles, use plugins_url (for Plugins) and get_template_directory_uri (for Themes) to get a proper URL. Remote assets can be specified with a protocol-agnostic URL, i.e. '//otherdomain.com/css/theirstyle.css'.

默认值: false

$deps

(array) (可选) Array of handles of any stylesheet that this stylesheet depends on; stylesheets that must be loaded before this stylesheet. false if there are no dependencies.

默认值: array()

$ver

(string|boolean) (可选) String specifying the stylesheet version number, if it has one. This parameter is used to ensure that the correct version is sent to the client regardless of caching, and so should be included if a version number is available and makes sense for the stylesheet.

默认值: false

$media

(string|boolean) (可选) String specifying the media for which this stylesheet has been defined. Examples: 'all', 'screen', 'handheld', 'print'. See this list for the full range of valid CSS-media-types.

默认值: 'all'

wp_enqueue_style() 参数

返回值

(void) 

This function does not return a value.

wp_enqueue_style() 返回值

示例

Using a Hook

Scripts and styles from a single action hook

/* ----------------------------------
 * wordpress之魂 © http://wphun.com
 * ---------------------------------- */

/**
 * Proper way to enqueue scripts and styles
 */
function 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', 'theme_name_scripts' );

Load stylesheet only on a plugin's options page

/* ----------------------------------
 * wordpress之魂 © http://wphun.com
 * ---------------------------------- */
   /*
    * This example will work at least on WordPress 2.6.3, 
    * but maybe on older versions too.
    */
   add_action( 'admin_init', 'my_plugin_admin_init' );
   add_action( 'admin_menu', 'my_plugin_admin_menu' );
   
   function my_plugin_admin_init() {
       /* Register our stylesheet. */
       wp_register_style( 'myPluginStylesheet', plugins_url('stylesheet.css', __FILE__) );
   }
   
   function my_plugin_admin_menu() {
       /* Register our plugin page */
       $page = add_submenu_page( 'edit.php', 
                                 __( 'My Plugin', 'myPlugin' ), 
                                 __( 'My Plugin', 'myPlugin' ),
                                 'administrator',
                                 __FILE__, 
                                 'my_plugin_manage_menu' );
  
       /* Using registered $page handle to hook stylesheet loading */
       add_action( 'admin_print_styles-' . $page, 'my_plugin_admin_styles' );
   }
   
   function my_plugin_admin_styles() {
       /*
        * It will be called only on your plugin admin page, enqueue our stylesheet here
        */
       wp_enqueue_style( 'myPluginStylesheet' );
   }
   
   function my_plugin_manage_menu() {
       /* Output our admin page */
   }

wp_enqueue_style() 示例

注意

  • 使用到 global: (WP_Styles) $wp_styles - See WP_Styles::add(), WP_Styles::enqueue().
  • Tip: print_r( $wp_styles );
  • If you are going to use some jQuery UI features you might have to provide your own CSS file: WordPress core does not have a full jQuery UI theme!

wp_enqueue_style() 注意

历史

  • 3.3: wp_enqueue_style() can now be called mid-page (in the HTML body). This will load styles in the footer.
  • 添加于 版本: 2.1 (BackPress version: r79)

wp_enqueue_style() 历史

源文件

wp_enqueue_style() 函数的代码位于 wp-includes/functions.wp-styles.php.

/* ----------------------------------
 * wordpress之魂 © http://wphun.com
 * ---------------------------------- */
/**
 * Enqueue a CSS stylesheet.
 *
 * Registers the style if source provided (does NOT overwrite) and enqueues.
 *
 * @see WP_Dependencies::add(), WP_Dependencies::enqueue()
 * @link http://www.w3.org/TR/CSS2/media.html#media-types List of CSS media types.
 *
 * @since 2.6.0
 *
 * @param string      $handle Name of the stylesheet.
 * @param string|bool $src    Path to the stylesheet from the root directory of WordPress. Example: '/css/mystyle.css'.
 * @param array       $deps   An array of registered style handles this stylesheet depends on. Default empty array.
 * @param string|bool $ver    String specifying the stylesheet version number, if it has one. This parameter is used
 *                            to ensure that the correct version is sent to the client regardless of caching, and so
 *                            should be included if a version number is available and makes sense for the stylesheet.
 * @param string      $media  Optional. The media for which this stylesheet has been defined.
 *                            Default 'all'. Accepts 'all', 'aural', 'braille', 'handheld', 'projection', 'print',
 *                            'screen', 'tty', or 'tv'.
 */
function wp_enqueue_style( $handle, $src = false, $deps = array(), $ver = false, $media = 'all' ) {
	_wp_scripts_maybe_doing_it_wrong( __FUNCTION__ );

	$wp_styles = wp_styles();

	if ( $src ) {
		$_handle = explode('?', $handle);
		$wp_styles->add( $_handle[0], $src, $deps, $ver, $media );
	}
	$wp_styles->enqueue( $handle );
}

wp_enqueue_style() 源文件

相关