如何在 WordPress 中實現 Ajax 支援的「加載更多」貼文？

在WordPress 中透過Ajax 載入更多文章

在WordPress 中實作「載入更多」按鈕來動態載入貼文需要PHP 和JavaScript。雖然您已經概述了特定的方法，但可能還有其他因素會影響程式碼的功能或效率。這是修訂和增強的解決方案：

HTML 標記：

<div>
<p><strong>函數PHP 檔案：</strong></p>
<pre class="brush:php;toolbar:false">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');

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

jQuery功能：

var ppp = 3; // Posts per page
var page = 5; // Current page number, starting from 1

$('#more_posts').click(function() {
    $('#more_posts').attr('disabled', true);
    var offset = (page * ppp) + 1;

    $.post(
        ajax_posts.ajaxurl,
        {
            action: 'more_post_ajax',
            offset: offset,
            ppp: ppp,
        }
    ).success(function(posts) {
        page++;
        $('#ajax-posts').append(posts);
        $('#more_posts').attr('disabled', false);
    });
});

其他注意事項：

• 類別過濾：
您可以通過添加資料來合併類別過濾屬性到帶有類別ID 的「載入更多」按鈕。然後，在 PHP 程式碼中，從 $_POST 陣列中檢索類別 ID，並在查詢參數中包含「cat」參數。
• 無限載入：
對於無限滾動，您可以使用當使用者向下捲動頁面時，jQuery 的滾動事件會自動載入貼文。一種方法是當頁面底部到視窗頂部的距離小於閾值（例如 100 像素）時載入貼文。
• 載入指示器：
考慮新增載入微調器或指示器，以便在載入貼文時向使用者提供視覺回饋。
• 錯誤處理：
確保正確的錯誤處理PHP 和 JavaScript 程式碼都用於處理 Ajax 請求或後製期間可能發生的任何潛在錯誤。