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

时间:2016-08-25 作者:CROSP

我知道根据默认的Wordpress引导过程,首先functions.php 之后是所有主题的东西。但我现在要彻底重构我的主题来优化它。我的想法是为通用属性、规格化、颜色创建一个基础css文件。或者保留单个css文件,但在这种情况下,我需要硬编码切换大小写functions.php 以确定页面。还有一个特定于每个页面,因为加载定义了所有样式的巨大css样式文件是没有意义的。

所以我的问题是,什么是加载特定脚本/样式的最佳挂钩位置?

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

如果有任何帮助,我将不胜感激。

2 个回复
最合适的回答,由SO网友:bynicolas 整理而成

这一切都取决于你定制的规模以及你将如何组织你的东西。但有两种主要的方法。functions.phptemplate files

我喜欢的方式是register 函数中的所有我的脚本/样式。php,所以我知道我将使用什么,但我会enqueue 只有我需要的时候才需要。

您可以在函数中有条件地将所有内容排队。php文件(if( is_page( \'blah\') { //... enqueue stuff } ) 或者你可以利用template files 设置特定类别/标签/帖子/页面等的样式。

然后,在该模板文件中,调用enqueue 脚本/样式文件。这也使得它成为了解什么是在哪里加载的一种非常必要的方法。

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

相同的逻辑将应用于具有相应register/enqueue 功能

此外,在策略中要考虑请求的数量,如果您将内容分解为多个文件,请尽量减少加载的文件数量,以免对页面加载产生负面影响。

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

无论如何,缓存1个或多个资产是一种很好的方法,可以提高您的网站在网站速度方面的感知响应能力。

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

EDIT

注册脚本的主要原因如下

当我们需要脚本/样式时,可以更轻松地调用它。

  • 可以将注册的脚本/样式用作我们需要加载的文件的依赖项
  • 防止我们编写的代码超过需要,有效地简化了我们的代码
  • 更多我现在可能没有想到的事情
    • 注意

      如果已注册的脚本/样式列为$deps 您当前排队的文件的。

      一个例子(不一定是你应该怎么做,但你要明白目的)

      我已经注册了

      普通风格。css导航。css按钮。css现在已经注册了这些样式,所以如果我转到特定的页面,想在那里应用不同的样式。我在该页面上排队(通过functions.php中的条件语句或我的页面模板)specific-style.css 就像这样。

      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\') );
      }
      
      请注意,中的数组wp_enqueue_style 是已注册样式的句柄数组。WP将方便地按照正确的顺序加载所有4个文件,以尊重依赖关系。

      您可以通过简单地将每个脚本/样式注册为正确的依赖项来级联依赖项

      i、 e类buttons.css 取决于navigation.css 这取决于common-style.css

      如果我记住了这个逻辑,我只需要排队specific-style.css 具有buttons.css 作为一个依赖项,WP将菊花链加载,以尊重订单。

    SO网友:zendka

    “”refactor“,”optimise“,”scalable“,”elegant“。非常令人担忧!您走的是正确的道路。但是,将CSS文件拆分为多个并不能解决这些问题。原因如下:

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

    Fewer requestsoptimise 网站速度。(参见Steve Soudersthis article).

    进一步的优化是minify 您的CSS。(参见Google PageSpeed post.) 感谢@bynicolas的建议。

    当然可以,但是elegance? 好消息是:SassLESS. 它们允许您编写更少的代码,将其拆分为多个文件并编译为一个CSS文件,等等。