欢迎光临
我们一直在努力

WordPress内部ajax加载文章和分页方法探寻

最近看好一个WordPress主题想参照功能写一个,其中一个功能就是Ajax加载文章和分页,看了一下源码,加载是将WordPress文章列表的json格式数据直接在js文件中生成输出样式,首先一大推js和html混排的不是很好,另外不利于定制化,于是找了一个国外的主题,看了一下相似的功能,做已记录,方便后面使用的时候查询

首先找加载的入口,在js文件中找到相关部分

$.ajax({
                    type: 'POST',
                    url: buzzmag.ajaxurl,
                    data: {
                        'next': 1,
                        'loop': tabLoop,
                        'thumb_size': buzzmag.thumb_size,
                        'action': 'buzzmag_loops_ajax'#入口函数
                    },
                    success: function (result) {
                        panel.append(result);
                        $.when( panel.parent('div').find('.fl-loading').fadeOut() ).done(function() {
                            panel.fadeIn();
                            masonryLayout();
                        });        
                    },
                    error: function(result) { 
                        panel.removeClass('ajax-loaded');                    
                        panel.append('<div class="fl-error">Error! Cannot retrive loop posts.</div>');
                        $.when(panel.parent('div').find('.fl-loading').fadeOut()).done(function() {
                            panel.fadeIn();
                        });
                    }
                });

从文件中可以看到通过ajax向buzzmag_loops_ajax函数传递了三个值,然后再看看这个是怎样处理这个函数的

function buzzmag_loops_ajax() {
    $loop = $_POST['loop'];
    $next = $_POST['next'];
    $thumb_size = $_POST['thumb_size'];

    switch ($loop) {
        case 'trending':
            $loopSet = buzzmag_trending_loop($next, $thumb_size);
            break;

        case 'audio':
            $loopSet = buzzmag_audio_loop($next, $thumb_size);
            break;

        case 'video':
            $loopSet = buzzmag_video_loop($next, $thumb_size);
            break;

        case 'gallery':
            $loopSet = buzzmag_gallery_loop($next, $thumb_size);
            break;

        case 'latest'://获取最新的文章
            $loopSet = buzzmag_latest_loop($next, $thumb_size);
            break;

        case 'default':
            // Query vars -> only used in default loop 
            $query_vars = json_decode( stripslashes( $_POST['query_vars'] ), true );
            $loopSet = buzzmag_default_loop($query_vars, $next, $thumb_size);//默认获取文章的函数
            break;
        
    }

    wp_die( $loopSet );
}
add_action( 'wp_ajax_buzzmag_loops_ajax', 'buzzmag_loops_ajax' );
add_action( 'wp_ajax_nopriv_buzzmag_loops_ajax', 'buzzmag_loops_ajax' );

从前端样式和代码来分析,loop应该是标签对应的值,然后根据这个值来判断你要获取那种类型的文章,然后再交给对应的函数进行处理.这里看看buzzmag_latest_loop和buzzmag_default_loop这两个函数都做了些什么

//buzzmag_latest_loop
function buzzmag_latest_loop($page, $thumb_size) {
    $loop = new WP_Query(
        array(
            'post_type' => 'post',
            'post_status' => 'publish',
            'paged' => $page,
        )
    );

    ob_start();

    buzzmag_loop($loop, $thumb_size);

    buzzmag_pagination('latest', $page, $loop->max_num_pages);
            
    return ob_get_clean();
}

这个函数里面加了查询条件的数组,然后将数据又传递给buzzmag_loop来处理,另外从这个函数中也可以追溯到最开始的next代表的是页面的值.buzzmag_default_loop函数和这个类似,只是做了最初的简单查询,继续往下看buzzmag_loop和buzzmag_pagination这两个函数

//buzzmag_loop
function buzzmag_loop($loop, $thumb_size) {
    if ( $loop->query['paged'] == 1 ) {
        echo '<div class="fl-loop-posts">';
    }

    if ( $loop->have_posts() ) {
        while ( $loop->have_posts() ) {
            $loop->the_post();
            get_template_part( 'includes/loop-post', null, array( 'thumb_size' => $thumb_size ) );//交给模板处理
        }
    } else {
        echo '<div class="fl-ajax-end">'. esc_html__('Sorry, No Posts Found!', 'buzzmag') .'</div>';
    }

    if ( $loop->query['paged'] == 1 ) {
        echo '</div>';
    }
}

根据查询条件获取文章,然后交给模板输出,$thumb_size就是缩略图的大小,这样整体在前端就显示完成了

function buzzmag_pagination($loop_name, $current, $max) {
    $class = '';
    if ( get_theme_mod('infinite_scroll') ) {
        $class = 'infinite';
    }

    get_next_posts_link();

    if ( $current == 1 && $max > 1 ) {
        echo '<a href="#" class="fl-load-more '. esc_attr($class) .'" data-loop="'. esc_attr($loop_name) .'" current-page="'. esc_attr($current) .'" max-pages="'. esc_attr($max) .'"><i class="fa fa-refresh"></i>'. esc_html__('Load More Posts', 'buzzmag') .'</a>';
    }
}

这个就是控制加载更多按钮的,然后再看一下includes/loop-post这个文件

<?php
// Loop Post Content
// Used in all Loops
?>
<article <?php post_class('fl-post clearfix'); ?>>
	<?php if (has_post_thumbnail()) { ?>
	<div class="fl-picture">
		<a href="<?php the_permalink(); ?>">
			<?php
                the_post_thumbnail($args['thumb_size']);

                if (has_post_format('audio')) {
                    echo '<div class="format-overlay"><i class="fa fa-music"></i></div>';
                } elseif (has_post_format('video')) {
                    echo '<div class="format-overlay"><i class="fa fa-play"></i></div>';
                } elseif (has_post_format('gallery')) {
                    echo '<div class="format-overlay"><i class="fa fa-camera"></i></div>';
                }

                echo esc_html(get_the_title());
                ?>
		</a>
	</div>

代码太多就不全粘贴了,这个就是正常利用各种内置函数和设置选项了.

通过这个实例的分析,在get_template_part这个函数中设置文章类型的方法,通过Ajax请求可以将不同的文章类型输出不同的样式.这个实例是定义了5个tab,在实际应用中也可以换成分类或者其他,在Ajax提交数据的时候处理一下就可以了.

最后想和读者探讨一下类似这种ajax请求文章的时候做不做nonce的验证

未经允许不得转载:侯建方的个人网站 » WordPress内部ajax加载文章和分页方法探寻

点击此处获取更多金融后续培训参考答案

登录

找回密码

注册