在主题中灵活加载JavaScript

javascript 在主题中灵活加载JavaScript近来在主题中真的用上了好多JavaScript,好看是好看了,效果也不错。但页面的加载问题毕竟存在,所以想优化一下。

优化的办法一般是把所有的JavaScript统一在一个文件中,并把它的后缀改为PHP,然后再启用GZip的功能,我想这些大家都会做的了。但我想了下,其实是没必要把所有的JavaScript也到处调用吧。怎么说呢,比如在我的主题中,会调用到Lightbox的效果,但我并不需要每个页面也用它的啊。所以我决定把它的调用条件一下,在header.php增加如下一句:

<?php if ( is_single() && has_tag('照片') ) : ?>
//这里填写需要调用Lightbox效果的JavaScript//
<?php endif ?>

这样的话,调用Lightbox效果的Javascript就只会在单篇日志中,并且该篇日志带有“照片”标签的情况下才会加载。

再譬如,我还使用Audio Player这个音乐播放的插件,插件同样不分情况地全站加载它自己的JavaScript,这样也不好。所以我取消了插件的自动加载,改为人手调用,如上同理增加:

<?php if ( is_single() && has_tag('音乐') ) : ?>
//这里填写需要调用音乐插件的JavaScript//
<?php endif ?>

这样,音乐插件的JavaScript代码也只会在单篇日志中并且带有“音乐”标签的情况下才进行加载。

当然你可以把上面两个条件判断写在一起,大家有兴趣的话可以查看更多WordPress提供的Conditions Tags。自己觉得这种做法算得上比较“经济”,你认为又如何呢?

分类:WordPress;标签:, , ;收藏本文的永久链接

38 Responses to “在主题中灵活加载JavaScript”

  1. xiaorsz 回复此留言 2008/12/18 13:29 #comment-3705

    不错不错,很好的技巧!!
    貌似这个下雪真的很耗CPU啊!!

  2. 老时 回复此留言 2008/12/18 16:52 #comment-3712

    @胡戈戈: 很好很强大

  3. Yacca 回复此留言 2008/12/18 12:22 #comment-3697

    不客气的沙发掉...昨天shawn在我那里忙活了很久,最后得出结论,我的服务器端有问题,无法实现ajax添加评论的效果,泪流流...我对js的感觉是越来越好了,宁可不要图片也要js!!!

  4. JIMMY 回复此留言 2008/12/18 12:24 #comment-3698

    這個想法的確不錯,也很有創意。
    只是,如果忘了加那個Tag,就不能加載JS碼了。
    所以,我們還是應該先好好檢查一次,才發佈。
    支持一下。

  5. Jinwen 回复此留言 2008/12/18 12:25 #comment-3699

    @Yacca: 难道你是火象星座的:白羊座、狮子座、射手座其中之一?

  6. 沿阶草 回复此留言 2008/12/18 12:27 #comment-3700

    很多人在audio mp3这个插件,会在每个页面插在一些js,(其他插件也是。
    可以尝试设置一个音乐分享分类,然后再加载这个雅虎音乐播放插件或者美味书签的音乐播放插件。
    这样更好的减少JS的输出。

  7. Jinwen 回复此留言 2008/12/18 12:28 #comment-3701

    @JIMMY: 如果用simple tags这个插件,只要文中有那个关键字,它会自动提示,应该不会忘记的,呵呵。

  8. 沿阶草 回复此留言 2008/12/18 12:31 #comment-3702

    @Yacca: ajax 评论 JS和服务器有关系么?

  9. Shawn 回复此留言 2008/12/18 12:40 #comment-3703

    呵呵,我一直在用类似的方法,不过我是马大哈,经常忘记加标签。。。

  10. 胡戈戈 回复此留言 2008/12/18 13:06 #comment-3704

    很好很不错

  11. ThinkAgain 回复此留言 2008/12/18 15:00 #comment-3708

    JINWEN的站点设计越来越棒了。
    p.s,圣诞节和新年,法国那里放几天假期?

  12. Jinwen 回复此留言 2008/12/18 16:37 #comment-3709

    @ThinkAgain: 学生就放两周,工作的人好像只有25号和1号罢了。

  13. Jinwen 回复此留言 2008/12/18 16:38 #comment-3710

    @xiaorsz: 那个下雪的,我也想取消了,那有雪不停不停地下啊,呵呵。

  14. Alan 回复此留言 2008/12/18 17:01 #comment-3713

    雪还在下 -_-!

  15. Yacca 回复此留言 2008/12/18 17:21 #comment-3715

    @Jinwen: 狮子...-.-

  16. Jinwen 回复此留言 2008/12/18 19:01 #comment-3718

    @Yacca: 呵呵,果然,喜欢炫的东西啊。

  17. Rui Shen 回复此留言 2008/12/19 03:15 #comment-3719

    恩,是个不错的方法!

  18. hufont 回复此留言 2008/12/19 04:52 #comment-3720

    收藏了你的主题,实在是喜欢~~但是不会修改。只能用回inn tago~哎。
    你的雪咋停了???呵~

  19. Charles 回复此留言 2008/12/19 05:34 #comment-3722

    个人觉得,相比增加一个http请求来说,还是用gzip压成一个更好一点。http请求更浪费时间,而js浪费的那点流量不算什么。

  20. Johnny 回复此留言 2008/12/19 06:09 #comment-3723

    嗯,受教了,蛮不错的

  21. xiaorsz 回复此留言 2008/12/19 11:05 #comment-3731

    过来看下,你这code改的还真不错。呵呵!
    不过为什么鼠标放上去后都是“好文共享之”??

  22. xiaorsz 回复此留言 2008/12/19 11:17 #comment-3733

    @Jinwen: 没了!!可能是我浏览器刚发昏了,呵呵,不好意思啊!!

  23. Jinwen 回复此留言 2008/12/19 08:27 #comment-3726

    @Charles: 其实我也同意。文中的那个可以灵活使用的,毕竟对于我照片文章出现的概率可能不到0.1呢。

  24. Jinwen 回复此留言 2008/12/19 10:03 #comment-3730

    @hufont: 修改慢慢学下就可以啦;雪总得停一两天吧,呵呵。

  25. Jinwen 回复此留言 2008/12/19 11:09 #comment-3732

    @xiaorsz: 哪里啊?为什么我没看到那些字?

  26. 醉倚西风 回复此留言 2008/12/19 11:52 #comment-3734

    看看效果 呵呵

  27. 醉倚西风 回复此留言 2008/12/19 12:05 #comment-3735

    嘿嘿 有个小请求 我看你的链接页面 正好有一个空位 和你交换链接怎么样啊 直接 醉倚西风 就可以

  28. Jinwen 回复此留言 2008/12/19 12:10 #comment-3736

    @醉倚西风: 加了。其实空位无限的啊,我都没有要求的,不过加在那里方便自己去看。

  29. 醉倚西风 回复此留言 2008/12/19 12:12 #comment-3737

    @Jinwen: 你这个REPLY好帅啊 教教我啊

  30. Jinwen 回复此留言 2008/12/19 12:17 #comment-3738

    @醉倚西风: 我前面两篇文章这是说这个啊。

  31. voidman 回复此留言 2008/12/20 12:54 #comment-3769

    客户端会缓存js文件,所以有时候没必要那么在意的

  32. Jinwen 回复此留言 2008/12/20 13:15 #comment-3771

    @voidman: 也是,不过看着体积大就想它少点。

  33. housne 回复此留言 2008/12/21 10:07 #comment-3798

    WordPress 的 Conditions Tags 的确很方便

  34. life97 回复此留言 2008/12/23 04:47 #comment-3836

    注意到博主的wp-includes里的那个jquery也并在一起了,请问这个应该怎么合并呢?插件的JS明白这样灵活处理,就只有这个jquery不知如何合并。

  35. Jinwen 回复此留言 2008/12/23 09:05 #comment-3841

    @life97: 就是直接把JQuery和基本的JS代码复制到同一文则可。

  36. life97 回复此留言 2008/12/23 18:26 #comment-3854

    @Jinwen: includes文件夹的那个JS文件合并在一个文件里,问题是原来的不知在哪删除。

  37. 喵小可 回复此留言 2008/12/24 05:35 #comment-3860

    这样会不会拖慢网页打开的速度呢?


The trackbacks and pingpacks: