性价比最高的香港ASP、PHP主机提供商
做网站,就上凡科建站

正确加载 CSS 到 WordPress

Loading
0
Comodo SLL证书促销 - 免费ssl证书申请_ssl证书购买_ev ssl证书_https证书购买 - GDCA_数安时代

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

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

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

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

在 WordPress 中加载 CSS 的错误方式

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

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

或者我们添加下面的代码到主题的 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() 函数 – 我们需要使用“动作”钩子。还有我们可以使用各种用途的三个动作钩子:

以下是这些钩子的示例:

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

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

支付宝扫码打赏 微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

MetInfo | 最适合企业网站建设的cms系统

关于 倡萌

一个疯狂的 WordPress 爱好者,喜欢折腾 WordPress 主题,分享 WordPress 资源。如果你也喜欢 WordPress,欢迎和我一起交流!

精彩推荐

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

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

WordPress函数:load_theme_textdomain(主题本地化)

7 条评论

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

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

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

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

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

发表评论