如何加载特定于页面的脚本/样式


8

我知道根据默认的Wordpress引导过程,首先functions.php调用,然后处理所有主题。但是我目前将完全重构主题以对其进行优化。我的想法是为通用属性,规范化颜色提供一个基本的CSS文件。或保留单个css文件,但在这种情况下,我需要对大小写进行硬编码functions.php才能确定页面。每个页面还有一个特定的页面,因为加载定义了所有样式的巨大CSS样式文件没有意义。

所以我的问题是,挂载特定脚本/样式的最佳选择是什么?

应该是header-xxx.php还是其他文件?也许有一种方法可以以更可扩展和更优雅的方式来实现这个想法?

我将不胜感激。

Answers:


9

这完全取决于自定义的规模以及如何组织内容。但是有2种主要方法。functions.php模板文件

我喜欢这样做的方法是,所有脚本/样式都注册在functions.php中,这样我就知道可以使用什么,但是只有在需要时才入

您可以将所有内容有条件地排入functions.php文件(if( is_page( 'blah') { //... enqueue stuff })中,也可以使用模板文件来设置特定类别/标记/帖子/页面等的样式。

然后,在该模板文件中,您可以在其中调用入脚本/样式文件。这也是了解在何处加载内容的一种简便方法。

但是可以肯定的是,如果您希望将样式表分解为较小的文件,则需要使用

相同的逻辑适用于具有相应寄存器/队列功能的脚本

另外,请考虑策略中的请求数,如果确实将内容分解为多个文件,请尝试将加载的文件数保持在较低水平,以免对页面加载造成负面影响。

您可以做另一件事来加快页面加载速度。如果您告诉浏览器缓存样式表,则可能有1个(或少数几个)从缓存中加载的机会更大,那么如果您的站点上有多个文件,并且它们始终需要从服务器中获取,因为它们是每个加载的新页面上都有一个新文件请求。因此,请记住这一点。

无论如何,缓存1个或多个资产都是一种不错的方法,并且可以提高网站在网站速度方面的响应速度。

如果您需要有关如何使用这些功能的更多指导,请告诉我们。

编辑

注册脚本的主要原因如下

  • 使我们在需要时更容易调用脚本/样式
  • 使得可以使用注册的脚本/样式作为我们需要加载的文件的依赖项。
  • 防止自己编写超出我们需要的代码,从而有效地简化了我们的代码
  • 我现在可能不会想到的更多事情

注意

如果已将已注册的脚本/样式列为$deps当前正在排队的文件的一部分,则无需排队。

一个例子(不一定要怎么做,但是可以理解目的)

我已经注册

  • common-style.css
  • navigation.css
  • button.css

现在已经注册了这些样式,因此,如果我转到特定页面并想在此处应用其他样式。我specific-style.css像这样在页面上入队(通过functions.php中的条件语句或我的页面模板)。

add_action( 'wp_enqueue_scripts', 'my_specific_style' );
function my_specific_style(){
  wp_enqueue_style( 'specific-style', get_stylesheet_directory_uri() . '/path/to/specific-style.css', array( 'common-style', 'navigation', 'button') );
}

请注意,in wp_enqueue_style中的数组是已注册样式的句柄的数组。WP将按照正确的顺序方便地加载所有4个文件,以遵守依赖性。

您可以通过简单地使用正确的依赖关系注册每个脚本/样式来级联依赖关系

buttons.css依赖于navigation.css,后者取决于common-style.css

如果我牢记这种逻辑,则只需要将buttons.css作为specific-style.css的依赖入队,并且WP将以菊花链方式加载以遵守顺序。


感谢您的出色回答,如果我wp-register-style/script在functions.php中为所有页面编写脚本/样式,这不会影响性能吗?注册所有样式并仅在需要时才入队有什么好处?
CROSP

2
通常不,您不会看到性能问题,甚至建议您这样做。我将使用主要优点更新答案
bynicolas

1
答案已更新!
bynicolas

4

重构 ”,“ 优化 ”,“ 可扩展 ”,“ 优雅 ”。非常关注!您在正确的道路上。但是,将CSS文件拆分为多个文件并不能解决这些问题。原因如下:

浏览器缓存CSS文件。因此,一旦第一页加载,浏览器就不会为下一页请求相同的CSS文件。是的,首页加载会稍显缓慢。但是其余页面将从中受益。

更少的请求优化网站速度的最重要方法之一。(请参阅Steve Souders本文)。

进一步的优化是缩小 CSS。(请参阅Google PageSpeed帖子。)感谢@bynicolas的建议。

当然可以说,但是优雅呢?这是个好消息:SassLESS。它们使您可以编写更少的代码,将其拆分为几个文件,这些文件被编译为一个CSS文件,甚至更多。


PS:几年前我实际上有相同的想法:为什么不将一个较大的CSS文件拆分为较小的页面特定的CSS文件?直到我的一位同事向我解释了为什么它实际上会使网站变慢之前,这似乎是一个明显的优化。
zendka '16

3
很好的答案,我在回答中谈到了一点,但您说得很好。乍一看可能不直观,但是缓存了所有内容实际上将使事情变得更快。我要补充一点,最小化1个较大的CSS文件比加载多个较小的CSS文件更为有益
bynicolas 16/08/25

最小化的好处!
zendka '16

谢谢,也许我描述了我的想法有点模糊,但是我最多要有两个CSS文件,第一个是CSS文件common.css,第二个是针对每个页面的。
CROSP '16

3

您当然可以有条件地检查某人在哪个页面上,并为每个页面加入一个特定的样式表,但是最好用CSS定位该页面。

在header.php文件中,确保该body_class函数位于body标记中,如下所示:

<body <?php body_class(); ?>>

这会将类插入到body标记中,您可以使用这些标记来定位页面的特定功能。

例如,如果我希望某一特定页面上的H1为红色,则可以执行以下操作:

body.page-id-12 h1 {
    color: #ff0000;
}

因此,在ID为12的页面上,它将应用该样式。

要定位特定的页面模板,您可以执行以下操作:

body.page-template-template-about h1 {
    color: #ff0000;
}

那将定位应用了“关于”模板的页面。只需在要设置样式的页面上查看body标记中的类即可。

但是,如果您仍然希望为特定页面加入特定样式表,则可以执行以下操作:

function na35_enqueue_styles() {
    if ( is_page( 12 ) ) {
        wp_enqueue_style( 'page-12-styles', get_template_directory_uri() . '/css/page-12.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'na35_enqueue_styles' );

我认为您的答案没有重点。OP希望知道如何在特定页面上加载特定样式。而不是如何向页面添加CSS类。
bynicolas

我添加了有关如何使特定页面的样式表入队的信息,但是body_class函数的要点是,因此您不必那样做。
内特·艾伦

1
我得到的,它的在许多情况下罚款,但OP想加载1个大的样式表都在他的站点。因此,您的解决方案将不适用于此
bynicolas

1
我对您的答案投了赞成票,因为它确实更适合该问题。如果有人觉得有用,我会保留在这里。
内特·艾伦

1
@KhushbuVaghelaif ( is_page( 'careers' ) || is_page( 'portfolio' ) ) {}
Nate Allen
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.