接上文:jQuery+Ajax在wordpress中的应用(二)

其实,copy代码并不难,能够理解学习对于业余爱好者已经不错,至于应用和创新那得下很多功夫学习基础。我也是停留在复制/粘贴的水平上,折腾折腾还是要考虑量力而行的。

(四)Ajax站点搜索和Ajax comment paper(这部分尚未搞明白,待补充)
除了使用google的Ajax站点搜索外,也可以在wordpress中实现Ajax实时搜索。
评论分页插件也是有现成的,当然它不依赖任何 JavaScript 框架。但我的既然用了JQuery框架,那也不要浪费了,可以改写用JQuery实现。
一些主题里已经内置了以上功能,如philna2里,这个我暂时没用上(因为小站来的人少,没需求,囧),所以还没来得及折腾,有兴趣去看看源码。

(五)wordpress全站ajax化(JQuery插件)
首先声明这样做完全不会影响SEO 。
当然,也有全站Ajax话的插件,不过我觉得了解一下原理有利于使用。
基本思路:利用jQuery来简单实现WordPress的全Ajax加载。做法是因为每次打开文章只需要SINGLE部分,打开首页面之类只需要INDEX部分,所以 HEADER,SIDEBAR,FOOT就加载一次就行了。ll9给出的方法是这里这里,另外,作者还解决了Ajax浏览器前进、后退历史的问题。额,还有一个JQuery插件,方便使用,可以去作者博客下载。使用方法:

jQuery("p.date a,li.tag_list a,p#pagination a").ajax_19("div#main_container");

这里的作用是将所有class是date的p元素、class是tag_list的li元素、id是pagination的p元素下的链接点击的时候得到这个链接的内容后显示在ID为main_container的div里,而不会去打开此链接。这样既不影响SEO又实现了AJAX。

(六)Ajax随机一句话功能(demo参加yinheli的主题,右上角)

代码是借鉴的wordpress自带的一个插件Hello Dolly.它能在后台随机显示一句话.但是不支持Ajax.我们要做的是把他弄到前台显示.并实现Ajax刷新的效果。教程《Ajax之jQuery》,我的上一个主题,以及现在这个主题左侧栏部分就是这个。当然,为了SEO,你可以把它改用js输出。

(七)Ajax调用音乐播放器

想来大家也很讨厌在博客里突然响起的音乐,毕竟个人口味不一样嘛。如果站长想要是加入播放器,是可以不让其自动播放,但多载入一个没有用处的flash也会拖慢站点速度。这样的情况可以用Ajax载入,访客点击的时候才载入播放器。一个示例如下:

$(".music_open").click(function() {//点击元素的id或class
jQuery.ajax({
   url: "http://pic.winysky.com/content/themes/winy/music.php",//url music.php包含播放器代码,如flash
   data:"url=http://pic.winysky.com/content/themes/winy/",
   dataType:"html",
   type:"post",
   success: function(msg){
   jQuery("#music").html(msg);//事先在html中准备的空div的id,插入位置
       $(".music_open").css('display','none');//按钮样式
    $(".music_close").css('display','inline');

   jQuery("#music").show();
   }
});
return;
});
$(".music_close").click(function() {//关闭播放器
     $(".music_close").hide();
    $(".music_open").show();
jQuery("#music").empty().hide();
return;
});
}); //end

(八)其它待折腾的。。。

ihiro:Ajax加载历史文章列表:Ajax加载相关最新10条文章记录,分类Ajax 加载相关最新10条文章记录,标签Ajax加载相关最新10条文章记录,效果见其博客。虽然没给出方法,但实现起来并不难,有时间再试试吧。

可以看出,这一大类jQuery+Ajax基本思路都是差不多的,wordpress也提供了一个很好的平台。很多hook函数,虽然降低了效率,但方便调用。

写在最后:如果不愿意自己折腾,看看水煮鱼写的30多个 AJAX 驱动的 WordPress 插件应该足够齐全了。

我是比较喜欢折腾的过程,各位朋友有同好的可以和我交流。

  1. Fantasy (2010.06.08 at 11:58) 9楼

    啊,围观,必须围观~

  2. 小奎 (2010.08.10 at 13:38) 10楼

    好多ajax的教學唷 :shock:
    感謝大大分享=w=
    評論這的頭像顯示也是ajax的特效麻 :?:

    • winy() (2010.08.10 at 13:46)

      @小奎 算是吧,实时获取访客头像

    • 小奎 (2010.08.10 at 15:57)

      @winy 大大,我有個問題=w=
      Ajax調用音樂播放器
      那個music.php的代碼要有些什麼

  3. winy() (2010.08.10 at 16:00) 11楼

    music.php包含播放器代码,如flash代码,js啥的,基本就是原来播放器的代码

    • 小奎 (2010.08.10 at 16:33)

      @winy 大大,可以幫我看看哪裡有問題麻 :?:
      http://t225657.co.cc/test/test.php

    • winy() (2010.08.10 at 16:35)

      没有载入jQuery库

    • 小奎 (2010.08.10 at 21:42)

      @winy 加載了一樣杯具>< :!:

    • winy() (2010.08.10 at 22:00)

      @小奎 语法错误,最后一行多了});另外,我用的环境还不一样,method:post要改成get

      jQuery(document).ready(function($){
      $("#music_open").click(function() {//點擊元素的id或class
      jQuery.ajax({
      url: "http://t225657.co.cc/test/test.php",//url music.php包含播放器代碼,如flash

      dataType:"html",
      type:"get",
      success: function(msg){
      jQuery("#music").html(msg);//事先在html中準備的空div的id,插入位置
      $(".music_open").css('display','none');//按鈕樣式
      $(".music_close").css('display','inline');

      jQuery("#music").show();
      }

    • 小奎 (2010.08.10 at 22:24)

      @winy :mrgreen: 成功了 , 感謝大大=w=

    • winy() (2010.08.10 at 22:25)

      @小奎 关闭很简单的jQuery("#music").empty().hide();

  4. 落伍啦 (2011.01.20 at 19:27) 12楼

    看起来博主这个主题不错,有下载的么

  5. Willin Wang (2011.03.18 at 18:38) 13楼

    你这主题太漂亮了...

  6. Mr.猫灿 (2011.06.09 at 14:35) 14楼

    偶然看到,感觉很好啊~对ajax又重新认识了,也好想玩啊 :mrgreen:

评论分页: 1 2

发布评论

邮箱(必填)

换个背景