远方的海
远方的海,WordPress,免费
2014 Aug 06 17 : 51

WordPress 选择性加载CSS和JS文件

您当前的位置: 首页 > WordPress > 正文
欢迎光临远方的海!您可能还对 WordPress建站免费资源最新IT动态 感兴趣,点击开启 悦读 模式。CTRL+D 快捷收藏本文,我们期待您再次光临!

相信你一定听过这样的说法:

安装的插件越多,网站速度就会越慢。这种说法其实并不完全正确。有些插件只是给网站添加了一个小调用,对网站速度并不造成影响。而有些插件会在每次页面加载时加入jQuery和CSS文件(在网站的<head></head>区域)。假设每个插件都会添加一个jQuery文件和一个CSS文件,而你安装了八个这样的插件,那么就相当于添加了16个HTTP请求。如果插件向页面添加的样式表或jQuery文件数量不止一个,那就相当可怕了。这篇文章我们就介绍如何在避免多余HTTP请求的情况下使用所有需要的WordPress插件。

注意:进行以下操作最好具备若干PHP知识。

本文目标:禁用插件在页面加载时添加的所有附加脚本和样式表。

可是为什么这些插件要向页面添加脚本和样式表呢?这会影响插件的正常运行吗?很高兴你会这样想。对插件的开发目的来说这些CSS代码和JS代码可能相当重要,不过为了更好地管理自己的网站,让网站拥有更快的访问速度,我们可以删除这些代码。通过删除这些CSS文件和JS文件,我们可以:

  • 将多个文件整合到一个单独文件里
  • 只在需要使用脚本或样式的页面上加载这些文件

禁用WordPress里的脚本和样式

WordPress有一个内置系统,通过这个系统我们可以取消注册插件所添加的脚本和样式。但同时WordPress是一个开源软件,其插件由WordPress用户自行开发。这些插件开发者里有专家级开发者,也有开发新手。这意味着,不是所有插件都使用正确的方法加载脚本和样式,这就增加了禁用脚本和样式的难度。正确的方式是利用wp_enqueue_script()和wp_enqueue_style()这两个WordPress函数注册样式表和脚本。点击前往

要确定你希望禁用的脚本或样式,你需要进一步查看插件代码。

禁用CSS(样式表)

这里我们以插件Cleaner Gallery为例。这个插件在会每次页面加载时加入自己的CSS文件。首先你需要确认这款插件添加样式表的方法是否正确。你可以打开插件文件gallery.php(gallery.php是插件Cleaner Gallery的文件),然后在其中查找“wp_enqueue_style”,搜索到的结果如下:

1
2
3
//Code from http://seavia.com/
wp_enqueue_style( 'cleaner-gallery', CLEANER_GALLERY_URL .
'cleaner-gallery.css', false, 0.8, 'all' );

从代码中可以看出负责样式表的句柄为“cleaner-gallery”。然后打开主题中的functions.php文件,添加以下代码:

1
2
3
4
5
//代码来自http://seavia.com/
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );  
function my_deregister_styles() {  
wp_deregister_style( 'cleaner-gallery' );  
}

你可以利用这个函数决定所取消的样式表操作次数。如果你需要取消注册多个插件的样式表,那么可以使用下面这段代码:

1
2
3
4
5
6
//代码来自http://seavia.com/
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {  
wp_deregister_style( 'cleaner-gallery' );  
wp_deregister_style( 'Plugin Style Handle' );  
wp_deregister_style( 'Plugin Style Handle' );  }

但是删除本该加载到所有页面的样式表后,Cleaner Gallery插件的功能就会受到影响。例如你的图集的样式和结构会崩坏。要修复这个问题,请打开主题的style.css文件,将插件的CSS代码粘贴到文件的最下方。这里我们用的是Cleaner Gallery插件,那么就将插件文件夹中的cleaner-gallery.css文件复制到主题的style.css文件里。这样不仅可以定制图集的样式,也减少了一次HTTP请求。

理想状态:分页插件WP-PageNavi在后台的设置页提供了一个删除样式表的选项。

WordPress 选择性加载CSS和JS文件

大多数时候你需要修改这款插件的显示效果以符合网站的色调。因此很多用户最终都会把代码粘贴到style.css文件。现在插件作者给出了一个简单的复选框选项,让用户选择是否取消注册样式表。

希望越来越多的插件开发者采取这种做法,为WordPress用户提供更多方便。

禁用JavaScripts

出于对功能性的考虑,有些插件会向页面添加JavaScript文件,例如Contact Form 7。

和处理样式文件一样,我们需要在插件文件里找到JS脚本句柄。在Contact Form 7里,脚本句柄为”contact-form-7″。复制以下函数并粘贴到主题的functions.php文件:

1
2
3
4
5
//代码来自http://seavia.com/
add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );    
function my_deregister_javascript() {  
wp_deregister_script( 'contact-form-7' );  
}

如果有必要,你也可以在这个函数里取消注册多个脚本。删除JS脚本后会影响插件的功能。你可以把所有JS组合在一起,但有时未必起作用,所以请谨慎操作。

在特定页面加载脚本

如果你确实需要Contact Form脚本文件,而又不愿意将它和其他脚本混合。你可以选择只在联系页面加载这些脚本,只需要用到下面这个函数:

1
2
3
4
5
6
7
//代码来自http://seavia.com/
add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );    
function my_deregister_javascript() {  
if ( !is_page('Contact') ) {  
wp_deregister_script( 'contact-form-7' );  
}  
}

这样就可以避免在非联系表单页面上加载多余脚本了。对提高网站速度来说这是个实用的方法。我们也可以使用!is_single等其他参数。

其实按需加载JS还有一个好处就是可以加快WordPress的运行速度,试想一般情况下每个页面需要调用的 JS 不都一样,如果我们强制一些不需要所有 JS 文件的页面也加载整个all.js,那岂不是浪费资源拖慢速度?所以,让不同的页面加载不同js还可以对WordPress进行提速,一举两得。

按需加载CSS其实道理也和按需加载JS一样:

加载CSS文件也是同理:

1
2
3
4
5
6
7
8
9
10
11
12
//代码来自http://seavia.com/
<!--?php if (is_home()) { ?-->
 
<!--?php } elseif( is_single() ) { ?-->
 
<!--?php } elseif( is_category() || is_archive() || is_search() ) { ?-->
 
<!--?php } elseif( is_page(1072) ) { ?-->
 
<!--?php } else { ?-->
 
<!--?php } ?-->

上面这段代码什么意思呢?就是当打开的是首页时加载style-index.css这个CSS文件,打开文章页时加载style-single.css,打开文章页、归档页或者搜索结果页时加载style-category.css,打开页面且其ID=1072时加载style-links.css,其它页面加载style.css。

好文!分享给朋友,或者点个赞吧~

文章信息

分类:WordPress 前端

您可能也会喜欢

发表回复

Post Comment


  1. 都要来 :

    感谢站长的帮助! 解决了一直困扰我的问题 ;-)

    2015-5-15