本站采用的是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]