使用PHP+AJAX让WordPress动态加载文章的教程
为什么要动态加载文章?
1.快速向访客展示页面
文章很容是包含大量文字和多媒体资源(如:图片,视频,音乐),加载这些内容需要占用很多的时间.如果你的页面上存在大量文章,当访客发现页面久久没有加载完成就感到不耐烦.这是动态加载文章的主要目的.
2.让文章列表化
使页面上的文章成为一个列表,减少页面的空间占用,访客可以方便的移动到页面下方,提高旧文章被点击的几率.并且你可以在页面上放置更多的文章而不用担心页面过长.
为什么不动态加载文章?
1.对搜索引擎不友好
搜索引擎优化的目的是将有价值的东西尽量多的向搜索爬虫展示,包括最新的文章内容.只有标题的文章让爬虫只知道这个文章而不知其文章侧重,使用JavaScript输出的文章内容未必可以被抓取和分析.这些对SEO来说都是不好的.
后来发现,如果你的网站有固定的文章类型,没有毕业在文章列表页显示太多文章内容,表示影响不大.
2.增加了请求次数
虽然将文章折叠起来,我们一般还是会想办法向访客显示前面的几篇文章.这样对用户是友好的,但是要增加请求的次数和数据库访问的次数.
后来我有选择地显示部分文章内容,而且不是通过异步加载的方式,也就是说,这个问题是可以通过简单的修改解决掉的.
3.一些插件失效
因为需要自定义方法抓取文章,如果不添加特殊处理,很可能令部分WordPress插件失效.
可以通过特殊处理解决掉,以后文章中会提及.
动态加载文章的设计思路
1.找到页面上所有文章
为每个文章添加一个展开/折叠按钮
2.向文章添加展开/折叠按钮
点击按钮,如果文章内容没有加载,加载并展开文章内容.
点击按钮,如果文章内容已经加载,则展开/折叠文章内容.
3.加载文章内容
将文章的id发往后台,在数据库中找到相应的文章内容并进行格式化,返回响应显示在页面上.
JavaScript处理代码分析
1.找到页面上所有文章
/在文档加载完毕的时候遍历所有匹配文章的元素
jQuery(document).ready(function(){
jQuery('div.post').each(function(){
//如果元素相应位置是文章ID
varid=jQuery(this).attr('id');
if(/^post\-[0-9]+$/.test(id)){
//则为每个文章添加一个展开/折叠按钮
...
}
});
});
2.向文章添加展开/折叠按钮
toggle.toggle(function(){//展开
//如果文章内容为空,加载文章内容
if(jQuery('#'+id+'.content').text()==''){
...
}
//显示文章内容,并切换按钮样式
jQuery('#'+id+'.content').slideDown();
jQuery(this).removeClass('collapse').addClass('expand');
},
function(){//折叠
//隐藏文章内容,并切换按钮样式
jQuery('#'+id+'.content').slideUp();
jQuery(this).removeClass('expand').addClass('collapse');
//将按钮追加到文章标题前方
}).prependTo(jQuery('#'+id+'h2'));
3.加载文章内容
//取得文章ID
varpostId=id.slice(5);
//使用AJAX获取并处理文章内容
jQuery.ajax({
type:'GET'
,url:'?action=load_post&id='+postId
,cache:false
,dataType:'html'
,contentType:'application/json;charset=utf-8'
//取得返回内容之前显示加载信息
,beforeSend:function(data){loadPostContent(id,'<pclass="ajax-loader">Loading...</p>');}
//获取文章内容成功,更新文章内容
,success:function(data){loadPostContent(id,data);}
//获取文章内容失败,显示出错提示
,error:function(data){loadPostContent(id,'<p>Oops,failedtoloaddata.</p>');}
});
后台处理
处理思路
从前台传到后台的参数有两个,一个是actionID,用于确定使用的接口,另一个是文章的ID,用于获取文章对应的内容.
下面我们来分析一下wp-includes/post-template.php的get_the_content方法.
functionget_the_content($more_link_text=null,$stripteaser=0){
global$id,$post,$more,$page,$pages,$multipage,$preview;
//设定"查看全文"的链接文案
if(null===$more_link_text)
$more_link_text=__('(more...)');
//返回内容
$output='';
//More标签是否存在的标记位
$hasTeaser=false;
//如果文章要求输入密码,并且在Cookie中找不到处理过的信息,则返回要求输入密码的查看表单
if(post_password_required($post)){
$output=get_the_password_form();
return$output;
}
//请求的文章片段对应的页面大于最大页数(即文章片段不存在),则返回最大页码的文章片段
if($page>count($pages))
$page=count($pages);
//文章内容是最后分页中的文章片段
$content=$pages[$page-1];
//如果文中有More标签,要求切断文章并输出"查看全文"链接,则重定义文章内容,标记More标签存在
if(preg_match('/<!--more(.*?)?-->/',$content,$matches)){
$content=explode($matches[0],$content,2);
if(!empty($matches[1])&&!empty($more_link_text))
$more_link_text=strip_tags(wp_kses_no_null(trim($matches[1])));
$hasTeaser=true;
}else{
$content=array($content);
}
//如果进行了文章切断处理,且不存在分页要求,
if((false!==strpos($post->post_content,'<!--noteaser-->')&&((!$multipage)||($page==1))))
$stripteaser=1;
//获取文章内容的第一部分;如果在独立文章存在Readmore和切断处理,则文章内容为空
$teaser=$content[0];
if(($more)&&($stripteaser)&&($hasTeaser))
$teaser='';
$output.=$teaser;
//如果文章分为多个片段,在独立文章中拼接上第二部分,摘要内容中显示"阅读全文"链接
if(count($content)>1){
if($more){
$output.='<spanid="more-'.$id.'"></span>'.$content[1];
}else{
if(!empty($more_link_text))
$output.=apply_filters('the_content_more_link','<ahref="'.get_permalink()."#more-$id\"class=\"more-link\">$more_link_text</a>",$more_link_text);
$output=force_balance_tags($output);
}
}
if($preview)//previewfixforjavascriptbugwithforeignlanguages
$output=preg_replace_callback('/\%u([0-9A-F]{4})/',create_function('$match','return"&#".base_convert($match[1],16,10).";";'),$output);
//返回文章内容
return$preview;
}
你完全可以这样想:只要满足一些传入的参数,去除一些不必要的,更换一些可取代的,将页面返回改成输出,就是一个输出文章内容的接口.
处理方法
如果我们暂时不考虑输入密码,分页等功能;另外,因为More和切断功能不应该在展开文章内容中存在,响应处理可以变得很简单.我们要做的事就这么几个:
1.做出action对应的接口
2.获取指定文章的内容
3.格式化文章内容
4.返回文章内容
多说无用,直接上代码,加注释:
functionload_post(){
//如果actionID是load_post,并且传入的必须参数存在,则执行响应方法
if($_GET['action']=='load_post'&&$_GET['id']!=''){
$id=$_GET["id"];
$output='';
//获取文章对象
global$wpdb,$post;
$post=$wpdb->get_row($wpdb->prepare("SELECT*FROM$wpdb->postsWHEREID=%dLIMIT1",$id));
//如果指定ID的文章存在,则对他进行格式化
if($post){
$content=$post->post_content;
$output=balanceTags($content);
$output=wpautop($output);
}
//打印文章内容并中断后面的处理
echo$output;
die();
}
}
//将接口加到init中
add_action('init','load_post');