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

发布时间：2020-12-12 21:12:58 所属栏目：PHP教程来源：网络整理

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

为什么要动态加载文章?

1. 快速向访客展示页面

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

2. 让文章列表化

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

为什么不动态加载文章?

1. 对搜索引擎不友好

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

2. 增加了请求次数

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

3. 一些插件失效

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

动态加载文章的设计思路

1. 找到页面上所有文章

为每个文章添加一个展开/折叠按钮

2. 向文章添加展开/折叠按钮

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

3. 加载文章内容

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

JavaScript 处理代码分析

1. 找到页面上所有文章

2. 向文章添加展开/折叠按钮

3. 加载文章内容

');} // 获取文章内容成功,更新文章内容,success: function(data){loadPostContent(id,data);} // 获取文章内容失败,显示出错提示,error: function(data){loadPostContent(id,'

Oops,failed to load data.

');} });

后台处理处理思路

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

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

// 设定 "查看全文" 的链接文案
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('//',$content,$matches) ) {
$content = explode($matches[0],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,'') && ((!$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 . '">' . $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",$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. 返回文章内容

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

// 获取文章对象
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+AJAX让WordPress动态加载文章的教程

为什么要动态加载文章?

1. 快速向访客展示页面

2. 让文章列表化

为什么不动态加载文章?

1. 对搜索引擎不友好

2. 增加了请求次数

3. 一些插件失效

动态加载文章的设计思路

1. 找到页面上所有文章

2. 向文章添加展开/折叠按钮

3. 加载文章内容

JavaScript 处理代码分析

1. 找到页面上所有文章

3. 加载文章内容

后台处理 处理思路

处理方法

后台处理处理思路