IDC资讯中心
本文目录
[隐藏]
- 1在 WordPress 中加载 CSS 的错误方式
- 2在 WordPress 中加载 CSS 的正确方式
- 2.1注册 CSS 文件
- 2.2排队 CSS 文件
- 2.3加载样式到我们的网站
- 3一些额外的函数
- 3.1添加动态内联样式：wp_add_inline_style()
- 3.2检查样式表的排队状态：wp_style_is()
- 3.3添加元数据到样式表：wp_style_add_data()
- 3.4注销样式文件：wp_deregister_style()
- 4结语
倡萌之前分享过《正确加载 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 |
<link rel="stylesheet" href="<?php%20echo%20get_stylesheet_uri();%20?>">
|
或者我们添加下面的代码到主题的 functions.php ，而且认为这个方法更好些：
1 2 3 4 5 6 7 8 9 |
<?php function add_stylesheet_to_head() { echo "<link href='http://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() 函数进行注册：
1 2 3 |
<?php wp_register_style( $handle, $src, $deps, $ver, $media ); ?> |
$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 |
<?php // wp_register_style() 示例 wp_register_style( 'my-bootstrap-extension', // 名称 get_template_directory_uri() . '/css/my-bootstrap-extension.css', // 样式表的路径 array( 'bootstrap-main' ), // 依存的其他样式表 '1.2', // 版本号 'screen', // CSS 媒体类型 ); ?> |
在WordPress中，注册样式是“可选的”。如果你的样式不会被其他插件使用，或者你不打算使用任何代码来再次加载它，你可以自由地排队样式而不需要注册它。继续看看它是如何实现的。
排队 CSS 文件
注册我们的风格文件后，我们需要“排队”它，使其准备好在我们主题的<head>部分加载。
我们使用 wp_enqueue_style() 函数来实现：
1 2 3 |
<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?> |
该函数的参数和上面的 wp_register_style() 函数是一样的，就不再重复。
但是，正如我们所说的， wp_register_style() 函数是不强制使用的，我要告诉你，你可以用两种不同的方式使用 wp_enqueue_style()：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php // 如果我们之前已经注册过样式 wp_enqueue_style( 'my-bootstrap-extension' ); // 如果我们之前没有注册，我们不得不设置 $src 参数！ wp_enqueue_style( 'my-bootstrap-extension', get_template_directory_uri() . '/css/my-bootstrap-extension.css', array( 'bootstrap-main' ), null, // 举例不适用版本号 // ...并且没有指定CSS媒体类型 ); ?> |
请记住，如果一个插件将要用到你的样式表，或者你打算将在你的主题的不同地方进行加载，你绝对应该先注册。
加载样式到我们的网站
我们不能在主题中随便找个地方使用 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 |
<?php // 在网站前台加载css function mytheme_enqueue_style() { wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() ); } 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 有一个重要的公告：“使用 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 |
<?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' ); // 比方说，它的值是粗体“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' ); ?> |
方便快捷。但请记住：你必须使用与后面要添加的内联样式样式表相同的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 |
<?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() 示例 function bootstrap_styles() { if( wp_style_is( 'bootstrap-main' ) { // 排队 my-custom-bootstrap-theme 如果 bootstrap-main 已经排队 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的支持和更多！
来看看吧：
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 |
<?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() 示例 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() 实现。
让我们看一个例子：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php function mytheme_load_modified_bootstrap() { // 如果 bootstrap-main 之前已注册... if( wp_script_is( 'bootstrap-main', 'registered' ) ) { // ...取消注册... wp_deregister_style( 'bootstrap-main' ); // ...取而代之，注册我们自定义的 modified bootstrap-main.css... wp_register_style( 'bootstrap-main', get_template_directory_uri() . '/css/bootstrap-main-modified.css' ); // ...然后排队它 wp_enqueue_style( 'bootstrap-main' ); } } add_action( 'wp_enqueue_scripts', 'mytheme_load_modified_bootstrap' ); ?> |
虽然它不是必须的，但是通常你注销了一个样式，就应该重新注册一个样式，否则可能会打乱其他的一些东西。
还有一个类似的函数叫做 wp_dequeue_style() ，正如它的名字所暗示的一样，用来取消已经排队的样式表。
结语
恭喜你，现在你知道一切关于在 WordPress 正确加载 CSS 的方法！希望你喜欢本教程。
