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

1、在文中列表页方面利用AJAX制作滚动到底触发翻页的效果比较常见,而在评论加载时AJAX 显示正在加载也很常用 ,下面就来看一下如何利用 AJAX 实现 WordPress中的文章列表及评论的分页功能文章列表页分页.加载 jQuery 库既然是jQuery 驱动的Ajax，加载jQuery 库是必须的。二 .文章列表格式在你的文章列表页面（首页index.php 、归档archive.php ）需要确保有以下类似的结构 三 .加入默认导航因为Ajax分页每次获取的是下一页的内容，因此只需调用WordPress 的默认导航。在你的index.php （或是其他文章列表页面）加入以下代码，生成默认的

2、WordPress 导航。.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(

3、#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; );.滚动触发翻页如果想当鼠标滚动到接近页面底部时自动翻页，则可以把代码

4、改成下面的样式给浏览器窗口绑定 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(#cont

5、ent .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为导航添

6、加一段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:hoverbackground-color:#cccccc;text-decoration:n

7、one;border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; #pagination .loadingbackground:url(images/loading.gif)240px 9px no-repeat; color:#555; #pagination .loading:hover background-color: transparent; cursor: default; 评论分页一 .准备加载jQuery 库，这个不解释了。.开启 WordPress 评论分页打开 WordPress 后台-

8、 设置- 讨论，在“其他评论设置”中勾选分页显示评论，设置一下评论数目， 这里的评论数目仅计算主评论，回复评论不作计算。这里我填了比较大的数字（ 15），因为评论分页分得太细会使用户不便于阅读之前的评论。在后台开启评论分页后，在comments.php 中需要添加分页导航的地方加入以下代码（如主题中有类似代码则无须再添加，另外代码中的nav 标签为HTML5标签， 若主题没有使用HTML5则有div 代替即可。） 三 .评论分页的SEO从 SEO 的角度看， 评论分页会造成重复内容（分页的内容正文都一样，并且keywords和 description也相同），这样对于评论很多的博客很容易因为重

9、复内容太多而降权，要在SEO 方面作出一些处理，最为方便有效的方法是使用meta 标签。在你的原有的meta 标签下加入以下代码，这样分页的页面便会禁止被搜索引擎收录，复。因此需header.php防止内容重?php if( is_single() | is_page() ) if( function_exists(get_query_var) ) $cpage = intval(get_query_var(cpage); $commentPage = intval(get_query_var(comment); if( !empty($cpage) | !empty($commentPage

10、) ) echo ; echo n; ?四 .Ajax评论根据上文所述，现在主题中已经有评论分页了，要做到Ajax的评论分页，只需JavaScript 的配合，不过在这之前首先要在评论列表前加入一个元素，用于在显示新一页评论列表时表示列表正在加载。假设主题模板comments.php 的评论模块结构如下： Comments id=loading-commentsLoading. . . . div 1 . 在你的js 文件中加入以下js 代码实现评论分页评论分页$body=(window.opera)?(patMode=CSS1Compat?$(html):$(body):$(html,bo

11、dy);点击分页导航链接时触发分页$(#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