使用Enqueue样式将CSS加载到WordPress中的正确方法

如果没有 css，您在设置网页样式方面的选择非常有限。如果没有在wordpress中包含适当的 CSS ，您的主题用户可能很难自定义主题的样式。

在本教程中，我们将看看使用 wp_enqueue_style()。在这篇文章中，您将学习将整个 CSS 样式表加载到主题中的正确方法。

在 WordPress 中加载 CSS 的错误方法

多年来，WordPress 不断扩展其代码以使其变得越来越灵活，将 CSS 和javascript加入队列就是朝着这个方向迈出的一步。不过，我们的坏习惯仍然存在了一段时间。虽然知道 WordPress 引入了 CSS 和JavaScript排队，但我们继续将此代码添加到我们的标题中。.php 文件：

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

或者我们将下面的代码添加到我们的 functions.php 文件中，认为这样更好：

<?php

function add_stylesheet_to_head() {
	echo "<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>";
}

add_action( 'wp_head', 'add_stylesheet_to_head' );

?>

在上述情况下，WordPress 无法确定页面中是否加载了 CSS 文件。这可能是一个可怕的错误！

如果另一个插件使用相同的 CSS 文件，它将无法检查该 CSS 文件是否已包含在页面中。然后插件第二次加载相同的文件，导致重复代码。

幸运的是，WordPress 有一个非常简单的解决方案来解决此类问题：注册和排队样式表。

在 WordPress 中加载 CSS 的正确方法

正如我们之前所说，WordPress 多年来已经发展了很多，我们必须考虑到世界上每一个 WordPress 用户。

除了它们，我们还必须考虑数以千计的 WordPress 插件。但是不要让这些大数字吓到您：WordPress 具有非常有用的功能，可以让我们将 CSS 样式正确加载到 WordPress 中。

我们来看一下。

注册 CSS 文件

如果你要加载 CSS 样式表，你应该先用 wp_register_style() 函数注册它们：

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

$handle(string, require d) 是样式表的唯一名称。其他函数将使用这个“句柄”来排队和打印你的样式表。
$src (string, required) 指的是样式表的 URL。您可以使用诸如 get_template_directory_uri() 获取主题目录中的样式文件之类的功能。永远不要考虑对其进行硬编码！
$deps （数组，可选）处理依赖样式的名称。如果缺少其他样式文件，您的样式表将无法工作，请使用此参数设置“依赖项”。
$ver（字符串或布尔值，可选）是版本号。您可以使用主题的版本号，也可以根据需要制作一个。如果您不想使用版本号，请将其设置为null. 它默认为 false，这使得 WordPress 添加自己的版本号。
$media （字符串，可选）是 CSS 媒体类型，如“屏幕”、“手持”或“打印”。如果您不确定是否需要使用它，请不要使用它。它默认为“全部”。

下面是一个wp_register_style() 函数示例：

<?php

// wp_register_style() example
wp_register_style(
	'my-bootstrap-extension', // handle name
	get_template_directory_uri() . '/css/my-bootstrap-extension.css', // the URL of the stylesheet
	array( 'bootstrap-main' ), // an array of dependent styles
	'1.2', // version number
	'screen', // CSS media type
);

?>

注册样式在 WordPress 中是一种“可选”。如果您认为您的样式不会被任何插件使用，或者您不会使用任何代码再次加载它，您可以自由地将样式排入队列而无需注册它。看看它是如何在下面完成的。

将 CSS 文件排入队列

注册我们的样式文件后，我们需要将其“入队”以使其准备好加载到我们的主题 <head> 部分。

我们用这个 wp_enqueue_style() 函数来做到这一点：

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

参数与函数完全相同 wp_register_style()，不再赘述。

但正如我们所说，该wp_register_style() 功能不是强制性的，我应该告诉您，您可以通过 wp_enqueue_style() 两种不同的方式使用：

<?php

// if we registered the style before:
wp_enqueue_style( 'my-bootstrap-extension' );

// if we didn't register it, we HAVE to set the $src parameter!
wp_enqueue_style(
	'my-bootstrap-extension',
	get_template_directory_uri() . '/css/my-bootstrap-extension.css',
	array( 'bootstrap-main' ),
	null, // example of no version number...
	// ...and no CSS media type
);

?>

请记住，如果插件需要找到您的样式表，或者您打算在主题的各个部分加载它，您一定要先注册它。

将样式加载到我们的网站

我们不能只 wp_enqueue_style()在主题中的任何地方使用该函数——我们需要使用“动作”。我们可以将三种操作用于各种目的：

wp_enqueue_scripts用于在我们网站的前端加载脚本和样式
admin_enqueue_scripts用于在我们管理面板的页面中加载脚本和样式
login_enqueue_scripts用于在 WordPress 登录页面中加载脚本和样式

以下是这三个操作的示例：

<?php

// load css into the website's front-end
function mytheme_enqueue_style() {
	wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() ); 
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );

// load css into the admin pages
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' );

// load css into the login page
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 的非常有用的功能：它们允许我们打印内联样式、检查样式文件的入队状态、为样式文件添加元数据以及取消注册样式。

我们来看一下。

添加动态内联样式： wp_add_inline_style()

如果您的主题具有自定义主题样式的选项，则可以使用内联样式通过以下 wp_add_inline_style() 功能打印它们：

<?php

function mytheme_custom_styles() {
	wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css' );
	$bold_headlines = get_theme_mod( 'headline-font-weight' ); // let's say its value is "bold"
	$custom_inline_style = '.headline { font-weight: ' . $bold_headlines . '; }';
	wp_add_inline_style( 'custom-style', $custom_inline_style );
}
add_action( 'wp_enqueue_scripts', 'mytheme_custom_styles' );

?>

快捷方便。但请记住：您必须使用与要在其后添加内联样式的样式表相同的句柄名称。

检查样式表的入队状态： wp_style_is()

在某些情况下，我们可能需要有关样式状态的信息：它是否已注册、是否已入队、是否已打印或等待打印？您可以使用以下 wp_style_is() 功能确定它：

<?php

/*
 * wp_style_is( $handle, $state );
 * $handle - name of the stylesheet
 * $state - state of the stylesheet: 'registered', 'enqueued', 'done' or 'to_do'. default: 'enqueued'
 */

// wp_style_is() example
function bootstrap_styles() {

	if( wp_style_is( 'bootstrap-main' ) {
    
		// enqueue the bootstrap theme if bootstrap is already enqueued
		wp_enqueue_style( 'my-custom-bootstrap-theme', 'http://url.of/the/custom-theme.css' );
        
	}
    
}
add_action( 'wp_enqueue_scripts', 'bootstrap_styles' );

?>

将元数据添加到样式表：wp_style_add_data()

这是一个很棒的函数 wp_style_add_data()，它允许您将元数据添加到您的样式中，包括条件注释、RTL 支持等等！

一探究竟：

<?php

/*
 * wp_style_add_data( $handle, $key, $value );
 * Possible values for $key and $value:
 * 'conditional' string      Comments for IE 6, lte IE 7 etc.
 * 'rtl'         bool|string To declare an RTL stylesheet.
 * 'suffix'      string      Optional suffix, used in combination with RTL.
 * 'alt'         bool        For rel="alternate stylesheet".
 * 'title'       string      For preferred/alternate stylesheets.
 */

// wp_style_add_data() example
function mytheme_extra_styles() {
	wp_enqueue_style( 'mytheme-ie', get_template_directory_uri() . '/css/ie.css' );
	wp_style_add_data( 'mytheme-ie', 'conditional', 'lt IE 9' );
	/*
	 * alternate usage:
	 * $GLOBALS['wp_styles']->add_data( 'mytheme-ie', 'conditional', 'lte IE 9' );
	 * wp_style_add_data() is cleaner, though.
	 */
}

add_action( 'wp_enqueue_scripts', 'mytheme_ie_style' );

?>

太棒了，不是吗？

如果我没记错的话，这是第一篇关于这个小但有用的函数的教程。

取消注册样式文件wp_deregister_style()

如果您需要“取消注册”样式表（例如，为了使用修改后的版本重新注册它），您可以使用 wp_deregister_style().

让我们看一个例子：

<?php

function mytheme_load_modified_bootstrap() {
	// if bootstrap is registered before...
	if( wp_script_is( 'bootstrap-main', 'registered' ) ) {
		// ...deregister it first...
		wp_deregister_style( 'bootstrap-main' );
		// ...and re-register it with our own, modified bootstrap-main.css...
		wp_register_style( 'bootstrap-main', get_template_directory_uri() . '/css/bootstrap-main-modified.css' );
		// ...and enqueue it!
		wp_enqueue_style( 'bootstrap-main' );
	}
}

add_action( 'wp_enqueue_scripts', 'mytheme_load_modified_bootstrap' );

?>

虽然这不是必需的，但如果您取消注册另一种样式，您应该始终重新注册 - 如果您不这样做，您可能会破坏某些东西。

还有一个名为的类似函数wp_dequeue_style()，顾名思义，它会删除排队的样式表。

仅在特定页面上加载 CSS

WordPress 依靠多个插件向网站添加不同类型的功能。这些插件所需的 CSS 和 javaScript 通常在特定页面上需要。这意味着在每个页面上加载相同的未使用的 CSS 会导致不必要的膨胀。

在本节中，我们将学习如何仅在实际需要的页面上将 CSS 加载到 WordPress 中。

在下面的代码片段中，我们在触发钩子时为图表.js 库注册脚本和样式。init之后，当 wp_enqueue_scripts 钩子被触发时，我们有条件地将这些文件排入队列。

该 is_page()函数用于确定我们是否将脚本和样式表排入右侧页面。您可以传递单个字符串和数字或它们的数组来一次检查多个页面。在我们的例子中，chart.js 文件将排在显示销售和季度结果的页面上。

<?php

add_action('init', 'register_custom_styles_scripts');

function register_custom_styles_scripts() {
    wp_register_style( 'chartjs_css', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css' );
    wp_register_script( 'chartjs_js', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js', '', null, true);
}


add_action( 'wp_enqueue_scripts', 'conditionally_enqueue_styles_scripts' );

function conditionally_enqueue_styles_scripts() {

    if ( is_page(array('sales', 'quarterly-results')) ) {
        wp_enqueue_script( 'chartjs_js' );
        wp_enqueue_style( 'chartjs_css' );
    }
}

?>

在页脚中加载 CSS

为用户提高页面加载速度的另一种方法是只在头部加载关键的 CSS，而在页脚加载其他所有内容。

函数中的最后一个参数wp_enqueue_script() 允许我们在页脚中加载脚本。可惜对应的 wp_enqueue_style() 函数没有这个参数。确保将样式表添加到页脚的最佳方法是使用 wp_footer 操作挂钩。它用于在结束 body 标记之前输出脚本或其他数据。

<?php

function footer_add_chart_style() {
    wp_enqueue_style('chartjs_css', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css');
};
add_action( 'get_footer', 'footer_add_chart_style' );

?>