首页 > 新闻资讯 > 禁用插件的附加CSS和JS文件

禁用插件的附加CSS和JS文件

14条评论
标签:
更多

相信你一定听过这样的说法:安装的插件越多,网站速度就会越慢。这种说法其实并不完全正确。有些插件只是给网站添加了一个小调用,对网站速度并不造成影响。而有些插件会在每次页面加载时加入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”,搜索到的结果如下:

wp_enqueue_style( 'cleaner-gallery', CLEANER_GALLERY_URL .

'cleaner-gallery.css', false, 0.8, 'all' );

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

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );  
function my_deregister_styles() {  
wp_deregister_style( 'cleaner-gallery' );  
}

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

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文件:

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );    

function my_deregister_javascript() {  
wp_deregister_script( 'contact-form-7' );  
}

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

在特定页面加载脚本

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

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等其他参数。

建议安装了多个插件的WordPress用户在火狐浏览器的查看菜单下查看网站主页的源码,看看有多少插件在</head>前添加了样式表和JavaScript等HTTP请求。如果有必要,给火狐安装YSlow Pllugin了解当前你的网站级别以及可改进的地方。

来源&来源

WordPress啦编译

* 版权声明:作者WordPress啦! 转载请注明出处。

#1
原来是这样啊。。那以后可以放心大胆的塞插件了。。
#2
有没有自动添加关键词的插件,推荐一个。
#3
哦 ,这样,需要改变一下思维啦
#4
哈哈,借鉴
#5
学习了,最近正为这个事情头疼呢。
#6
暂时不加这个回头再加
#7
嗯,这个方法很好 不过希望每个插件都有个开关可以由使用者选择
#8
嗯,这个方法很好 不过希望每个插件都有个开关可以由使用者选择
#9
我现在的插件已经达到了17个了。
#10
轻负载,现在无插件一身轻。
#11
插件太多其实不怎么好嘛。
#12
咦?美国主机的那个文章怎么删除了呢?
#13
难怪加载速度越来越慢..来这里找方法了..谢谢
#14
感謝版主分享~ contact-form-7造成重複載入jQuery 已經照版主的設定解決 感恩