WordPress Ajax 文章无限加载功能

网上很大一部分实现WordPress AJAX文章翻页,下拉无限加载等等功能的方式都是采用直接请求新页面,还有一部分是对页面做了处理,只输出一部分。今天给大家分享的这个WordPress Ajax 文章无限加载功能,则是采用admin-ajax.php做输出来实现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”];
    $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 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代码(可以加入你的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;
        }
    }
})

资料来源:http://fatesinger.com/712

wordpress首页ajax分页实现方法(非插件)

wordpress首页ajax翻页实现方法。关于为什么要对wordpress博客的首页进行ajax分页,有人说wordpress首页采用ajax分页可以减轻服务器数据提交的数量,用户体验度也就能得到很大程度的提升。特别是对于大多数图片较多,加载速度较慢的Blog,AJAX是个非常不错的选择。

wordpress首页ajax分页实现方法

1、首先当然是挂载JQ库,如果您的主题已经挂载了JQ库,则本步骤可以略去,JQ版本保持在1.2.3以上。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script

2、将下面那段JS保存为index_ajax_navi.js,并在header部分中引用挂载:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/index_ajax_navi.js"></script>
把下面代码保存为index_ajax_navi.js
var navi='.pagenavi';//变量声明 .pagenavi换成你主题中分页的CSS类名
var navi_a='.pagenavi a';//变量声明 .pagenavi a换成你主题中分页a标签的CSS类名
var content='#content';//变量声明 #content换成你主题中用于AJAX刷新部分的ID名
 
$(document).ready(function index_ajax_navi (){
	$(navi_a).click(function() {
		var z = $(this).attr("href");
		$.ajax({
			url: z,
			type:"POST",
			data:"action=index_ajax_navi",
			beforeSend:function()
			{
				document.body.style.cursor = 'wait';
				var C=1.0;
				$(content).css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:'alpha(opacity=' + C * 100 + ')'});				
				$(navi).html('<img src="loading图片的路径"><a>正在加载中...</a>');
			},
			error: function(request) 
			{
				alert(request.responseText);
			},			
			success: function (data)
			{
				$(content).html(data);					
				document.body.style.cursor = 'auto';
				var C=1; //设置翻页的时候,AJAX部分的透明度,可以为0.5;0.6等
				$(content).css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:'alpha(opacity=' + C * 100 + ')'});
				//$body.animate({ scrollTop: '0px'}, 1000);
				index_ajax_navi();//翻页后DOM发生变化,重新绑定该函数				
//$body.animate( { scrollTop: $(content).offset().top - 150}, 1000); //$body.animate({ scrollTop: '0px'}, 1000); jQuery('html, body').animate({scrollTop:$(content).offset().top - 100}, 'slow'); } }); return false; }); })

上面代码中的相关ID,需要根据你自己主题修改一下

3、将如下代码写到你的后台functions.php中

function index_ajax_navi(){
	if( isset($_POST['action'])&& $_POST['action'] == 'index_ajax_navi'){
	include_once TEMPLATEPATH.'/index_list.php';  //注意修改为你自己的文件的位置
		die();
	}else{
		return;
	}
}
add_action('template_redirect', 'index_ajax_navi');

4、把你主题的index.php写成两个文件,一个是框架文件,一个是index_list.php。是ajax请求需要重新加载的页面。这里要注意,并不是要写成这个样子,这是一种思想。就是index_list.php是需要被重新加载的,每个人把自己的index.php需要在点击页面之后重新加载的东西提出来,写到index_list.php之中即可。

index写成类似下面这样(每个人的主题都不同,请自己修改):

<?php get_header(); ?>
<?php
  $posts = query_posts($query_string . '&orderby=date&showposts=8');
  pre_next();
?>
<div id="content">
<?php include_once TEMPLATEPATH.'/index_list.php'; ?>
</div>   <!--end: content-->
<?php wp_reset_query(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

index_list.php写成这个样子:

<?php while (have_posts()) { the_post(); ?>

<div class="post" id="post-<?php the_ID(); ?>">

<div class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="打开 <?php the_title_attribute(); ?> 吧,还等什么?"><h2><?php the_title(); ?></h2></a></div>

<?php include (TEMPLATEPATH . ‘/myad/adindex.php’); ?>

<div class="headline">

<?php if(function_exists(‘wp_thumbnails_for_homepage’)) { wp_thumbnails_for_homepage(); } ?>

<span><?php the_time("M<b\i\g>j</b\i\g>") ?></span>

</div>

<div class="text" style="margin: 0;">

<?php the_content(‘<br />continue reading &raquo;’); ?></div>

<div class="postother" style="background:#E7E7DA;">

<span class="category"><?php the_category(‘, ‘) ?> </span>

<span class="comments"><?php comments_popup_link(‘添加评论’, ‘1条评论’, ‘%条评论’); ?> </span>

<span class="hits"><?php if(function_exists(‘the_views’)) { the_views(); } ?> </span>

</div>

</div>

<?php } ?>

<div class="pageNavi">

<?php if (function_exists(‘pagenavi’)) { pagenavi(); } ?>

</div>

ok,现在这样就可以实现首页的ajax翻页效果了。不过每个人的主题设置不同,上面部分步骤中有些地方需要根据自己的主题设置自己的参数。特别是包含分页链接的div的class。我这里是.pagenavi。还有就是包含index_list.php的 div id=”content”,需要在js中填入这两个关键的div

效果演示请看亿品元素首页