文章
文章商城快讯网址导航
外贸独立站的底层设计密码WordPress 成品站SaaS建站
当前位置：首页>WordPress建站>WordPress开发>正确加载 CSS 到 WordPress

正确加载 CSS 到 WordPress

倡萌之前分享过《正确加载 Javascript 和 CSS 到 WordPress》，今天分享一篇详细解说正确加载 CSS 的文章。

没有CSS，你只能很有限地风格化你的网页。而如果没有在WordPress包含适当的 CSS，将让你的主题用户很难自定义主题的样式。

在本教程中，我们将看看以正确的方式来排队加载 CSS 到 WordPress。

WordPress 是目前世界上最流行的内容管理系统，它有上千万的用户。这就是为什么，为了制作一个成功的主题，我们需要思考每一个WordPress用户，并尝试通过本教程来正确地加载CSS文件到我们的主题中。

在 WordPress 中加载 CSS 的错误方式

多年来，WordPress 已经发展了其代码，以便使它越来越灵活，排队加载 CSS和JavaScript 就是在朝这个方向移动。我们的坏习惯已经保持一段时间了，尽管我们知道 WordPress 介绍了排队加载 CSS 和 JavaScript 的方法，我们还是继续添加这类代码到主题的 header.php 文件：

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

或者我们添加下面的代码到主题的 functions.php ，而且认为这个方法更好些：

<?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() 函数进行注册：

<?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() 函数的一个例子：

<?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() 函数来实现：

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

该函数的参数和上面的 wp_register_style() 函数是一样的，就不再重复。

但是，正如我们所说的， wp_register_style() 函数是不强制使用的，我要告诉你，你可以用两种不同的方式使用 wp_enqueue_style()：

<?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() 函数 – 我们需要使用“动作”钩子。还有我们可以使用各种用途的三个动作钩子：

以下是这些钩子的示例：

<?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() 函数来打印内置的样式：

<?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() 函数来确定它：

<?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的支持和更多！

来看看吧：

<?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() 实现。

让我们看一个例子：

<?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 的方法！希望你喜欢本教程。

你有你想分享任何方法或经验？请在下面评论，并与我们分享您的知识！如果你喜欢这篇文章，不要忘记与你的朋友分享！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
CSS
欢迎关注WordPress大学公众号 WPDAXUE
WordPress开发

WordPress 分页链接函数 paginate_links

2014-6-8 8:09:06

WordPress开发

获取多站/多语种 ( 基于 WPML ) WordPress 网站当前的语种

2014-7-21 8:13:50

猜你喜欢
11 条回复 A文章作者 M管理员
  2. 菜鸟

    你好，我能请教个问题吗？
    我想让插件只在特定页面加载，css用 wp_dequeue_style() 自己搞定了。script 知道用wp_dequeue_script（）
    但找不到handle（句柄），能教我怎么找到插件的句柄吗？

    • 菜鸟

      这个我已经看过了，我的问题是不知道怎么找到能控制script的handle,比如想控制contact-form-7的script用contact-form-7句柄，比较有名的插件一般都可以在网上搜得到，一般的插件还得自己会找，我就是不会找。。。

  3. 千与千昭

    注册应该在哪注册啊 或者说 这段代码应该放在哪？ 博主

    • 倡萌

      一般WordPress的函数都可以添加到主题的 functions.php

  4. 硬是没有看懂。

  5. 用此正确的方式加载 css 到login画面后， css 没有在<head>中而是在页脚部位。这是为什么？

  6. jsaihaozhe

    请原谅我下面问话的无知：
    wp_head()函数不是自动调用了css吗？为什么还要这么费劲呢？

  7. 用不用这么复杂啊~~~

  8. 我是部分这么加载，部分还是传统的加载方法。。

❯
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索

  • 扫码打开当前页

  • 微信扫一扫，联系我们

  • 关注微信公众号 WPDAXUE

返回顶部