Answers:
这完全取决于自定义的规模以及如何组织内容。但是有2种主要方法。functions.php和模板文件
我喜欢这样做的方法是,将所有脚本/样式都注册在functions.php中,这样我就知道可以使用什么,但是只有在需要时才入队。
您可以将所有内容有条件地排入functions.php文件(if( is_page( 'blah') { //... enqueue stuff }
)中,也可以使用模板文件来设置特定类别/标记/帖子/页面等的样式。
然后,在该模板文件中,您可以在其中调用入队脚本/样式文件。这也是了解在何处加载内容的一种简便方法。
但是可以肯定的是,如果您希望将样式表分解为较小的文件,则需要使用
相同的逻辑适用于具有相应寄存器/队列功能的脚本
另外,请考虑策略中的请求数,如果确实将内容分解为多个文件,请尝试将加载的文件数保持在较低水平,以免对页面加载造成负面影响。
您可以做另一件事来加快页面加载速度。如果您告诉浏览器缓存样式表,则可能有1个(或少数几个)从缓存中加载的机会更大,那么如果您的站点上有多个文件,并且它们始终需要从服务器中获取,因为它们是每个加载的新页面上都有一个新文件请求。因此,请记住这一点。
无论如何,缓存1个或多个资产都是一种不错的方法,并且可以提高网站在网站速度方面的响应速度。
如果您需要有关如何使用这些功能的更多指导,请告诉我们。
编辑
注册脚本的主要原因如下
注意
如果已将已注册的脚本/样式列为$deps
当前正在排队的文件的一部分,则无需排队。
一个例子(不一定要怎么做,但是可以理解目的)
我已经注册
现在已经注册了这些样式,因此,如果我转到特定页面并想在此处应用其他样式。我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将以菊花链方式加载以遵守顺序。
“ 重构 ”,“ 优化 ”,“ 可扩展 ”,“ 优雅 ”。非常关注!您在正确的道路上。但是,将CSS文件拆分为多个文件并不能解决这些问题。原因如下:
浏览器缓存CSS文件。因此,一旦第一页加载,浏览器就不会为下一页请求相同的CSS文件。是的,首页加载会稍显缓慢。但是其余页面将从中受益。
更少的请求是优化网站速度的最重要方法之一。(请参阅Steve Souders或本文)。
进一步的优化是缩小 CSS。(请参阅Google PageSpeed帖子。)感谢@bynicolas的建议。
当然可以说,但是优雅呢?这是个好消息:Sass和LESS。它们使您可以编写更少的代码,将其拆分为几个文件,这些文件被编译为一个CSS文件,甚至更多。
common.css
,第二个是针对每个页面的。
您当然可以有条件地检查某人在哪个页面上,并为每个页面加入一个特定的样式表,但是最好用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' );
if ( is_page( 'careers' ) || is_page( 'portfolio' ) ) {}
wp-register-style/script
在functions.php中为所有页面编写脚本/样式,这不会影响性能吗?注册所有样式并仅在需要时才入队有什么好处?