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. yinheli Apr 8th, 2009 @ 17:59 | #51

    @bunorte
    是的.我写成插件就是傻瓜试的使用.我强烈不建议全站Ajax.只在必要的地方用用就好了.

  2. bunorte Apr 8th, 2009 @ 18:15 | #52

    @yinheli 能否帮忙看看为什么在IE6里点击后变成空白呢?在下实在JS技术有限,查不出上面愿意,只是alert(data)发现弹出的内容是正确的下一页的post内容。

  3. yinheli Apr 8th, 2009 @ 19:12 | #53

    @bunorte
    IE系列全部不行啊.比较诡异.你尝试去掉你加的特效试试

  4. Showfom Apr 9th, 2009 @ 10:28 | #54

    我要你的主题 555555555555555555555555

  5. zwwooooo Apr 9th, 2009 @ 11:58 | #55

    其实我一直没有折腾成功,加上最近DX不知在搞什么鬼,访问国外空间的网站非常慢,或许应该说根本无法浏览,也就放下了。我是完全按照文章里的步骤——当然折腾了很久才看明白,汗~ 虽然博主写代码很厉害,但说明写得就很令人汗颜……我发现不止这篇文章,呵呵

  6. Leewings Apr 11th, 2009 @ 20:55 | #56

    我用了这个插件和您的 Philna 主题, 首页能 ajax 分页, 但底下的 top 不能平滑移动了…… 冲突了??

  7. 19 Apr 16th, 2009 @ 18:27 | #57

    和我的全站AJAX的想法有些类似

  8. yinheli Apr 16th, 2009 @ 19:14 | #58

    @Leewings
    抱歉,你一直没有回复.你的jQuery类库加载太多次了吧.你看看.

    @19
    喔.大师光临,蓬荜生辉. :smile:

  9. Leewings Apr 16th, 2009 @ 19:22 | #59

    @yinheli
    我不懂的说….

  10. yinheli Apr 16th, 2009 @ 19:29 | #60

    @Leewings
    呃…那我怎么和你解释呢?

  11. Leewings Apr 16th, 2009 @ 19:35 | #61

    @yinheli
    我所用到的 jQuery 的地方也就这两点了….
    好吧, 其实无所谓吧..

  12. Gorden Nov 4th, 2009 @ 15:50 | #62

    一直在 loading
    用Firebug查看了一下 ajax 已经相应了,而且返回了第二页的内容,就是没有替换掉内容DIV的内容.
    找了很久还是没查出来. 汗… :shock:

  13. bibiyanki Dec 31st, 2009 @ 16:14 | #63

    hi friend, i try to install it, it’s very hard, i have pagenavi and the loading begin but not change my page…look

    http://ns10.freeheberg.com/~anton

    please help me i try to contact you but you don’t answer me

  14. yinheli Dec 31st, 2009 @ 16:59 | #64

    @bibiyanki
    I have stopped the development of this plug-in. Every WP theme has its own different characteristics of DOM, This plugin is too dependent on the theme which you are using. It is really hard to control. You may download my new theme PhilNa2 the last version. It contain this effect (ajax page) in that theme. You can obtain a copy of source code to me via e-mail, if you really want to how does that works and want to add more effect.

    Sorry for my english.

    Best wishes for a wonderful new year.

  15. underone Jan 28th, 2010 @ 22:06 | #65

    一个问题
    刚才试用插件,一直loading,估计是什么JS冲突,没仔细看,然后删掉插件…
    但是footr里还有根据wp_footer(); 输出的
    jQuery.post…这一行,这是为啥啊?

  16. yinheli Jan 29th, 2010 @ 13:37 | #66

    @underone
    应该不会吧. 这么严重.

    其实这个插件就是用了几行 Javascript 你看看然后基本可以集成到主题里面的. 但是不知道为什么一些 iis 主机不能使用. 貌似 iis 上需要设置什么才能用 Ajax. 我是小白. 没有研究过.

  17. underone Jan 29th, 2010 @ 15:46 | #67

    @yinheli
    我肯定不是iis主机,你看ermiao.com的页面里,下边输出JQ的那行是不是插件生成滴?
    但其实插件我都删了…

  18. yho Apr 7th, 2010 @ 15:30 | #68

    首先很喜欢你的这个主题,别人说会卡,但是我很喜欢,不打算换了,但是:sad: 用不来这个插件,因为对wp不怎么熟悉,配置不来,index内找不到get_header()等等,第三部也不大懂

  19. Sunrise May 22nd, 2010 @ 14:13 | #69

    我加载了能实现效果,但是翻页过去页面就显示不正常了,整个sidebar就不在了。不晓得咋回事啊?

  20. 卧龙腾飞 Jul 20th, 2010 @ 16:34 | #70

    不错…

  21. T Sep 1st, 2010 @ 15:23 | #71

    How do I remove the Ajax portion of the PhilNa2 theme? I would like to URL at the top to change during navigation.

  22. Fanr Sep 1st, 2010 @ 22:07 | #72

    这个强大啊!

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