正确加载 CSS 和JS到 WordPress

这将确保网站保持高效并且不存在不兼容问题。

官方文档:

https://developer.wordpress.org/themes/basics/including-css-javascript/#stylesheets

https://developer.wordpress.org/reference/functions/wp_enqueue_style/

正确加载 CSS 到 WordPress的例子(放于主题根目录的functions.php文件内的

//加载额外的css到wordpress
function my_new_css(){
	wp_register_style('comments',get_template_directory_uri().'/css/comments.css');
	wp_enqueue_style('comments', get_template_directory_uri().'/css/comments.css');
}
add_action('wp_enqueue_scripts','my_new_css');

我有一个名为comments.css的CSS文件,位于主题的根目录下的css文件夹内。

get_template_directory_uri()

输出: http://127.0.0.1/wp-content/themes/test


在创建主题时,您可能希望创建其他样式表或JavaScript文件。但是,请记住,WordPress网站不仅会激活您的主题,还会使用许多不同的插件。因此,一切都和谐地工作,主题和插件使用标准的WordPress方法加载脚本和样式表是很重要的。这将确保网站保持高效并且不存在不兼容问题。

来源于:

https://www.wpdaxue.com/loading-css-into-wordpress.html

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

如果没有CSS,您对网页样式的选择非常有限。如果没有适当的CSS包含在WordPress中,您可以使主题的用户非常难以自定义主题的样式。 

在本教程中,我们将了解将CSS排入WordPress的正确方法。

WordPress是目前世界上最受欢迎的内容管理系统,拥有数千万用户。这就是为什么,为了制作一个成功的主题,我们需要像每个WordPress用户一样思考,并尝试按照本书的说法正确加载我们的主题中的CSS文件。

在WordPress中加载CSS的错误方法

多年来,WordPress已经发展了它的代码,以使其变得越来越灵活,并且将CSS和JavaScript排入队列是朝着这个方向发展的。不过,我们的坏习惯有一段时间了。知道WordPress引入了CSS和JavaScript入队后,我们继续将这些代码添加到我们的header.php文件中:

<link rel="stylesheet" href="">


<link rel="stylesheet" href="/style.css">
<script src="/bootstrap/js/bootstrap.js">script>

...或者我们将下面的代码添加到我们的functions.php文件中,认为它更好:

 
function add_stylesheet_to_head() {
    echo "";
}
 
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()函数注册它们:

wp_register_style( $handle, $src, $deps, $ver, $media );
?>
  • $handle(字符串,必需)是样式表的唯一名称。其他函数将使用此“句柄”来排队和打印样式表。
  • $src(string,required)是指样式表的URL。您可以使用函数get_template_directory_uri()来获取主题目录中的样式文件。永远不要考虑硬编码!
  • $deps(array,optional)处理依赖样式的名称。如果缺少某些其他样式文件,样式表将无效,请使用此参数设置“依赖项”。
  • $ver(string或boolean,optional)是版本号。如果需要,您可以使用主题的版本号或组成一个。如果您不想使用版本号,请将其设置为null。它默认为false,这使得WordPress添加自己的版本号。
  • $media(字符串,可选)是  CSS媒体类型,如“屏幕”或“手持”或“打印”。如果您不确定是否需要使用它,请不要使用它。它默认为“全部”。

这是wp_register_style()函数的一个例子:

 
// 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 文件

注册我们的风格文件后,我们需要“排队”它,使其准备好在我们主题的部分加载。

我们使用 wp_enqueue_style() 函数来实现:

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

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

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

 
// 如果我们之前已经注册过样式
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() 函数 – 我们需要使用“动作”钩子。还有我们可以使用各种用途的三个动作钩子:

以下是这些钩子的示例:

 
// 在网站前台加载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() 函数来打印内置的样式:

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

 
/*
 * 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的支持和更多!

来看看吧:

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

让我们看一个例子:

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

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧