北极寒流 » 网络资源 » WordPress Ajax 文章无限加载功能 - 2014.08.08

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

发表评论 【登录·注册】

所有留言都会被审核,请勿发布垃圾评论!

(必填)*