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

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

这是一篇分享的文章，很多方法都是在网上收集而来的。Ajax主要是用来提高用户体验，我最开始折腾其实只为了更快的载入站点，毕竟国外虚拟主机速度慢。不过，好的主机才是提速的关键。以下部分是自己折腾wordpress过程中学习和用过的的一些jQuery+Ajax技巧，整理一下收录在这里。

事先声明，使用以下方法需要一定的php和jQuery基础，如果有一颗不怕麻烦，爱好折腾的心也是可以的（比如我，自我满足下）。当然，必须的jQuery库是应该提前加载的，可以用google托管的，也可以放自己站点上。

（一）使用最多的Ajax评论
首先，你可以使用插件，以“Ajax comment”为关键词在官方插件目录里查找就有。我这里介绍两种非插件实现的方法：
1. wilin大师的《WordPress 內置嵌套評論專用 Ajax comments》这个提供了详细的教程，在wordpress博主中也是用的最多的，使用方法简单，另外可以配上《Ajax comments 評論回應郵件通知》一起使用。
网上还有类似的代码，实现的方法基本上是利用JQuery的ajax过程提交，修改根目录下的“wp-comments-post.php”文件，将类似“wp_die”替换为自定义的响应函数，实现无刷新评论。
2. JQuery Form插件
这个直接就是用jQuery插件超级简单实现WordPress的ajax留言，无需另外在写一个ajax comment.php文件。（题外话，这个js压缩了10kb左右）
jQueryForm：http://www.malsup.com/jquery/form/
简单的例子，首先html部分是wp默认的留言表单，下面加入以下js：

$('#commentform #submit').click(function() {
   $('#commentform').ajaxForm(function() {
   	success: function(result) {
    alert("Thank you for your comment!");
	},
	error : function(result) {
	alert(result.responseText);
	}
    });
}

这个插件可以截获wordpress表单提交后的相应，SUBMIT的时候便会根据你FORM中的ACTION和METHOD来自动完成AJAX的操作，SUCCESS是提交成功后要做的，ERROR则 是发生错误返回的错误页面，result.responseText得到错误信息（WP中的WP_DIE()）。当然，你还需要在html中加入合适的部分，例如commentform提交时显示一个DIV提示“等待”或者“留言成功”以及“提交错误”，留言成功后便会在适当位 置把留言的内容输出出来。这里有ll19提供的《jQuery简单实现WordPress的Ajax留言 》教程，已经很详细了，有兴趣的可以去看看。

另外，wilin大师的还有一个单一文件（js）的 Ajax comments，beta 版的 mini-ajax-comm.js 。遗憾就是使用 jQ 1.3 新的 live 语法, IE 下不能使用。

（二）Ajax分页导航

实现Wordpress首页分页部分的Ajax分页效果，本站也用了这个效果。简单说来就是点击下一页时只请求了页面部分区域的更新,一次客户端载入的数据更少，来源于yinheli的《我做的插件: Ajax home page》。其实，说是插件，也不是那么简单的，不折腾是很难成功滴。作者代码写的不错，就是教程对初学者很难看懂。我在这里干脆提取出来，直接集成到主题里，简单注释一下：

首先，载入以下js：

$(document).ready(function() {
home_page_ajax();//下面定义的函数
home_js();//这里是以前首页需要加载的js，放一起做个函数
});
function home_page_ajax(){
$(".wp-pagenavi a").click(function(){//默认你用了wp-pagenavi插件，其它自己修改
    var paurl;
 paurl=$(this).attr('href');
 $.ajax({
 url:paurl,
 data:"action=ajax_page",
 dataType:'html',
 type: 'POST',
 beforeSend: function(){
 var loading='<span id="aploading">Loading</span>';
 document.body.style.cursor = 'wait';
 $("#navigation").html(loading);//注意修改导航id
 var C=0.7;
//$('#ajax').css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:'alpha(opacity=' + C * 100 + ')'});//IE下透明会很难看，自己可以试试
},
 error: function(request) {
 //alert(request.responseText);
alert('Error,I\'m sorry.you have to click the refresh button!');
},
success:function(data){
 $("#ajax").html(data);//#ajax是内容部分父元素的id，注意修改，重要！
var C=1;
//$("#ajax").css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:'alpha(opacity=' + C * 100 + ')'});//IE下透明会很难看，自己可以试试
document.body.style.cursor = 'auto';
home_page_ajax();//重新写上锚点
home_js();//js的重载，注意
$("#return_top").click();//返回顶部，自己修改

}
 });
 //run other js function;
 return false;
 });
}

然后，关键是还要修改主题：“确保你的内容(文章列表)的父级ID包含了分页导航,如果不是,你需要修改…(这个就是说你的首页文章列表和分页导航,因该一个DIV里面.这要Ajax 返回的数据才方便插入.)”好吧，引号内是原作者的话，这样估计很多新手看不懂。

第一步：在主题header.php最后加上"<div id="ajax">"在sidebar.php(或者footer，取决于主题加载顺序）顶部加上"</div>"，这样把需要ajax加载的部分包括起来。（注意，其它页面也许不需要ajax效果，这个多余的div自己想办法解决）

第二步：确认主题Index.php有如下结构：

< ? php if($_POST['action'] !='ajax_page')get_header();?>;//截获ajax传入参数
...//原index内容部分
...//原index分页部分
< ? php if($_POST['action'] !='ajax_page')  {get_sidebar();get_footer(); }?>//截获ajax传入参数

最后，css部分就自己改好了，也就是一个ajax过程分页导航动画效果。

可以看出思路还是挺简单的。以上要注意的就是注释部分，元素id还有javascript的重载，避免ajax后原来的锚点丢失（页面特效没了）。另外，"if($_POST['action']"可能会在某些php版本上notice，问题不大，function.php中加入“error_reporting(E_ALL & ~E_NOTICE );”忽略即可。

(三）Ajax首页动态显示效果（仿Mg12）

你可以看到著名的inove主题作者mg12新首页，前三篇文章输出全文，后面只显示标题，点击右侧三角才会动态载入内容。这个可以减小首页大小，尤其是视屏和图片比较多的站点，也是提高访客体验的一直。（当然，坏处也是明显的，对SEO可能有影响，mg12也提到了一种“欺骗”搜索引擎的方法来避免）

可以参加mg12的《动态加载文章内容》一文（不完全的教程），或者使用inove的同学可以看这个《如何对WP实现动态加载文章内容》（更加详细），基本上按照教程就可以了，在这里我只简单说一下自己的理解：

基本思路是不输出内容（去掉），点击后通过js输出。但我觉得不必要全部用js输出，对seo不好。以前是这样的：

var PRE_LOAD = 2;//定义展开几篇文章
(function(){jQuery(document).ready(function(){
jQuery('div.post').each(function(){
var id=jQuery(this).attr('id');
if(/^post\-[0-9]+$/.test(id)){
var toggle=jQuery('');
toggle.toggle(function(){if(jQuery('#'+id+' .content').text()==''){loadPost(id)}
jQuery('#'+id+' .content').slideDown();jQuery(this).removeClass('collapse').addClass('expand')},function(){jQuery('#'+id+' .content').slideUp();
jQuery(this).removeClass('expand').addClass('collapse')}).prependTo(jQuery('#'+id+' h1'))}});
if(PRE_LOAD>0){jQuery('div.post a.toggle').each(function(index){if(indexLoading...')},
success:function(data){loadPostContent(id,data)},
error:function(data){loadPostContent(id,'Oops, failed to load data. [Reload]')}})}
function loadPostContent(id,data){jQuery('#'+id+' .content').html(data)}window['POS']={};window['POS']['loadPost']=loadPost})();

上面的例子里用了PRE_LOAD这个变量来定义开始展开几篇文章，但这样是等页面载入后再加载的，我的办法是去掉PRE_LOAD参数，前三篇可以用php输出

例如：

< ? php if (have_posts()) : $count=1; while (have_posts()) : the_post(); ?>
...
< ? php if(is_bot()) : the_content(); ?>//is_bot是自定义的函数，如果是搜索引擎输出全文
< ? php elseif($count ==1 ||$count ==2||$count ==3) :the_excerpt(); ?>//前三篇输出摘要
< ? php endif;$count++;?>
...
< ? php endwhile; ?>< ? php endif; ?>

这样就不用像原来一样页面加载后才输出前三篇内容，另外，附上我修改的响应部分

<?php
/**
 * Winysky ajax index
 * @return unknown_type
 */
function Winy_post(){
 if( isset($_GET['action'])&& $_GET['action'] == 'load_post'){
 $ariticle_id=$_GET['id'];
 query_posts("p=$ariticle_id");
 the_post();
 the_excerpt();
 die();
 }else{
 return;
 }
}
add_action('init', 'Winy_post');

直接hook到init上，方便调用，不清楚效率怎么样。

另外前面说了，需要一个“欺骗SEO”的判断函数，即根据user_agent判断来路，如果是bot返回true，正常输出全文。这个判断函数网上有很多例子，就不再细说了。

太长了，还有一部分，分两篇写，：-），

下一篇:jQuery+Ajax在wordpress中的应用（二）