如何在帖子不足时隐藏WordPress Infinite Scroll的加载更多按钮？

嘿，这个场景我挺熟悉的，确实挺影响页面体验的，咱们可以从后端判断和前端处理两个维度来解决，甚至结合起来更稳妥：

方法一：用WordPress后端逻辑直接控制按钮渲染（推荐） #

is_paged()其实可以用，但更严谨的是结合总页数判断——毕竟如果整个内容只有1页，不管是不是分页页面，都不需要显示按钮。你可以在模板里用PHP条件判断包裹按钮代码：

<?php 
// 只有当总页数大于1时，才渲染加载更多按钮
if ( $wp_query->max_num_pages > 1 ) : 
?>
    <button class="load-more-button">加载更多</button>
<?php endif; ?>

这里$wp_query->max_num_pages会返回当前查询的总页数，直接判断是否大于1，就能从根源上避免无意义的按钮被渲染出来，比前端隐藏更高效。

如果你的场景需要区分分页页和首页，也可以结合is_paged()做更精细的控制：

<?php 
// 首页且总页数>1，或者处于分页页时显示按钮
if ( ( is_home() && $wp_query->max_num_pages > 1 ) || is_paged() ) : 
?>
    <button class="load-more-button">加载更多</button>
<?php endif; ?>

方法二：前端jQuery配合Infinite Scroll API处理 #

如果因为某些原因没法改后端模板，或者需要动态处理加载后的状态，可以用Infinite Scroll的事件和实例属性来判断是否还有更多内容，进而隐藏按钮：

jQuery(document).ready(function($) {
    const $loadBtn = $('.load-more-button');
    
    // 初始化Infinite Scroll
    $('.post-list').infiniteScroll({
        path: '.pagination__next', // 替换成你的分页链接选择器
        append: '.post', // 要追加的帖子元素选择器
        button: $loadBtn,
        status: '.loading-status' // 可选：加载状态提示元素
    })
    // 当没有更多内容可加载时触发
    .on('last.infiniteScroll', function() {
        $loadBtn.hide(); // 隐藏按钮
    })
    // 初始化时先检查总页数（需要后端传值）
    .on('init.infiniteScroll', function() {
        const totalPages = <?php echo $wp_query->max_num_pages; ?>;
        if (totalPages <= 1) {
            $loadBtn.hide();
        }
    });
});

这里用到了Infinite Scroll的last.infiniteScroll事件——当没有更多内容可以加载时，这个事件会触发，此时直接隐藏按钮就好。另外初始化时结合后端传的总页数，能直接在页面加载完成就隐藏无意义的按钮。

额外提示：关于文档的补充 #

其实Infinite Scroll的文档里有关于无更多内容的处理章节，主要是通过status元素显示提示，但没有直接的“隐藏按钮”配置，不过利用它的事件和实例属性就能轻松实现你要的效果。

总结下来，优先用后端判断渲染按钮，既高效又能避免不必要的DOM元素；前端处理作为补充，应对动态加载后的边界情况。

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