wordpress 网页滚轮翻页-网页设计-锦华智联科技

什么是滚轮翻页？

当用户滚动到页面底部或接近底部时，JavaScript 会自动向服务器发送请求，获取下一页的内容，并将其动态插入到当前页面的末尾，用户可以持续不断地浏览,直到没有更多内容为止。

（图片来源网络，侵删）

使用插件（最简单、推荐新手）

这是最简单、最快捷的方法，适合绝大多数用户,你只需要安装并配置一个插件即可。

使用主题自带功能（最优雅）

很多现代化的 WordPress 主题已经内置了滚轮翻页功能，这是最好的实现方式，因为它与主题完美集成,性能和样式都经过优化。

如何检查你的主题是否支持：

登录 WordPress 后台。
进入 外观 > 自定义。
在左侧的菜单中，寻找类似 选项”、“布局设置” 或 “翻页设置” 的栏目。
查看是否有关于“无限滚动”、“Ajax 加载”或“翻页方式”的开关或选项。

如果你的主题支持，只需在这里开启并稍作配置即可，这是首选方案。

手动添加代码（最灵活、适合开发者）

如果你对代码比较熟悉，或者你的主题没有提供此功能，也不想安装插件，可以通过手动添加代码的方式来实现,这种方法可以让你完全控制翻页的每一个细节。

实现原理： 我们将使用 jQuery (WordPress 自带) 来监听滚动事件，当用户滚动到页面底部时，通过 AJAX 请求获取下一页的内容,并将其插入到页面中。

第 1 步：创建一个模板文件

为了不影响其他页面,我们最好为首页或文章列表创建一个专门的模板。

复制你当前主题的 index.php 文件，并将其重命名为 page-infinite-scroll.php。

在这个新文件的最顶部，添加以下代码，使其成为一个有效的页面模板：

<?php
/**
 * Template Name: Infinite Scroll Page
 * Description: A custom template for infinite scroll.
 */
?>

你可以在 WordPress 后台创建一个新页面，并在右侧的“页面属性”中选择“Infinite Scroll Page”作为模板。

第 2 步：修改模板文件

打开 page-infinite-scroll.php 文件,进行如下修改：

找到主循环：找到类似 while ( have_posts() ) : the_post(); 的主循环代码。
给文章容器添加 ID：在循环开始前，用一个 div 包裹整个文章列表，并给它一个唯一的 ID，#post-content-wrapper。
添加分页导航：在主循环结束后，添加 the_posts_pagination() 函数，这个函数会被我们的 JavaScript 用来检测是否有下一页。
加载 JavaScript 文件：在 footer.php 或 wp_footer() 钩子处，引入我们即将编写的 JavaScript 文件。

修改后的 page-infinite-scroll.php 示例：

<?php
/**
 * Template Name: Infinite Scroll Page
 * Description: A custom template for infinite scroll.
 */
get_header(); ?>
<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <div id="post-content-wrapper">
            <?php
            if ( have_posts() ) :
                // Start the Loop.
                while ( have_posts() ) : the_post();
                    /*
                     * Include the Post-Format-specific template for the content.
                     * If you want to override this in a child theme, then include a file
                     * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                     */
                    get_template_part( 'template-parts/content', get_post_format() );
                // End the loop.
                endwhile;
                // Previous/next page navigation. 这是关键！
                the_posts_pagination( array(
                    'prev_text'          => __( 'Previous page', 'your-theme-textdomain' ),
                    'next_text'          => __( 'Next page', 'your-theme-textdomain' ),
                    'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'your-theme-textdomain' ) . ' </span>',
                ) );
            // If no content, include the "No posts found" template.
            else :
                get_template_part( 'template-parts/content', 'none' );
            endif;
            ?>
        </div><!-- #post-content-wrapper -->
    </main><!-- #main -->
</div><!-- #primary -->
<?php
// 引入我们的 JavaScript 文件
wp_enqueue_script( 'infinite-scroll-script', get_stylesheet_directory_uri() . '/js/infinite-scroll.js', array('jquery'), '1.0', true );
get_footer();

第 3 步：创建 JavaScript 文件

在你的主题文件夹下创建一个名为 js 的文件夹。
在 js 文件夹中创建一个名为 infinite-scroll.js 的文件。
将以下代码粘贴到 infinite-scroll.js 中：

jQuery(document).ready(function($) {
    var page = 2; // 从第 2 页开始，因为第 1 页已经加载了
    var loading = false; // 防止重复加载
    var $window = $(window);
    var $container = $('#post-content-wrapper'); // 对应 PHP 中的 div ID
    $window.scroll(function() {
        // 滚动到底部附近时触发
        if ($window.scrollTop() > $container.height() - 1000 && !loading) {
            loading = true;
            $container.append('<div class="loading-spinner">Loading...</div>'); // 可以添加一个加载动画
            $.ajax({
                type: 'GET',
                url: ajaxurl, // WordPress 定义的 AJAX URL
                data: {
                    action: 'infinite_scroll', // 我们的自定义 action
                    page: page,
                    // 可以传递更多参数，post_type 等
                },
                success: function(html) {
                    // 如果返回的内容不为空
                    if (html) {
                        $container.append(html); // 将新内容追加到容器中
                        page++; // 页码加 1
                        loading = false; // 允许下一次加载
                        $('.loading-spinner').remove(); // 移除加载动画
                    } else {
                        // 没有更多内容了
                        $('.loading-spinner').remove();
                        $container.append('<p class="no-more-posts">No more posts.</p>');
                        $window.off('scroll'); // 解除滚动事件监听
                    }
                },
                error: function(xhr, status, error) {
                    console.error(error);
                    loading = false;
                    $('.loading-spinner').remove();
                }
            });
        }
    });
});

第 4 步：在 functions.php 中添加 PHP 和 AJAX 处理代码

这是最后一步，也是最关键的一步，我们需要告诉 WordPress 如何处理我们 JavaScript 发来的 AJAX 请求。

打开你主题的 functions.php 文件,添加以下代码：

<?php
// 添加 AJAX 的处理函数
add_action('wp_ajax_infinite_scroll', 'infinite_scroll_handler'); // 登录用户有效
add_action('wp_ajax_nopriv_infinite_scroll', 'infinite_scroll_handler'); // 未登录用户也有效
function infinite_scroll_handler() {
    // 获取从 JavaScript 传递过来的页码
    $page = $_GET['page'];
    // 设置查询参数，获取对应页码的文章
    $args = array(
        'post_type' => 'post', // 确保是你想查询的文章类型
        'paged' => $page,
        // 你可以在这里添加其他 WP_Query 的参数，比如分类、标签等
    );
    $query = new WP_Query($args);
    if ($query->have_posts()) :
        while ($query->have_posts()) : $query->the_post();
            // 在这里循环输出文章内容
            // get_template_part 会加载你主题中的 content.php 文件
            get_template_part('template-parts/content', get_post_format());
        endwhile;
    endif;
    // 重置文章数据
    wp_reset_postdata();
    // 必须终止 PHP 执行，否则会返回多余的 0
    wp_die();
}

优点：

完全控制：可以精确控制加载逻辑、样式和性能。
无插件依赖：保持网站的整洁。
性能最优：可以根据需求进行深度优化。

缺点：

需要代码知识：对新手不友好,容易出错。
维护成本：如果主题更新,代码可能会失效。

总结与建议

方法	优点	缺点	推荐人群
插件	简单、快速、安全	增加插件、可能影响性能	所有新手和不想折腾代码的用户
主题自带	最优雅、集成度高、性能好	依赖主题，不是所有主题都有	使用现代化主题的用户
手动代码	完全控制、无插件、性能最优	复杂、需要代码知识、维护成本高	开发者或高级用户

给你的建议：

首选：检查你的主题是否有自带功能,有就用。
其次：如果没有，尝试安装 Infinite Scroll 插件,这是最省心的方法。
最后：如果你对代码有信心，并且需要非常定制化的效果,再考虑手动编写代码。

wordpress 网页滚轮翻页

什么是滚轮翻页？

使用插件（最简单、推荐新手）

推荐插件：

使用主题自带功能（最优雅）

手动添加代码（最灵活、适合开发者）

总结与建议