本站采用的是json传递数据，因为不同主题的写法不一样，组装起来比较麻烦，这里就介绍html的方法了。虽然档次差一点，但是效果不差~
Ajax后端处理添加到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"];
$category = $_POST["category"];
$author = $_POST["author"];
$tag = $_POST["tag"];
$search = $_POST["search"];
$the_query = new WP_Query( array("posts_per_page"=>get_option('posts_per_page'),"cat"=>$category,"tag"=>$tag,"author"=>$author,"post_status"=>"publish","post_type"=>"post","paged"=>$paged,"s"=>$search) );
while ( $the_query->have_posts() ){
$the_query->the_post();
get_template_part( 'content', get_post_format() );//这里是内容输出，如果你的首页是直接用的代码输出，则直接写在这里，注意PHP的开始结束符
}
wp_reset_postdata();
$nav = '';
if($category) $cat_id = ' data-cate="'.$category.'"';
if($author) $author = ' data-author="'.$author.'"';
if($tag) $tag = ' data-tag="'.$tag.'"';
if($search) $search = ' data-search="'.$search.'"';
if ( $total > $paged ) $nav = '<a id="show-more" href="javascript:;"'.$cat_id.$author.$search.' data-total="'.$total.'" data-paged = "'.($paged + 1).'" class="show-more m-feed--loader">show more</a>';
echo $nav;
die;
}
翻页按钮functions.php
function ajax_show_more_button(){
global $wp_query;
if( 2 > $GLOBALS["wp_query"]->max_num_pages){
return;
}
if(is_category()) $cat_id = ' data-cate="'.get_query_var( 'cat' ).'"';
if(is_author()) $author = ' data-author="'.get_query_var('author').'"';
if(is_tag()) $tag = ' data-tag="'.get_query_var('tag').'"';
if(is_search()) $search = ' data-search="'.get_query_var('s').'"';
echo '<a id="show-more" href="javascript:;"'.$cat_id.' data-paged = "2"'.$author.$tag.$search.' data-total="'.$GLOBALS["wp_query"]->max_num_pages.'" class="show-more m-feed--loader">show more</a>';
}
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"),
category = jQuery(this).data("cate"),
tag = jQuery(this).data("tag"),
search = jQuery(this).data("search"),
author = jQuery(this).data("author");
var ajax_data = {
action: "ajax_index_post",
paged: paged,
total: total,
category:category,
author:author,
tag:tag,
search:search
};
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;
}
});
下拉无限加载的JS代码
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 = jQuery(this).data("paged"),
total = jQuery(this).data("total"),
category = jQuery(this).data("cate"),
tag = jQuery(this).data("tag"),
search = jQuery(this).data("search"),
author = jQuery(this).data("author");
var ajax_data = {
action: "ajax_index_post",
paged: paged,
total: total,
category:category,
author:author,
tag:tag,
search:search
};
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]
