Home > Technology, WordPress > 我做的插件: Ajax home page

我做的插件: Ajax home page

这是我写的第一个WordPress插件.用于实现WordPress首页分页部分的Ajax分页效果.具体是什么效果呢?你可以点击我的分页看看.

使用这个插件的好处,用一句话来总结就是提高用户体验.下面我具体解释一下,它是如何提高体验的….

  • 使用了基于jQuery的Ajax技术,页面局部刷新,效果很酷…(这个插件本身加上css载入也就是几kB的大小.不会拖慢你的博客,前提是你已经载入过jQuery的框架.)
  • 因为只是请求了页面部分区域的更新,一次客户端载入的数据更少,当然感觉速度更快.
  • 还因为载入的数据量少了,当然就为你节省了带宽.也许对服务器的负担也能稍稍缓解.(这个是理论上的解释).

这个插件本来是要和mg12合作开发的.因为我之前不知道要如何实现这个效果,后来明白了,并整合到了目前的主题,mg12就提议我写个插件,我的技术有限,他就提出合作,但是他这两天忙.我又闲着,就参考插件的写法,自己写了.

原来写个插件也不难.就是语言翻译方面我比较费劲.因为我的英语比较烂.如果你使用英文版,可能感觉我的语句比较奇怪…见谅了.

这个插件还没有发布到wordpress的官方,我已经申请了,但是….还是因为语言水平的问题.我不知道能不能通过去.所以我先把它放在的Google code上面.

安装方法,
1,解压上传到你博客的插件目录.到后台激活.
2,修改你的主题index.php文件.
   在 之前”get_header()” ,”get_footer()”.插入 ” if($_POST['action'] != ‘ajax_page’)” .如果你的存在 “get_sidebar()” 也做同样的处理.
   请确保你的内容(文章列表)的父级ID包含了分页导航,如果不是,你需要修改…(这个就是说你的首页文章列表和分页导航,因该一个DIV里面.这要Ajax返回的数据才方便插入.)
3,到后台去设置.保存.具体情况请看后台,我写了相应的说明.

这个是临时的下载的地址,如果可以通过WordPress官方的审核,我将修改这个地址.

PS.
Leeiio同学想知道我的404页面的Ajax是如何实现的.我会尽快写出教程.包括我修改mg12的评论分页插件为jQuery方式实现Ajax.还有javasctipt代码重载的方法.请大家先别着急.这些好东东我一定会和大家分享的.

  1. 蜡果 Mar 31st, 2009 @ 09:17 | #26

    你的FEED代码可否分享一下哈。

  2. yinheli Mar 31st, 2009 @ 09:22 | #27

    @蜡果
    是自己写的函数.我发布了一个主题.里面有代码 Feed的代码也有.
    另外你可以看看给feed输出内容添加些’个性’这篇文章

  3. 浮黑 Mar 31st, 2009 @ 12:49 | #28

    效果很炫,加油加油。

  4. Betty Apr 1st, 2009 @ 11:28 | #29

    分页部分是指哪儿?Home, Archives, Links 那些吗?我点了你这里的还是整页刷新,没发现有ajax效果啊…
    btw: 你这里的区块角上都有斜线,会让人以为是可以拖动的,然而事实上又不能拖动,让人困扰…

  5. Wang Chengxi Apr 1st, 2009 @ 11:29 | #30

    东西挺好,但,为啥老大不处理好细节呢?也许懂WP的一看就明白,但不懂的恐怕根本搞不来。老大写的说明文档实在不敢恭维
    1、我是看了这篇文章后面的评论才搞明白在哪里加if($_POST['action'] != ‘ajax_page’),对菜鸟有点难度,建议写个例子,一看就明白。
    2、“在 之前”get_header()” ,”get_footer()”.插入 ” if($_POST['action'] != ‘ajax_page’)” ”这句话也有语病
    3、另外,后台:Setp 3. 请去报你的内容(文章列表)的父级ID包含了分页导航,如果不是,你需要修改…应该是“确保”吧

  6. yinheli Apr 1st, 2009 @ 11:45 | #31

    @浮黑
    我们好久都没有串门了.

    @Betty
    汗颜的是,那是个背景. :mad: 我所说的分页,不是页面链接.是页底的123等.要在插件只能在首页生效.其实各个分类里面的分页等也是能实现的.我改天在去弄.

    @Wang Chengxi
    有些翻译还没有做好,抱歉了.看来你已经理解我的东东了.哈哈. :razz:

  7. zwwooooo Apr 2nd, 2009 @ 16:43 | #32

    折腾了一下,没搞定 :mad:

  8. gowers Apr 3rd, 2009 @ 09:37 | #33

    我安装上了,不过老用不了,老在loading,请代为看看,谢谢~地址为http://www.gowers.cn/twitters

  9. yinheli Apr 3rd, 2009 @ 09:41 | #34

    @gowers
    :mad: 这个不是是用于那个插件了.而是指的wordpress的翻页.不是那个插件的翻页.我汗颜了.

    @zwwooooo
    你可以参考我的.

  10. Leeiio Apr 3rd, 2009 @ 11:00 | #35

    我的IE下居然没用,哎,调试调试~

  11. gowers Apr 3rd, 2009 @ 11:48 | #36

    @yinheli 再咨询个问题,我修改了插件中的is_home为is_archive,准备在存档页使用。但按照要求修改页面后,使用不生效,还是在loading那边 :?: 。http://www.gowers.cn/blog/category/zaza

  12. zwwooooo Apr 3rd, 2009 @ 16:34 | #37

    现在出差,回来再折腾,呵呵。不过我希望安装说明能写详细一点 :razz:

  13. lansh Apr 4th, 2009 @ 09:40 | #38

    ajax的体验就是强。 博主的相册是什么程序 可否分享? :cool:

  14. lansh Apr 4th, 2009 @ 11:03 | #39

    我用的是MG12的inove ID我找不出来。
    请指点。。它index.php里面就三个ID:“notice” “pagenavi” 还有就是 id=”post-”

    请问是都测试过 不行。。。请博主指点!

  15. yinheli Apr 4th, 2009 @ 13:34 | #40

    @lansh
    Twitter上说了

  16. X先生 Apr 6th, 2009 @ 10:48 | #41

    折腾了半天,还是不明白

  17. yinheli Apr 6th, 2009 @ 14:59 | #42

    @X先生
    我写了说明.有什么看不懂的呢?

  18. 大脚 Apr 6th, 2009 @ 18:23 | #43

    效果很酷,我也去试试先!

  19. bunorte Apr 7th, 2009 @ 18:01 | #44

    非常酷的插件,我修改了一下JS,使用fade效果,已经应用在自己blog上。但是有一个问题,点击了分页数之后,地址栏还是首页的地址,能不能变成分页的地址呢?比如www.xxx.com/page/2/这种形式的。另外这个插件可以用在其他页面吗?比如分类页导航,搜索结果页导航?

  20. X先生 Apr 8th, 2009 @ 01:57 | #45

    @yinheli
    代码都写错— —+囧 :neutral:
    应该是在get_header()和get_footer()之前插入

    如果存在get_sidebar()也做相同的处理,发现你编码的水平不错,为什么文章都写错!囧,有很多病句耶

  21. X先生 Apr 8th, 2009 @ 01:58 | #46

    怎么不能显示??

    
    
  22. 大排 Apr 8th, 2009 @ 14:52 | #47

    网站打开的体验不错,没有让人特别等待的感觉,您都用了哪些插件能分享下么

  23. yinheli Apr 8th, 2009 @ 16:21 | #48

    @大排
    关于我曾经写过一篇文章介绍过.现在几乎没有什么变动.其他的功能是我直接写到主题里面了.

  24. yinheli Apr 8th, 2009 @ 16:30 | #49

    @bunorte
    Ajax是异步传输.没有刷新页面.不能做到更改地址栏.这个插件可以用于其他地方.如果你理解了他的工作原因.它可以让你整站实现Ajax

  25. bunorte Apr 8th, 2009 @ 17:57 | #50

    @yinheli 了解了一点。但是昨天我尝试改JS,在Firefox里面很正常,但是在IE里面就是有问题,点击之后隐藏了,然后content区域就变成空白,调了一下发现载入成功,data也是正确的,就是不插入到#content里面,不知道什么原因,只好暂时删除了js。另外说一下,可以只用js来实现这个 功能,不要这个插件,对吧?

Submitting Comment, Give me a second...
Comment pages 1 2 3

Leave a comment

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">
Trackbacks & Pingbacks ( 1 )
  1. May 12th, 2010 @ 02:02 | #1
    Pingback: jQuery+Ajax在wordpress中的应用(一) – 电脑网络 – ajax – jQuery – WordPress – Winy Sky