WordPress 选择性加载CSS和JS文件

这是名字 2014-08-06

展开全文

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

安装的插件越多，网站速度就会越慢。这种说法其实并不完全正确。有些插件只是给网站添加了一个小调用，对网站速度并不造成影响。而有些插件会在每次页面加载时加入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:///
wp_enqueue_style( 'cleaner-gallery', CLEANER_GALLERY_URL .
'cleaner-gallery.css', false, 0.8, 'all' );

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

//代码来自http:///
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );  
function my_deregister_styles() {  
wp_deregister_style( 'cleaner-gallery' );  
}

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

//代码来自http:///
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在后台的设置页提供了一个删除样式表的选项。

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

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

禁用JavaScripts

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

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

//代码来自http:///
add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );    
function my_deregister_javascript() {  
wp_deregister_script( 'contact-form-7' );  
}

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

在特定页面加载脚本

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

//代码来自http:///
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文件也是同理：

//代码来自http:///
<!--?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。