使用PHP+AJAX让WordPress动态加载文章的教程


Posted in PHP onDecember 11, 2015

为什么要动态加载文章?

1. 快速向访客展示页面
文章很容是包含大量文字和多媒体资源 (如: 图片, 视频, 音乐), 加载这些内容需要占用很多的时间. 如果你的页面上存在大量文章, 当访客发现页面久久没有加载完成就感到不耐烦. 这是动态加载文章的主要目的.

2. 让文章列表化
使页面上的文章成为一个列表, 减少页面的空间占用, 访客可以方便的移动到页面下方, 提高旧文章被点击的几率. 并且你可以在页面上放置更多的文章而不用担心页面过长.

为什么不动态加载文章?

1. 对搜索引擎不友好
搜索引擎优化的目的是将有价值的东西尽量多的向搜索爬虫展示, 包括最新的文章内容. 只有标题的文章让爬虫只知道这个文章而不知其文章侧重, 使用 JavaScript 输出的文章内容未必可以被抓取和分析. 这些对 SEO 来说都是不好的.
后来发现, 如果你的网站有固定的文章类型, 没有毕业在文章列表页显示太多文章内容, 表示影响不大.

2. 增加了请求次数
虽然将文章折叠起来, 我们一般还是会想办法向访客显示前面的几篇文章. 这样对用户是友好的, 但是要增加请求的次数和数据库访问的次数.
后来我有选择地显示部分文章内容, 而且不是通过异步加载的方式, 也就是说, 这个问题是可以通过简单的修改解决掉的.

3. 一些插件失效
因为需要自定义方法抓取文章, 如果不添加特殊处理, 很可能令部分 WordPress 插件失效.
可以通过特殊处理解决掉, 以后文章中会提及.

动态加载文章的设计思路

1. 找到页面上所有文章
为每个文章添加一个展开/折叠按钮

2. 向文章添加展开/折叠按钮
点击按钮, 如果文章内容没有加载, 加载并展开文章内容.
点击按钮, 如果文章内容已经加载, 则展开/折叠文章内容.

3. 加载文章内容
将文章的 id 发往后台, 在数据库中找到相应的文章内容并进行格式化, 返回响应显示在页面上.

JavaScript 处理代码分析

1. 找到页面上所有文章

/ 在文档加载完毕的时候遍历所有匹配文章的元素
jQuery(document).ready(function(){
 jQuery('div.post').each(function() {
 // 如果元素相应位置是文章 ID
 var id = 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
var postId = 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, '<p class="ajax-loader">Loading...</p>');}
 // 获取文章内容成功, 更新文章内容
 ,success:   function(data){loadPostContent(id, data);}
 // 获取文章内容失败, 显示出错提示
 ,error:    function(data){loadPostContent(id, '<p>Oops, failed to load data.</p>');}
});

后台处理
处理思路

从前台传到后台的参数有两个, 一个是 action ID, 用于确定使用的接口, 另一个是文章的 ID, 用于获取文章对应的内容.

下面我们来分析一下wp-includes/post-template.php 的 get_the_content 方法.

function get_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;
 
 // 获取文章内容的第一部分; 如果在独立文章存在 Read more 和切断处理, 则文章内容为空
 $teaser = $content[0];
 if ( ($more) && ($stripteaser) && ($hasTeaser) )
 $teaser = '';
 $output .= $teaser;
 
 // 如果文章分为多个片段, 在独立文章中拼接上第二部分, 摘要内容中显示 "阅读全文" 链接
 if ( count($content) > 1 ) {
 if ( $more ) {
  $output .= '<span id="more-' . $id . '"></span>' . $content[1];
 } else {
  if ( ! empty($more_link_text) )
  $output .= apply_filters( 'the_content_more_link', ' <a href="' . get_permalink() . "#more-$id\" class=\"more-link\">$more_link_text</a>", $more_link_text );
  $output = force_balance_tags($output);
 }
 
 }
 
 if ( $preview ) // preview fix for javascript bug with foreign languages
 $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. 返回文章内容

多说无用, 直接上代码, 加注释:

function load_post() {
 // 如果 action ID 是 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->posts WHERE ID = %d LIMIT 1", $id));
 
 // 如果指定 ID 的文章存在, 则对他进行格式化
 if($post) {
  $content = $post->post_content;
  $output = balanceTags($content);
  $output = wpautop($output);
 }
 
 // 打印文章内容并中断后面的处理
 echo $output;
 die();
 }
}
// 将接口加到 init 中
add_action('init', 'load_post');
PHP 相关文章推荐
php将数据库中的电话号码读取出来并生成图片
Aug 31 PHP
php学习笔记 面向对象中[接口]与[多态性]的应用
Jun 16 PHP
用php简单实现加减乘除计算器
Jan 06 PHP
CI框架中集成CKEditor编辑器的教程
Jun 09 PHP
php从数组中随机选择若干不重复元素的方法
Mar 14 PHP
php简单实现无限分类树形列表的方法
Mar 27 PHP
php实现在限定区域里自动调整字体大小的类实例
Apr 02 PHP
PHP中Array相关函数简介
Jul 03 PHP
php基于dom实现的图书xml格式数据示例
Feb 03 PHP
详谈php中 strtr 和 str_replace 的效率问题
May 14 PHP
php实现留言板功能(会话控制)
May 23 PHP
PHP实现两种排课方式
Jun 26 PHP
WordPress中制作导航菜单的PHP核心方法讲解
Dec 11 #PHP
搭建Vim为自定义的PHP开发工具的一些技巧
Dec 11 #PHP
PHP开发中AJAX技术的简单应用
Dec 11 #PHP
基于PHP如何把汉字转化为拼音
Dec 11 #PHP
PHP异常处理Exception类
Dec 11 #PHP
编写PHP脚本来实现WordPress中评论分页的功能
Dec 10 #PHP
PHP读取PPT文件的方法
Dec 10 #PHP
You might like
实现分十页分向前十页向后十页的处理
2006/10/09 PHP
PHP删除非空目录的函数代码小结
2013/02/28 PHP
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
JavaScript中的this机制
2016/01/30 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
Python2与Python3的区别实例总结
2019/04/17 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
盛大二次面试题
2016/11/18 面试题
测试时代收集的软件测试面试题
2013/09/25 面试题
霸气押韵的班级口号
2014/06/09 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
html+css实现文字折叠特效实例
2021/06/02 HTML / CSS
Python如何使用循环结构和分支结构
2022/04/13 Python