PC端数字分页与移动端上下页分页实现方案求助（无需改缓存插件）

方案一：CSS媒体查询控制显示隐藏 #

这是最简便的方案，完全绕开服务器端设备判断带来的缓存冲突问题。

1. PHP代码：同时输出两种分页结构，分别添加专属类名

<!-- 数字分页 -->
<div class="pagination pagination-number">
    <?php wp_pagenavi(); // 替换成你实际使用的数字分页函数 ?>
</div>

<!-- 上一页/下一页分页 -->
<div class="pagination pagination-older-newer">
    <?php previous_posts_link('上一页'); ?>
    <?php next_posts_link('下一页'); ?>
</div>

2. CSS代码：通过媒体查询根据屏幕尺寸控制显示状态

/* 默认显示PC端数字分页，隐藏移动端分页 */
.pagination-older-newer {
    display: none;
}

/* 屏幕宽度≤768px时，切换为移动端分页 */
@media (max-width: 768px) {
    .pagination-number {
        display: none;
    }
    .pagination-older-newer {
        display: block;
    }
}

优点：实现成本极低，无需修改缓存配置，完全不受缓存影响。

方案二：JavaScript动态切换（适配灵活场景） #

如果需要更精准的设备判断（比如区分平板和手机），可以用JS实现动态切换，同样避免缓存问题。

1. PHP代码：和方案一一致，同时输出两种分页
2. JavaScript代码：判断设备类型并切换显示，同时支持窗口大小变化自适应

document.addEventListener('DOMContentLoaded', function() {
    const numberPagination = document.querySelector('.pagination-number');
    const olderNewerPagination = document.querySelector('.pagination-older-newer');
    
    // 判断移动设备的逻辑，可按需调整
    const checkIsMobile = () => {
        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth <= 768;
    }
    
    // 初始切换
    const togglePagination = () => {
        const isMobile = checkIsMobile();
        numberPagination.style.display = isMobile ? 'none' : 'block';
        olderNewerPagination.style.display = isMobile ? 'block' : 'none';
    }
    
    togglePagination();
    
    // 监听窗口 resize 事件，自适应切换
    window.addEventListener('resize', togglePagination);
});

优点：可自定义设备判断规则，适配更复杂的场景，同样不受缓存影响。

方案三：服务器端结合Cookie（SEO友好场景） #

如果担心同时输出两种分页影响SEO，可以用Cookie记录设备类型，服务器端按需输出，只需调整缓存插件的Cookie规则即可，无需更换插件。

1. JavaScript代码：首次访问时判断设备类型并设置Cookie

document.addEventListener('DOMContentLoaded', function() {
    if (!document.cookie.includes('device_type')) {
        const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth <= 768;
        const deviceType = isMobile ? 'mobile' : 'desktop';
        // 设置Cookie，有效期30天
        document.cookie = `device_type=${deviceType}; expires=${new Date(Date.now() + 30*24*60*60*1000).toUTCString()}; path=/`;
        // 刷新页面使设置生效
        window.location.reload();
    }
});

2. PHP代码：读取Cookie并输出对应分页

$deviceType = isset($_COOKIE['device_type']) ? $_COOKIE['device_type'] : 'desktop';

if ($deviceType === 'desktop') {
    // 输出数字分页
    echo '<div class="pagination pagination-number">';
    wp_pagenavi();
    echo '</div>';
} else {
    // 输出上一页/下一页分页
    echo '<div class="pagination pagination-older-newer">';
    previous_posts_link('上一页');
    next_posts_link('下一页');
    echo '</div>';
}

3. 缓存配置：在现有缓存插件中添加规则，让缓存系统根据device_type Cookie区分缓存版本（主流缓存插件如WP Rocket、W3 Total Cache均支持此设置）。

优点：页面仅输出一种分页结构，更符合SEO要求，无需更换缓存插件。

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