如何在WordPress自定义博客文章循环中添加加载更多按钮

步骤1：修改现有blog.php模板代码 #

首先替换原有模板中的对应部分，修正查询参数、添加分页属性和AJAX需要的前端参数：

<?php
/**
 * Template Name: Blog
 * The template for displaying blog list.
 *
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}
get_header();
?>

<div class="main-blog">
    <div class="blog-filter">
        <div class="container">
            <div class="inner-blog">
                <div class="blog-heading">
                    <h2 id="SectionName" >Blog</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="portfolio section">
        <div class="container">
            <div class="filters">
                <ul class="toolbar">
                    <li class="active" data-filter="*">All</li>
                    <?php
                        $argss = array(
                            'taxonomy' => 'category',
                            'hide_empty' => 0,
                            'include' => array( 17, 18, 19, 20, 21, 22, 23),
                        );
                        $termss= get_terms($argss);
                        $counts = 1;
                        foreach($termss as $terms){
                    ?>
                    <li data-filter=".<?php echo $terms->slug; ?>">
                        <div class="cat-img"><img src="<?php echo z_taxonomy_image_url($terms->term_id); ?>" /></div>
                        <?php echo $terms->name; ?>
                    </li>
                    <?php } ?>
                </ul>
            </div>
            <div class="filters-content">
                <div id="portfolio" >
                    <!-- 给文章容器加ID，方便后续插入新内容 -->
                    <div id="post-container">
                    <?php
                    // 获取当前页码
                    $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
                    // 修正查询参数，原有分类查询写法不规范
                    $args = array(  
                        'post_type' => 'post',
                        'post_status' => 'publish',
                        'posts_per_page' => 15,
                        'paged' => $paged,
                        'tax_query' => array(
                            array(
                                'taxonomy' => 'category',
                                'field' => 'term_id',
                                'terms' => array( 17, 18, 19, 20, 21, 22, 23),
                            )
                        )
                    );
                    $loop = new WP_Query( $args ); 
                    while ( $loop->have_posts() ) : $loop->the_post(); 
                    $categories = get_the_category();
                    $cats = "";
                    foreach($categories as $category){
                        $cats .= $category->slug." ";
                    }
                    ?>
                    <div class="tile scale-anm all <?php echo $cats; ?>">
                        <div class="item ">
                            <div class="img-sec">
                                <?php the_post_thumbnail(); ?>
                            </div>
                            <div class="cnt-sec">
                                <div class="cat">
                                    <p><?php the_category(' '); ?></p>
                                </div>
                                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                                <p>
                                    <?php echo wp_trim_words(get_the_excerpt(),70);  ?>
                                </p>
                            </div>
                        </div>
                    </div>
                    <?php
                        endwhile;
                        wp_reset_postdata();
                        // 传递AJAX参数到前端
                        wp_localize_script( 'custom-ajax-loadmore', 'ajax_loadmore', array(
                            'ajax_url' => admin_url( 'admin-ajax.php' ),
                            'posts_per_page' => 15,
                            'total_pages' => $loop->max_num_pages,
                            'current_page' => $paged,
                            'nonce' => wp_create_nonce( 'loadmore_posts_nonce' )
                        ) );
                        // 引入加载更多JS，路径可根据自己的主题结构调整
                        wp_enqueue_script( 'custom-ajax-loadmore', get_template_directory_uri() . '/js/loadmore.js', array('jquery'), '1.0', true );
                    ?>
                    </div>
                </div>
                <!-- 只有总页数大于1时才显示加载更多按钮 -->
                <?php if($loop->max_num_pages > 1) { ?>
                <div id="more_posts" class="load-more-btn">加载更多</div>
                <?php } ?>
            </div>
        </div>
    </div>
</div>
<?php echo do_shortcode( '[elementor-template id="1916"]' ); ?>
<?php get_footer(); ?>

步骤2：在主题functions.php中添加AJAX处理逻辑 #

// 适配登录/未登录用户的加载更多请求
add_action('wp_ajax_nopriv_loadmore_posts', 'loadmore_posts_handler');
add_action('wp_ajax_loadmore_posts', 'loadmore_posts_handler');
function loadmore_posts_handler() {
    // 安全验证
    if ( !isset($_POST['nonce']) || !wp_verify_nonce( $_POST['nonce'], 'loadmore_posts_nonce' ) ) {
        wp_send_json_error('验证失败');
    }
    $paged = $_POST['page'] + 1;
    // 保持和前端查询规则一致
    $args = array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'posts_per_page' => $_POST['posts_per_page'],
        'paged' => $paged,
        'tax_query' => array(
            array(
                'taxonomy' => 'category',
                'field' => 'term_id',
                'terms' => array( 17, 18, 19, 20, 21, 22, 23),
            )
        )
    );
    $loop = new WP_Query( $args );
    if ( $loop->have_posts() ) {
        ob_start();
        while ( $loop->have_posts() ) : $loop->the_post();
            $categories = get_the_category();
            $cats = "";
            foreach($categories as $category){
                $cats .= $category->slug." ";
            }
            ?>
            <div class="tile scale-anm all <?php echo $cats; ?>">
                <div class="item ">
                    <div class="img-sec">
                        <?php the_post_thumbnail(); ?>
                    </div>
                    <div class="cnt-sec">
                        <div class="cat">
                            <p><?php the_category(' '); ?></p>
                        </div>
                        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                        <p>
                            <?php echo wp_trim_words(get_the_excerpt(),70);  ?>
                        </p>
                    </div>
                </div>
            </div>
            <?php
        endwhile;
        wp_reset_postdata();
        $html = ob_get_clean();
        wp_send_json_success(array('html' => $html, 'page' => $paged));
    } else {
        wp_send_json_error('没有更多文章了');
    }
    die();
}

步骤3：添加JS交互代码 #

在主题目录下新建js/loadmore.js文件，写入以下内容：

jQuery(document).ready(function($) {
    let currentPage = ajax_loadmore.current_page;
    let totalPages = ajax_loadmore.total_pages;
    $('#more_posts').on('click', function() {
        let $btn = $(this);
        // 防止重复点击
        if ($btn.hasClass('loading')) return;
        $btn.addClass('loading').text('加载中...');
        $.ajax({
            url: ajax_loadmore.ajax_url,
            type: 'POST',
            data: {
                action: 'loadmore_posts',
                page: currentPage,
                posts_per_page: ajax_loadmore.posts_per_page,
                nonce: ajax_loadmore.nonce
            },
            success: function(res) {
                if (res.success) {
                    $('#post-container').append(res.data.html);
                    currentPage = res.data.page;
                    $btn.removeClass('loading').text('加载更多');
                    // 加载到最后一页隐藏按钮
                    if (currentPage >= totalPages) {
                        $btn.hide();
                    }
                    // 如果使用了Isotope分类过滤，解除下方注释刷新布局
                    // $('#portfolio').isotope('appended', $(res.data.html));
                } else {
                    $btn.removeClass('loading').text(res.data);
                    setTimeout(() => {
                        $btn.hide();
                    }, 1500);
                }
            },
            error: function() {
                $btn.removeClass('loading').text('加载失败，请重试');
            }
        })
    })
})

注意事项 #

• 原有代码中the_excerpt(70)写法不规范，the_excerpt本身不接受长度参数，已替换为wp_trim_words(get_the_excerpt(),70)实现70字摘要截取
• 如果需要适配页面的分类过滤功能，只需在JS中额外传递当前选中的分类ID到AJAX请求，同步修改AJAX处理函数的查询参数即可
• 如果点击按钮出现404，请检查loadmore.js的路径是否和你的主题目录结构匹配

内容的提问来源于stack exchange，提问作者kekkeigenkaishruti