北极寒流 » 网络资源 » WordPress按需加载JS和CSS文件,实现提速功能 - 2010.08.17

WordPress按需加载JS和CSS文件,实现提速功能

说实话,以前从来没想到去折腾一下什么按需加载JS,我一般都把几乎所有的JS文件一股脑合并在一个all.js的文件中,然后挂载在文章最后,不过今天由于折腾WordPress图片的lightBox功能,结果导致和我首页的缩略图插件起了点小冲突,正想忍痛放弃lightBox效果,忽然转念一想,既然只是在首页和我的缩略图功能有冲突,文章页是没问题的,那么我可不可以让lightBox.js只作用在文章页,而不作用在首页呢?通过GG,终于找到解决办法,这就是今天所说的按需加载js了。

解决我的lightBox效果与缩略图功能相冲突的方法就是给每个页面定义不同的 JS 文件,然后用 PHP 的判断句来按需调用这些 JS 文件。基本语句格式如下:

<?php if (is_home()) { ?>
<script src="1.js文件的地址" type="text/javascript" charset="utf-8"></script>
<?php } elseif( is_single() ) { ?>
<script src="2.js文件的地址" type="text/javascript" charset="utf-8"></script>
<?php } elseif( is_page() or is_category() or is_tag() or is_search()or is_day() or is_month() or is_year()) { ?>
<script src="3.js文件的地址" type="text/javascript" charset="utf-8"></script>
<?php } ?>

至于上面的那几句话是什么含义,喜欢折腾WordPress,你懂的,嗯,你懂的!不喜欢折腾的自然可以无视了。

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

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

<?php if (is_home()) { ?>
<link rel="stylesheet" href="http://www.articn.com/wp-content/themes/ep/style-index.css" type="text/css" />
<?php } elseif( is_single() ) { ?>
<link rel="stylesheet" href="http://www.articn.com/wp-content/themes/ep/style-single.css"  type="text/css" />
<?php } elseif( is_category() || is_archive() || is_search() ) { ?>
<link rel="stylesheet" href="http://www.articn.com/wp-content/themes/ep/style-category.css"  type="text/css" />
<?php } elseif( is_page(1072) ) { ?>
<link rel="stylesheet" href="http://www.articn.com/wp-content/themes/ep/style-links.css"  type="text/css" />
<?php } else { ?>
<link rel="stylesheet" href="http://www.articn.com/wp-content/themes/ep/style.css" type="text/css" />
<?php } ?>

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

如果看懂了上上段代码或者上段文字,那你应该知道“按需加载CSS”修改时的顺序了吧?先把所有CSS合并起来,然后具体分析首页到底需要哪些CSS代码,去掉合并后CSS文件中不需要的代码,然后再具体分析文章页……

评论关闭