当前浏览:首页 / WordPress函数 / wp_enqueue_style()

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

引入加载CSS样式表

enqueue 引入js/css

style


描述

如果提供源(不覆盖)并排队(enqueue),则注册样式。

另见

  • WP_Dependencies::add()
  • WP_Dependencies::enqueue()

参数

$handle

(string) (必填) 样式表的名称,应该是唯一的。

$src

(string) (可选) 样式表的完整URL,或样式表相对于WordPress根目录的路径。

默认值: ''

$deps

(string[]) (可选) 注册处理此样式表所依赖的样式表数组。

默认值: array()

$ver

(string|bool|null) (可选) 指定样式表版本号(如果有)的字符串,该版本号作为查询字符串添加到URL中,用于破坏缓存。如果版本设置为false,则会自动添加与当前安装的WordPress版本相同的版本号。如果设置为null,则不添加任何版本。

默认值: false

$media

(string) (可选) 定义此样式表的媒体。接受“all”、“print”和“screen”等媒体类型,或“(orientation: portrait)”和“(max-width: 640px)”等媒体查询。

默认值: 'all'


说明

用法

将样式表文件添加到WordPress生成的页面的安全方法。

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

注意

  • 如果你要使用一些 jQuery UI 功能你可能要提供你自己的CSS文件。WordPress核心没有一个完整的jQuery UI主题!
  • 通过WordPress Core加载的默认样式可以通过默认样式页面的源代码来辨别。


源码

查看源码 官方文档


更新日志

版本描述
2.6.0开始引入

用户贡献的笔记

  • 贡献者:Rob WSquidy McSquid

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

    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()用作第四个参数或将其附加到文件中,因为这几乎在所有情况下都会破坏缓存。

  • 贡献者:Codex

    使用钩子

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

    /**
     * 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' );
    
  • 贡献者:Codex

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

    /**
     * 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() {
    	 // ...
    }
    
  • 贡献者:alucard001

    如何删除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>
  • 贡献者:Juhi Saxena

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

    wp_enqueue_script('oxfam_js_cookie', '//cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.0/js.cookie.min.js', array(), null, true);
    
  • 贡献者:gerardasBart Kuijper

    覆盖队列中的所有样式表

    /* 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);
  • 贡献者:pawanwp

    使用此方法可以将子主题的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' );
  • 贡献者:crstauf

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

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

  • 贡献者:alordiel

    这是按页面模板有条件地加载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 );
    }
  • 贡献者:Anthony Hortin
  • 贡献者:montrealist

    加载特定于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' );
    }
  • 贡献者:Khoi Pro

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

    wp_enqueue_style( 'example-small-css', get_template_directory_uri() . '/assets/css/small.min.css', array(), '1.0.0', '(max-width: 480px)' );
  • 贡献者:Peter Hardy-vanDoorn

    将主题样式表排队时,使用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' );