虽然分页能增加几个收录,但是个人认为没什么必要,只需要个站点地图给出文章链接的入口就好了,而且随着单页应用越来越多,翻页已经过时,即使是AJAX翻页。
我想你之前肯定遇到过类似的教程,什么AJAX文章翻页,下拉无限加载等等,据我看到的,有很大一部分都是直接请求新页面,还有一部分是对页面做了处理,只输出一部分。我这里是用admin-ajax.php
做输出,虽然可以组装成JSON来做数据传输,但是感觉没有太大必要。
下面的代码加到functions.php
中
add_action('wp_ajax_nopriv_ajax_index_post', 'ajax_index_post'); add_action('wp_ajax_ajax_index_post', 'ajax_index_post'); function ajax_index_post(){ $paged = $_POST["paged"]; $total = $_POST["total"]; $the_query = new WP_Query( array("posts_per_page"=>get_option('posts_per_page'),"post_status"=>"publish","post_type"=>"post","paged"=>$paged) ); while ( $the_query->have_posts() ){ $the_query->the_post(); get_template_part( 'content', get_post_format() );//这里是内容输出,如果你的首页是直接用的代码输出,则直接写在这里,注意PHP的开始结束符 } wp_reset_postdata(); if ( $total > $paged ) echo '<a id="show-more" href="javascript:;" data-total="'.$total.'" data-paged = "'.($paged + 1).'" class="show-more m-feed--loader">show more</a>'; die; }
下面这个是按钮函数,也放到functions.php
中
function ajax_show_more_button(){ if( 2 > $GLOBALS["wp_query"]->max_num_pages){ return; } echo '<a id="show-more" href="javascript:;" data-paged = "2" data-total="'.$GLOBALS["wp_query"]->max_num_pages.'" class="show-more m-feed--loader">show more</a>'; }
直接使用<?php ajax_show_more_button();?>
调用,位置就是替换掉你的翻页函数即可。
如果是点击加载,则使用下面的js代码,我现在使用的就是这个
jQuery(document).on("click", "#show-more", function() { if (jQuery(this).hasClass('is-loading')) { return false; } else { var paged = jQuery(this).data("paged"), total = jQuery(this).data("total"); var ajax_data = { action: "ajax_index_post", paged: paged, total: total }; jQuery(this).html('loading...').addClass('is-loading') jQuery.post('/wp-admin/admin-ajax.php', ajax_data, function(data) { jQuery('#show-more').remove(); jQuery(".layoutSingleColumn").append(data);//这里是包裹文章的容器名 }); return false; } });
如果是下拉无限加载,则使用这个代码
var H = false; jQuery(window).scroll(function(i) { if (jQuery("#show-more").length > 0) { var q = jQuery(window).scrollTop(), p = jQuery("#show-more").offset().top, $this = jQuery("#show-more"); if (q + jQuery(window).height() >= p && H != true) { var paged = $this.data("paged"), total = $this.data("total"); var ajax_data = { action: "ajax_index_post", paged: paged, total: total }; H = true; $this.html('loading...').addClass('is-loading') jQuery.post('/wp-admin/admin-ajax.php', ajax_data, function(data) { jQuery('#show-more').remove(); H = false; jQuery(".layoutSingleColumn").append(data);//这里是包裹文章的容器名 }); return false; } } })
代码中需要根据自己主题修改的地方我已经用注释标出来了。
Github 演示源码
我在github上写了一个简单的demo,文件夹内为一个精简的twentytwelve主题,只保留了一个首页和分类页面,如果不会具体的操作的可以下载这个精简主题,然后对照自己的主题修改。
修改过的文件分别为
- functions.php
- index.php
- category.php
- js/base.js
[fint_in_github]https://github.com/bigfa/Wordpress-Snippers[/fint_in_github]