在 WordPress 中加載更多帖子 Ajax 按鈕

Question

我已經瀏覽了舊問題並嘗試了許多似乎可以做到這一點的不同方法。 我最接近的工作是這里的這個： 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>

任何人都可以看到我遺漏的東西或能夠提供幫助嗎？

Answer 1

更新 24.04.2016。

我已經在我的頁面https://madebydenis.com/ajax-load-posts-on-wordpress/上創建了關於在二十十六主題上實現這個的教程，所以請隨時查看:)

編輯

我已經在 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'] : '';

而不是 8，你會放$cat 。 這將在$_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.log放在代碼中來輕松檢查它，並在檢查器中查看它們拋出的內容

$(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();
    }
});

並相應地調整;)

希望這會有所幫助:) 如果您有任何問題，請提問。

Answer 2

如果我沒有使用任何類別，那么如何使用此代碼？ 實際上，我想將此代碼用於自定義帖子類型。