正确加载 CSS 到 WordPress
wpdaxue.com/loading-css-into-wordpress.html
倡萌之前分享过《正确加载 Javascript 和 CSS 到 WordPress》，今天分享一篇详细解说正确加载 CSS 的文章。
- 原文：http://code.tutsplus.com/tutorials/loading-css-into-wordpress-the-right-way--cms-20402
- 编译：倡萌@WordPress大学
没有CSS，你只能很有限地风格化你的网页。而如果没有在WordPress包含适当的 CSS，将让你的主题用户很难自定义主题的样式。
在本教程中，我们将看看以正确的方式来排队加载 CSS 到 WordPress。
WordPress 是目前世界上最流行的内容管理系统，它有上千万的用户。这就是为什么，为了制作一个成功的主题，我们需要思考每一个WordPress用户，并尝试通过本教程来正确地加载CSS文件到我们的主题中。
在 WordPress 中加载 CSS 的错误方式
多年来，WordPress 已经发展了其代码，以便使它越来越灵活，排队加载 CSS和JavaScript 就是在朝这个方向移动。我们的坏习惯已经保持一段时间了，尽管我们知道 WordPress 介绍了排队加载 CSS 和 JavaScript 的方法，我们还是继续添加这类代码到主题的 header.php 文件：
1 |
或者我们添加下面的代码到主题的 functions.php ，而且认为这个方法更好些：
1 2 3 4 5 6 7 8 9 |
"; } 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() 函数进行注册：
1 2 3 |
$handle（字符串，必需）是你的样式表唯一名称。其他函数将使用这个“handle”来排队并打印样式表。$src（字符串，必需）指的是样式表的URL。您可以使用函数，如get_template_directory_uri()来获取主题目录中的样式文件。永远不要去想硬编码了！$deps（数组，可选）处理相关样式的名称。如果丢失某些其他样式文件将导致你的样式表将无法正常工作，你可以使用该参数设置“依赖关系”。$ver（字符串或布尔型，可选）版本号。你可以使用你的主题的版本号或任何一个你想要的。如果您不希望使用一个版本号，将其设置为null。默认为false，这使得WordPress的添加自己的版本号。$media（字符串，可选）是指CSS的媒体类型，比如“screen”或“handheld”或“print”。如果你不知道是否需要使用这个，那就不使用它。默认为“all”。
以下是 wp_register_style() 函数的一个例子：
1 2 3 4 5 6 7 8 9 10 11 12 |
在WordPress中，注册样式是“可选的”。如果你的样式不会被其他插件使用，或者你不打算使用任何代码来再次加载它，你可以自由地排队样式而不需要注册它。继续看看它是如何实现的。
排队 CSS 文件
注册我们的风格文件后，我们需要“排队”它，使其准备好在我们主题的
部分加载。我们使用 wp_enqueue_style() 函数来实现：
1 2 3 |
该函数的参数和上面的 wp_register_style() 函数是一样的，就不再重复。
但是，正如我们所说的， wp_register_style() 函数是不强制使用的，我要告诉你，你可以用两种不同的方式使用 wp_enqueue_style()：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
请记住，如果一个插件将要用到你的样式表，或者你打算将在你的主题的不同地方进行加载，你绝对应该先注册。
加载样式到我们的网站
我们不能在主题中随便找个地方使用 wp_enqueue_style() 函数 - 我们需要使用“动作”钩子。还有我们可以使用各种用途的三个动作钩子：
wp_enqueue_scripts用来在网站前台加载脚本和CSSadmin_enqueue_scripts用来在后台加载脚本和CSSlogin_enqueue_scripts用来在WP登录页面加载脚本和CSS
以下是这些钩子的示例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
WordPress 有一个重要的公告：“使用 wp_enqueue_scripts() ，不要用 wp_print_styles() ”，它会告诉你一个与 WordPress3.3版本可能的不兼容错误。
一些额外的函数
WordPress 有一些关于 CSS 非常有用的函数：他们允许我们打印内嵌样式，查看样式文件的排队状态，添加元数据以及注销样式。
让我们一起来看看。
添加动态内联样式：wp_add_inline_style()
如果你的主题有选项可自定义主题的样式，你可以使用 wp_add_inline_style() 函数来打印内置的样式：
1 2 3 4 5 6 7 8 9 10 11 |
方便快捷。但请记住：你必须使用与后面要添加的内联样式样式表相同的hadle名称。
检查样式表的排队状态：wp_style_is()
在某些情况下，我们可能需要一个风格的状态信息：是否注册，是否入列，它是打印或等待打印？您可以使用 wp_style_is() 函数来确定它：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
添加元数据到样式表：wp_style_add_data()
wp_style_add_data() 是一个非常棒的函数，它可以让你添加元数据到你的样式中，包括条件注释、RTL的支持和更多！
来看看吧：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
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() 实现。
让我们看一个例子：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
虽然它不是必须的，但是通常你注销了一个样式，就应该重新注册一个样式，否则可能会打乱其他的一些东西。
还有一个类似的函数叫做 wp_dequeue_style() ，正如它的名字所暗示的一样，用来取消已经排队的样式表。
结语
恭喜你，现在你知道一切关于在 WordPress 正确加载 CSS 的方法！希望你喜欢本教程。
你有你想分享任何方法或经验？请在下面评论，并与我们分享您的知识！如果你喜欢这篇文章，不要忘记与你的朋友分享！