利用AJAX实现WordPress中的文章列表及评论的分页功能


Posted in Javascript onMay 17, 2016

文章列表页分页
一.加载 jQuery 库
既然是 jQuery 驱动的 Ajax ,加载 jQuery 库是必须的。

二.文章列表格式
在你的文章列表页面(首页 index.php、归档 archive.php )需要确保有以下类似的结构

<!-- 包含所有文章的容器 -->
<div id="content">
  <!-- 各文章的容器 -->
  <div class="post"></div>
  <div class="post"></div>
  <div class="post"></div>
  <div class="post"></div>
  <div class="post"></div>
</div>

三.加入默认导航
因为 Ajax 分页每次获取的是下一页的内容,因此只需调用 WordPress 的默认导航。在你的 index.php (或是其他文章列表页面)加入以下代码,生成默认的 WordPress 导航。

<div id="pagination"><?php next_posts_link(__('LOAD MORE')); ?></div>

四.Ajax 获取下一页
在你的主题 js 文件里加入以下代码

// 使用 live() 使 js 对通过 Ajax 获得的新内容仍有效
  $("#pagination a").live("click", function(){
    $(this).addClass("loading").text("LOADING...");
    $.ajax({
  type: "POST",
      url: $(this).attr("href") + "#content",
      success: function(data){
        result = $(data).find("#content .post");
        nextHref = $(data).find("#pagination a").attr("href");
        // 渐显新内容
        $("#content").append(result.fadeIn(300));
        $("#pagination a").removeClass("loading").text("LOAD MORE");
        if ( nextHref != undefined ) {
          $("#pagination a").attr("href", nextHref);
        } else {
        // 若没有链接,即为最后一页,则移除导航
          $("#pagination").remove();
        }
      }
    });
    return false;
  });

 

五.滚动触发翻页
如果想当鼠标滚动到接近页面底部时自动翻页,则可以把代码改成下面的样式

// 给浏览器窗口绑定 scroll 事件
$(window).bind("scroll",function(){
// 判断窗口的滚动条是否接近页面底部
if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) {
  $(this).addClass('loading').text('LOADING...');
  $.ajax({
    type: "POST",
    url: $(this).attr("href") + "#content",
    success: function(data){
      result = $(data).find("#content .post");
      nextHref = $(data).find("#pagination a").attr("href");
      // 渐显新内容
      $("#content").append(result.fadeIn(300));
      $("#pagination a").removeClass("loading").text("LOAD MORE");
      if ( nextHref != undefined ) {
        $("#pagination a").attr("href", nextHref);
      } else {
      // 若没有链接,即为最后一页,则移除导航
        $("#pagination").remove();
      }
    }
  });
}
});

 

六.添加导航 css
为导航添加一段 css 美化一下,另外还可以准备一张 gif 图来表示正在加载,下面是 Melody 的样式:

#pagination {padding: 20px 0 0 30px; }
#pagination .nextpostslink {width: 600px; color: #333; text-decoration: none; display: block; padding: 9px 0; text-align: center; font-size: 14px; }
#pagination .nextpostslink:hover {background-color: #cccccc; text-decoration: none; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
#pagination .loading {background: url("images/loading.gif") 240px 9px no-repeat; color: #555; }
#pagination .loading:hover {background-color: transparent; cursor: default; }

评论分页
一.准备
加载 jQuery 库,这个不解释了。

二.开启 WordPress 评论分页
打开 WordPress 后台 - 设置 - 讨论,在“其他评论设置”中勾选分页显示评论,设置一下评论数目,这里的评论数目仅计算主评论,回复评论不作计算。这里我填了比较大的数字(15),因为评论分页分得太细会使用户不便于阅读之前的评论。

在后台开启评论分页后,在 comments.php 中需要添加分页导航的地方加入以下代码(如主题中有类似代码则无须再添加,另外代码中的 nav 标签为 HTML5 标签,若主题没有使用 HTML5 则有 div 代替即可。)

<nav id="comments-navi">
  <?php paginate_comments_links('prev_text=?&next_text=?');?>
</nav>

三.评论分页的 SEO
从 SEO 的角度看,评论分页会造成重复内容(分页的内容正文都一样,并且 keywords 和 description 也相同),这样对于评论很多的博客很容易因为重复内容太多而降权,因此需要在 SEO 方面作出一些处理,最为方便有效的方法是使用 meta 标签。在你的 header.php 原有的 meta 标签下加入以下代码,这样分页的页面便会禁止被搜索引擎收录,防止内容重复。

<?php if( is_single() || is_page() ) {
  if( function_exists('get_query_var') ) {
    $cpage = intval(get_query_var('cpage'));
    $commentPage = intval(get_query_var('comment-page'));
  }
  if( !empty($cpage) || !empty($commentPage) ) {
    echo '<meta name="robots" content="noindex, nofollow" />';
    echo "\n";
  }
}
?>

 
四.Ajax 评论
根据上文所述,现在主题中已经有评论分页了,要做到 Ajax 的评论分页,只需 JavaScript 的配合,不过在这之前首先要在评论列表前加入一个元素,用于在显示新一页评论列表时表示列表正在加载。假设主题模板 comments.php 的评论模块结构如下:

<div class="comments">
  <h3 id="comments-list-title">Comments</h3>
  <!-- 显示正在加载新评论 -->
  <div id="loading-comments"><span>Loading...</span></div>
  <!-- 评论列表 -->
  <ol class="comment_list">    
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ol>
  <!-- 评论分页导航 -->
  <nav id="comments-navi">
    <a class="prev page-numbers" href="#">1</a>
    ...
  </nav>
</div>

在你的 js 文件中加入以下 js 代码实现评论分页

// 评论分页
$body=(window.opera)?(document.compatMode=="CSS1Compat"?$('html'):$('body')):$('html,body');
// 点击分页导航链接时触发分页
$('#comments-navi a').live('click', function(e){
  e.preventDefault();
  $.ajax({
    type: "GET",
    url: $(this).attr('href'),
    beforeSend: function(){
      $('#comments-navi').remove();
      $('.comment_list').remove();
      $('#loading-comments').slideDown();
      $body.animate({scrollTop: $('#comments-list-title').offset().top - 65}, 800 );
    },
    dataType: "html",
    success: function(out){
      result = $(out).find('.comment_list');
      nextlink = $(out).find('#comments-navi');
      $('#loading-comments').slideUp('fast');
      $('#loading-comments').after(result.fadeIn(500));
      $('.comment_list').after(nextlink);
    }
  });
});

加载条的 css (仅供参考)

#loading-comments {display: none; width: 100%; height: 45px; background: #a0d536; text-align: center; color: #fff; font-size: 22px; line-height: 45px; }
Javascript 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
用JavaScript编写COM组件的步骤
Mar 17 Javascript
优化javascript的执行速度
Jan 23 Javascript
关于递归运算的顺序测试代码
Nov 30 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
JavaScript与java语言有什么不同
Sep 22 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 Javascript
JavaScript中的LHS和RHS分析详情
Apr 06 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
May 17 #Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 #Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 #Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 #Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 #Javascript
jquery获取img的src值的简单实例
May 17 #Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 #Javascript
You might like
PHP错误和异常处理功能模块示例
2016/11/12 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
学习ExtJS Column布局
2009/10/08 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
vue-router的hooks用法详解
2020/06/08 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
Python 查找list中的某个元素的所有的下标方法
2018/06/27 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
创业培训计划书
2014/05/03 职场文书
师范类求职信
2014/06/21 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
天那边观后感
2015/06/09 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
业务员管理制度范本
2015/08/06 职场文书
公司借款担保书
2015/09/22 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫