WordPress使用Unicon主题如何避免portfolio分页点击加载更多刷新页面

问题原因 #

你当前使用的minti_pagination()函数输出的是传统<a>标签跳转的分页结构，没有绑定AJAX加载逻辑，所以点击加载更多会触发整页跳转刷新。

具体实现步骤 #

• 第一步：子主题添加AJAX后端处理逻辑
  在你当前使用的子主题functions.php中加入以下代码，用来处理后端portfolio内容的分页查询返回：

// 注册AJAX接口，前端未登录用户也可访问
add_action('wp_ajax_nopriv_load_more_portfolio', 'load_more_portfolio');
add_action('wp_ajax_load_more_portfolio', 'load_more_portfolio');
function load_more_portfolio() {
    $paged = $_POST['page'] ? absint($_POST['page']) : 1;
    $args = array(
        'post_type' => 'portfolio',
        'post_status' => 'publish',
        'posts_per_page' => get_option('posts_per_page'), // 和你当前网格每页展示数量保持一致
        'paged' => $paged
    );
    $query = new WP_Query($args);
    if($query->have_posts()) :
        ob_start();
        while($query->have_posts()) : $query->the_post();
            // 这里复制你主题原本portfolio网格单个卡片的输出代码，确保样式和原有一致
            ?>
            <div class="portfolio-item">
                <!-- 原有单个portfolio内容结构，比如缩略图、标题、分类等 -->
                <?php if(has_post_thumbnail()) : ?>
                    <div class="portfolio-thumb"><?php the_post_thumbnail('portfolio-grid-size'); ?></div>
                <?php endif; ?>
                <h3 class="portfolio-title"><?php the_title(); ?></h3>
            </div>
            <?php
        endwhile;
        $content = ob_get_clean();
        wp_send_json_success(array('content' => $content, 'max_page' => $query->max_num_pages));
    else :
        wp_send_json_error('没有更多内容');
    endif;
    wp_die();
}

• 第二步：前端添加JS拦截逻辑，阻止默认跳转
  在子主题的自定义JS文件中加入以下代码，或者直接在后台「外观-自定义-自定义JS」中添加：

jQuery(document).ready(function($) {
    let currentPage = 1;
    const maxPage = <?php echo $wp_query->max_num_pages; ?>; // 输出总页数到前端
    // 拦截load more按钮点击事件
    $('.pagination-next a, .load-more-btn').on('click', function(e) {
        e.preventDefault(); // 阻止默认跳转刷新
        if(currentPage >= maxPage) {
            $(this).text('没有更多内容');
            return;
        }
        currentPage++;
        $.ajax({
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            type: 'POST',
            data: {
                action: 'load_more_portfolio',
                page: currentPage
            },
            beforeSend: function() {
                // 可选：添加加载状态提示
                $('.pagination-next a').text('加载中...');
            },
            success: function(res) {
                if(res.success) {
                    // 把返回的内容追加到原有网格后面
                    $('.portfolio-grid-container').append(res.data.content);
                    $('.pagination-next a').text('加载更多');
                    // 到最后一页隐藏按钮
                    if(currentPage >= res.data.max_page) {
                        $('.pagination-next').hide();
                    }
                }
            }
        });
    });
});

• 第三步：匹配选择器完成适配
  可以保留你现有minti_pagination()函数不变，只需要确认以下两个类名和你站点实际结构匹配即可：
  • 代码中的.portfolio-grid-container替换为你站点portfolio网格外层容器的实际类名，可通过浏览器F12审查元素获取
  • 若你主题的加载更多按钮类名不是pagination-next，替换为实际的按钮类名即可

不想改代码的话可以优先检查Unicon主题后台设置，Portfolio小工具一般自带AJAX加载开关选项，直接开启即可实现无刷新加载。

内容的提问来源于stack exchange，提问作者Sallar Ali Channa