jQuery+Ajax在wordpress中的应用（二）

接上文：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 插件应该足够齐全了。

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

2010年05月12日最后修订在 06月 15th, 2010. 标签: ,, 分类: 折腾WP
« 以前的日志 :
: 以后的日志 »
  1. #1 阿邙童鞋 坐在沙发上说:
    10 05-12 16:43 回复 引用

    好东西啊 ,收藏之..

  2. #2 万戈童鞋 坐在小板凳上说:
    10 05-12 21:30 回复 引用

    ajax，很神圣的东西，我还没研究过，先收藏起来

  3. #3 hiro童鞋 坐在地板上说:
    10 05-12 22:22 回复 引用

    看到推荐我了，最近在为Hiro技术站做新的主题AjaxCMS，理想实现全站Ajax交互！！

  4. #4 樊文生童鞋说:
    10 05-12 23:26 回复 引用

    JQuery真的很强大~~~

  5. #5 xiao3童鞋说:
    10 05-14 23:45 回复 引用

    恩~我也想弄那个全站Ajax

  6. #6 晴天童鞋说:
    10 05-19 10:57 回复 引用

    这些东西很有意思啊，我很希望能把我的网站也弄个全站AJAX

  7. #7 willin童鞋说:
    10 05-19 21:25 回复 引用

    這邊應該整理最全的, 鼓掌~~

  8. #8 Fantasy童鞋说:
    10 06-08 11:58 回复 引用

    啊，围观，必须围观~

  9. #9 小奎童鞋说:
    10 08-10 13:38 回复 引用

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

    • B1 winy博主说:
      10 08-10 13:46 回复 引用

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

      • B2 小奎童鞋说:
        10 08-10 15:57 回复 引用

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

  10. #10 winy博主说:
    10 08-10 16:00 回复 引用

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

    • B1 小奎童鞋说:
      10 08-10 16:33 回复 引用

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

      • B2 winy博主说:
        10 08-10 16:35 回复 引用

        没有载入jQuery库

        • B3 小奎童鞋说:
          10 08-10 21:42 回复 引用

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

          • B4 winy博主说:
            10 08-10 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();
            }

        • B3 小奎童鞋说:
          10 08-10 22:24 回复 引用

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

发表评论

您输入了  0/1500  字