源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-05-09 18:48 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:使用PHP+AJAX让WordPress动态加载文章的教程
[b]为什么要动态加载文章?[/b] [b]1. 快速向访客展示页面 [/b]文章很容是包含大量文字和多媒体资源 (如: 图片, 视频, 音乐), 加载这些内容需要占用很多的时间. 如果你的页面上存在大量文章, 当访客发现页面久久没有加载完成就感到不耐烦. 这是动态加载文章的主要目的. [b]2. 让文章列表化 [/b]使页面上的文章成为一个列表, 减少页面的空间占用, 访客可以方便的移动到页面下方, 提高旧文章被点击的几率. 并且你可以在页面上放置更多的文章而不用担心页面过长. [b]为什么不动态加载文章?[/b] [b]1. 对搜索引擎不友好 [/b]搜索引擎优化的目的是将有价值的东西尽量多的向搜索爬虫展示, 包括最新的文章内容. 只有标题的文章让爬虫只知道这个文章而不知其文章侧重, 使用 JavaScript 输出的文章内容未必可以被抓取和分析. 这些对 SEO 来说都是不好的. 后来发现, 如果你的网站有固定的文章类型, 没有毕业在文章列表页显示太多文章内容, 表示影响不大. [b]2. 增加了请求次数 [/b]虽然将文章折叠起来, 我们一般还是会想办法向访客显示前面的几篇文章. 这样对用户是友好的, 但是要增加请求的次数和数据库访问的次数. 后来我有选择地显示部分文章内容, 而且不是通过异步加载的方式, 也就是说, 这个问题是可以通过简单的修改解决掉的. [b]3. 一些插件失效 [/b]因为需要自定义方法抓取文章, 如果不添加特殊处理, 很可能令部分 WordPress 插件失效. 可以通过特殊处理解决掉, 以后文章中会提及. [b]动态加载文章的设计思路[/b] [b]1. 找到页面上所有文章 [/b]为每个文章添加一个展开/折叠按钮 [b]2. 向文章添加展开/折叠按钮 [/b]点击按钮, 如果文章内容没有加载, 加载并展开文章内容. 点击按钮, 如果文章内容已经加载, 则展开/折叠文章内容. [b]3. 加载文章内容 [/b]将文章的 id 发往后台, 在数据库中找到相应的文章内容并进行格式化, 返回响应显示在页面上. [b]JavaScript 处理代码分析[/b] [b]1. 找到页面上所有文章 [/b]
/ 在文档加载完毕的时候遍历所有匹配文章的元素
jQuery(document).ready(function(){
 jQuery('div.post').each(function() {
 // 如果元素相应位置是文章 ID
 var id = jQuery(this).attr('id');
 if(/^post\-[0-9]+$/.test(id)) {
  // 则为每个文章添加一个展开/折叠按钮
  ...
 }
 });
});

[b]2. 向文章添加展开/折叠按钮[/b]
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'));
[b]3. 加载文章内容[/b]
// 取得文章 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>');}
});

[b]后台处理 处理思路[/b] 从前台传到后台的参数有两个, 一个是 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;
}

你完全可以这样想: 只要满足一些传入的参数, 去除一些不必要的, 更换一些可取代的, 将页面返回改成输出, 就是一个输出文章内容的接口.
[b]处理方法[/b] 如果我们暂时不考虑输入密码, 分页等功能; 另外, 因为 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');

  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部