在 WordPress 中加载更多帖子 Ajax 按钮

Posted

技术标签:

【中文标题】在 WordPress 中加载更多帖子 Ajax 按钮【英文标题】:Load More Posts Ajax Button in WordPress 【发布时间】:2015-10-13 17:59:39 【问题描述】:

我浏览了旧问题并尝试了许多似乎可以做到这一点的不同方法。我最接近工作的是这里:How to implement pagination on a custom WP_Query Ajax

我已经尝试了所有方法,但它不起作用。页面上绝对没有任何变化。如果您检查加载更多按钮并单击它,jQuery 正在执行加载更多按钮操作,因为它从<a id="more_posts">Load More</a> 更改为<a id="more_posts" disables="disabled">Load More</a>,即使这对我来说似乎也不正确。这不是添加帖子,我想我错过了一些简单的东西,但对于我的生活我无法解决。

我的模板文件中的代码是:

<div id="ajax-posts" class="row">
    <?php 
    $postsPerPage = 3;
    $args = [
        'post_type' => 'post',
        'posts_per_page' => $postsPerPage,
        'cat' => 1
    ];

    $loop = new WP_Query($args);

    while ($loop->have_posts()) : $loop->the_post(); ?>
        <div class="small-12 large-4 columns">
            <h1><?php the_title(); ?></h1>
            <p><?php the_content(); ?></p>
        </div>
        <?php
    endwhile; 

    echo '<a id="more_posts">Load More</a>';
    
    wp_reset_postdata(); 
    ?>
</div>

我的函数文件中的代码是:

function more_post_ajax()
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];

    header("Content-Type: text/html");
    $args = [
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'cat' => 1,
        'offset' => $offset,
    ];

    $loop = new WP_Query($args);

    while ($loop->have_posts())  $loop->the_post(); 
        the_content();
    
    exit; 


add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax'); 
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

而我在页脚中的 jQuery 是:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready( function($) 
        var ajaxUrl = "<?php echo admin_url('admin-ajax.php')?>";
        
        // What page we are on.
        var page = 5; 
        // Post per page
        var ppp = 3; 

        $("#more_posts").on("click", function() 
            // When btn is pressed.
            $("#more_posts").attr("disabled",true);

            // Disable the button, temp.
            $.post(ajaxUrl, 
                action: "more_post_ajax",
                offset: (page * ppp) + 1,
                ppp: ppp
            )
            .success(function(posts) 
                page++;
                $("#ajax-posts").append(posts);
                // CHANGE THIS!
                $("#more_posts").attr("disabled", false);
            );
        );
    );
</script>

任何人都可以看到我缺少的东西或能够提供帮助的东西吗?

【问题讨论】:

非常感谢您为帮助我所做的努力,但我仍然无法正常工作。我的加载更多按钮不可点击?你知道为什么会这样吗? 不知道你有没有看到我下面的评论,但是如果你把你的ajax代码放在custom.js中,那么代码应该是这样的: wp_enqueue_script('custom_js', get_template_directory_uri() . '/assets/js/custom.js', array('jquery'), '', true); wp_localize_script('custom_js', 'ajax_posts', array('ajaxurl' => admin_url('admin-ajax.php'), 'noposts' => __('没有找到旧帖子', 'fireproduct'), )); 【参考方案1】:

2016 年 4 月 24 日更新。

我已经在我的页面 https://madebydenis.com/ajax-load-posts-on-wordpress/ 上创建了关于如何在 26 岁主题上实现这一点的教程,所以请随时查看 :)

编辑

我已经在 25 日测试了它并且它正在工作,所以它应该对你有用。

index.php 中(假设您想在主页上显示帖子,但即使您将其放在页面模板中也应该可以)我输入:

    <div id="ajax-posts" class="row">
        <?php
            $postsPerPage = 3;
            $args = array(
                    'post_type' => 'post',
                    'posts_per_page' => $postsPerPage,
                    'cat' => 8
            );

            $loop = new WP_Query($args);

            while ($loop->have_posts()) : $loop->the_post();
        ?>

         <div class="small-12 large-4 columns">
                <h1><?php the_title(); ?></h1>
                <p><?php the_content(); ?></p>
         </div>

         <?php
                endwhile;
        wp_reset_postdata();
         ?>
    </div>
    <div id="more_posts">Load More</div>

这将输出类别 8 中的 3 个帖子(我在该类别中有帖子,所以我使用了它,您可以使用任何您想要的内容)。您甚至可以查询您所在的类别

$cat_id = get_query_var('cat');

这将为您提供要在查询中使用的类别 ID。你可以把它放在你的加载器中(加载更多的 div),然后用 jQuery 拉

<div id="more_posts" data-category="<?php echo $cat_id; ?>">>Load More</div>

并使用拉出类别

var cat = $('#more_posts').data('category');

但现在,您可以忽略它。

接下来在functions.php我添加了

wp_localize_script( 'twentyfifteen-script', 'ajax_posts', array(
    'ajaxurl' => admin_url( 'admin-ajax.php' ),
    'noposts' => __('No older posts found', 'twentyfifteen'),
));

就在现有的wp_localize_script 之后。这将加载 WordPress 自己的 admin-ajax.php,以便我们在 ajax 调用中调用它时可以使用它。

在 functions.php 文件的末尾,我添加了将加载您的帖子的函数:

function more_post_ajax()

    $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 3;
    $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;

    header("Content-Type: text/html");

    $args = array(
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'cat' => 8,
        'paged'    => $page,
    );

    $loop = new WP_Query($args);

    $out = '';

    if ($loop -> have_posts()) :  while ($loop -> have_posts()) : $loop -> the_post();
        $out .= '<div class="small-12 large-4 columns">
                <h1>'.get_the_title().'</h1>
                <p>'.get_the_content().'</p>
         </div>';

    endwhile;
    endif;
    wp_reset_postdata();
    die($out);


add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

这里我在数组中添加了分页键,以便循环可以在您加载帖子时跟踪您所在的页面。

如果您在加载器中添加了您的类别,您将添加:

$cat = (isset($_POST['cat'])) ? $_POST['cat'] : '';

你会输入$cat而不是8。这将在 $_POST 数组中,您将能够在 ajax 中使用它。

最后一部分是 ajax 本身。在 functions.js 我把 $(document).ready(); 环境放在里面

var ppp = 3; // Post per page
var cat = 8;
var pageNumber = 1;


function load_posts()
    pageNumber++;
    var str = '&cat=' + cat + '&pageNumber=' + pageNumber + '&ppp=' + ppp + '&action=more_post_ajax';
    $.ajax(
        type: "POST",
        dataType: "html",
        url: ajax_posts.ajaxurl,
        data: str,
        success: function(data)
            var $data = $(data);
            if($data.length)
                $("#ajax-posts").append($data);
                $("#more_posts").attr("disabled",false);
             else
                $("#more_posts").attr("disabled",true);
            
        ,
        error : function(jqXHR, textStatus, errorThrown) 
            $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
        

    );
    return false;


$("#more_posts").on("click",function() // When btn is pressed.
    $("#more_posts").attr("disabled",true); // Disable the button, temp.
    load_posts();
);

保存,测试,它可以工作:)

图片作为证明(不要介意粗制滥造的造型,它很快就完成了)。帖子内容也是乱码xD

更新

对于“无限加载”而不是按钮上的单击事件(只需使其不可见,使用visibility: hidden;),您可以尝试使用

$(window).on('scroll', function () 
    if ($(window).scrollTop() + $(window).height()  >= $(document).height() - 100) 
        load_posts();
    
);

当您距离页面底部 100 像素时,这应该会运行 load_posts() 函数。对于我网站上的教程,您可以添加一个检查以查看帖子是否正在加载(以防止两次触发 ajax),并且您可以在滚动到达页脚顶部时触发它

$(window).on('scroll', function()
    if($('body').scrollTop()+$(window).height() > $('footer').offset().top)
        if(!($loader.hasClass('post_loading_loader') || $loader.hasClass('post_no_more_posts')))
                load_posts();
        
    
);

现在,在这些情况下,唯一的缺点是由于某种原因,您永远无法滚动到 $(document).height() - 100$('footer').offset().top 的值。如果发生这种情况,只需增加滚动到的数字即可。

您可以通过将console.logs 放入您的代码中轻松检查它,并在检查器中查看他们抛出的内容

$(window).on('scroll', function () 
    console.log($(window).scrollTop() + $(window).height());
    console.log($(document).height() - 100);
    if ($(window).scrollTop() + $(window).height()  >= $(document).height() - 100) 
        load_posts();
    
);

然后进行相应的调整;)

希望这会有所帮助 :) 如果您有任何问题,请随时提出。

【讨论】:

感谢您的回复,functions.php 部分中的某些内容破坏了整个站点,我不知道查看它会是什么,但是如果我删除该功能,该站点将再次运行。 如果我从函数中删除这些行,网站就会再次运行,所以我猜这里有错误:while ($loop-&gt;have_posts()) $loop-&gt;the_post(); $out .= '&lt;div class="small-12 large-4 columns"&gt; &lt;h1&gt;'.get_the_title().'&lt;/h1&gt; &lt;p&gt;'.get_the_content().'&lt;/p&gt; &lt;/div&gt;'; endwhile; endif; 另见:Load More Posts Ajax Button in Wordpress - fix 我现在就解决这个问题^^ 值得注意的是,如果$.ajax中的type: "POST",使用data: str,不起作用,要么改成type: "GET",要么使用data: cat : cat, pageNumber : pageNumber ,【参考方案2】:

如果我不使用任何类别,那么如何使用此代码?实际上,我想将此代码用于自定义帖子类型。

【讨论】:

嘿,这不是一个开放讨论集的经典论坛。您使用“答案”字段来询问另一个问题。下次尝试在相关答案的 cmets 中提出您的问题(“添加评论”)。 感谢您的建议。

以上是关于在 WordPress 中加载更多帖子 Ajax 按钮的主要内容,如果未能解决你的问题,请参考以下文章

我可以从缓存中加载后退按钮吗?

如何在 Wordpress 中加载 Ajax

如何在WordPress page.php,single.php中加载style.css根目录

Wordpress - 如何通过 AJAX 获取更多帖子?

AJAX 为 WordPress 帖子加载更多内容

使用 ajax 的重复帖子加载更多 wordpress