WordPress函数wp_enqueue_style作用正确引入CSS到主题中

网站搭建教程 2年前免费

Wordpress中加载CSS样式到我们的主题中，需要分辨CSS的使用位置，采取不同的加载函数。

wp_enqueue_scripts 用来在网站前台加载脚本和CSS
admin_enqueue_scripts 用来在后台加载脚本和CSS
login_enqueue_scripts 用来在WP登录页面加载脚本和CSS

语法结构及参数：

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

$handle – 调用的样式文件名称，唯一性，因此不能和其它css文件命名相同。
$src – css文件的路径（即url），不要直接使用域名url，要使用路径函数，如get_template_directory_uri()来获取主题目录中的样式文件。
$deps – 依赖关系，如果丢失某些其他样式文件将导致你的样式表将无法正常工作，你可以使用该参数设置“依赖关系”。，非必需。
$ver – 加载的css文件的版本号，可以使用主题的版本号或随意自定义一个，设置为null则不使用版本号。默认为false，使用WordPress的版本号。
$media – 是指CSS的媒体类型，比如“screen”或“handheld”或“print”。如果不知道是否需要，就留空。默认为“all”。

通过wp_enqueue_style()函数加载css文件时，应该将它分配给一个钩子，如只在前台调用，使用钩子wp_enqueue_scripts；只在后台调用，使用admin_enqueue_scripts；用在WP登陆页面加载则使用login_enqueue_scripts。

以下是这些函数的示例：

<?php
 
// 在网站前台加载子主题样式css，依赖父主题plugins、app、dark三个CSS样式
function mytheme_enqueue_style() {
    wp_enqueue_style( 'mytheme-style', trailingslashit(get_stylesheet_directory_uri()) . 'child-style.css', array('plugins', 'app', 'dark')); 
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );
 
// 在后台加载css
function mytheme_enqueue_options_style() {
    wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/admin.css' ); 
}
add_action( 'admin_enqueue_scripts', 'mytheme_enqueue_options_style' );
 
// 在登录页面加载css
function mytheme_enqueue_login_style() {
    wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/login.css' ); 
}
add_action( 'login_enqueue_scripts', 'mytheme_enqueue_login_style' );
 
?>

WordPress 函数在使用时，如子主题中，一般需要引用子主题的自定义样式CSS，在子主题中需要注意提高函数优先级来实现对父主题的同名函数替换。

/**
 * 加载子主题的自定义CSS 
 */
function child_theme_configurator_css()
{   
	/**
	 * 引入子主题的自定义CSS
	 */
	wp_enqueue_style('v2_chld', trailingslashit(get_stylesheet_directory_uri()) . 'child-style.css', array('plugins', 'app', 'dark'));
	/**
	/**
	 * 引入文章侧边栏评论展示小工具CSS
	 */
	wp_enqueue_style('comments_style', trailingslashit(get_stylesheet_directory_uri()) . 'assets/css/comments.css?huan_ver=' . HUN_VER, array('plugins', 'app', 'dark'));
		/**
	 * 引入文章侧边栏广告展示小工具CSS
	 */
	wp_enqueue_style('widget_ads_style', trailingslashit(get_stylesheet_directory_uri()) . 'assets/css/widget_ads.css?huan_ver=' . HUN_VER, array('plugins', 'app', 'dark'));
	
}

add_action('wp_enqueue_scripts', 'child_theme_configurator_css', 10);