也想出现在这里?联系我们

WordPress 非插件实现滚动自动无限分页

2024.01.16 wordpress教程
  • 文章介绍
  • 升级版本
  • 评价&建议

要在WordPress中实现滚动自动无限分页,您可以使用JavaScript和AJAX来加载新的内容,并且不需要使用插件。下面是一个基本的步骤:

  1. 创建一个新的页面模板或修改您的主题模板。

首先,您需要创建一个新的页面模板,或者编辑您当前主题的页面模板。您可以在您的主题文件夹中创建一个自定义页面模板,然后将其用作您的滚动分页页面。

  1. 在页面模板中添加HTML结构。

在您的页面模板中,添加一个用于显示内容的HTML容器,例如一个<div>元素。这个容器将用于加载新的内容。

<div id="infinitescrollcontainer">
    <! 初始内容在这里 >
</div>
<div id="loadmorebutton">
    <a href="#">加载更多</a>
</div>
  1. 添加JavaScript代码。

在您的页面模板中,添加JavaScript代码,以便在点击“加载更多”按钮时使用AJAX加载新的内容。以下是一个简单的JavaScript示例:

jQuery(function($) {
    var page = 1;
    var loading = false;

    function load_posts() {
        if (loading) return;
        loading = true;

        $.ajax({
            type: "POST",
            url: ajax_url, // 用于处理AJAX请求的WordPress AJAX处理程序URL
            data: {
                action: "load_more_posts",
                page: page
            },
            success: function(response) {
                $("#infinitescrollcontainer").append(response);
                loading = false;
                page;
            }
        });
    }

    $("#loadmorebutton a").on("click", function(e) {
        e.preventDefault();
        load_posts();
    });

    load_posts();
});
  1. 创建一个WordPress AJAX处理程序。

在您的主题目录中创建一个名为functions.php的文件(如果不存在的话),并添加以下代码来创建一个WordPress AJAX处理程序:

function load_more_posts() {
    $page = $_POST["page"];
    $args = array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'posts_per_page' => 5, // 每次加载多少篇文章
        'paged' => $page
    );

    $query = new WP_Query($args);

    if ($query>have_posts()) :
        while ($query>have_posts()) : $query>the_post();
            // 在这里输出文章内容
            get_template_part('templateparts/content', 'excerpt');
        endwhile;
    endif;

    wp_die();
}

add_action("wp_ajax_load_more_posts", "load_more_posts");
add_action("wp_ajax_nopriv_load_more_posts", "load_more_posts");
  1. 在主题文件中添加样式。

在您的主题的CSS文件中添加样式,以使滚动分页看起来好看并适应您的网站设计。

  1. 在页面中使用滚动分页。

最后,在WordPress中创建一个新页面,并选择使用您创建的页面模板。在页面中添加必要的内容,然后发布页面。现在,当访问该页面并点击“加载更多”按钮时,它会通过AJAX加载更多内容,实现滚动自动无限分页。

请注意,上述示例中的代码仅为演示目的,并未完全包含在WordPress中实现滚动分页所需的所有细节。您可能需要根据您的主题和需求进行更多的定制和调整。此外,确保添加适当的安全性检查和错误处理来提高用户体验和网站的安全性。

有用0
  • 2024.01.16初次和大家见面了!

等待您对该主题的建议

发表评论

还能输入240个字

Hi, 欢迎加入Wordpress技术交流群,带你装逼带你飞!

我要入群
也想出现在这里?联系我们
wordpress加速

我来推荐一个更牛逼的给你看看?

  • 猛戳我吧