为什么要静态加载文章?

1. 疾速向访客展现页面
文章很容是蕴含大量文字和多媒体资源 (如: 图片, 视频, 音乐), 加载这些内容需求占用很多的工夫. 假如你的页面上存在大量文章, 当访客发现页面久久没有加载实现就感到不耐心. 这是静态加载文章的次要目的.

2. 让文章列表化
使页面上的文章成为一个列表, 缩小页面的空间占用, 访客能够不便的挪动到页面下方, 进步旧文章被点击的几率. 并且你能够在页面上搁置更多的文章而不必担忧页面过长.

为什么不静态加载文章?

1. 对搜寻引擎不敌对
搜寻引擎优化的目的是将有价值的货色尽量多的向搜寻爬虫展现, 包括**的文章内容. 只有题目的文章让爬虫只晓得这个文章而不知其文章偏重, 应用 JavaScript 输入的文章内容未必能够被抓取和剖析. 这些对 SEO 来说都是不好的.
起初发现, 假如你的网站有固定的文章类型, 没有毕业在文章列表页显示太多文章内容, 示意影响不大.

2. 添加了申请次数
尽管将文章折叠起来, 咱们普通还是会想方法向访客显示后面的几篇文章. 这样对用户是敌对的, 然而要添加申请的次数和数据库拜访的次数.
起初我有抉择地显示局部文章内容, 而且不是经过异步加载的形式, 也就是说, 这个成绩是能够经过简略的修正处理掉的.

3. 一些插件生效
由于需求自定义办法抓取文章, 假如不增加非凡解决, 很可能令局部 WordPress 插件生效.
能够经过非凡解决处理掉, 当前文章中会提及.

静态加载文章的设计思绪

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

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

3. 加载文章内容
将文章的 id 发往后盾, 在数据库中找到相应的文章内容并进行格局化, 前往呼应显示在页面上.

JavaScript 解决代码剖析

1. 找到页面上一切文章

/ 在文档加载终了的时分遍历一切婚配文章的元素
jQuery(document).ready(function(){
 jQuery('p.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+AJAX让WordPress动态加载文章的教程》的一些看法。更多内容请查看本栏目更多内容！