jQuery+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');