為什麼我的 WordPress「載入更多貼文」按鈕無法使用 AJAX？

在WordPress 中使用AJAX 實作載入更多文章

簡介：

透過AJAX 動態載入貼文常見的方法- WordPress 開發中的功能之後。它允許用戶探索更多內容，而無需重新加載整個頁面，從而增強用戶體驗。本文解決了許多人在使用 AJAX 實作載入更多貼文時面臨的常見問題。

問題陳述：

使用者嘗試使用 AJAX 實現分頁，但遇到了困難，導致頁面上沒有可見的變更頁面和「載入更多」按鈕故障。儘管檢查了元素並觀察了 jQuery 中的預期行為，但帖子並未添加到頁面中。

解決方案：

分析提供的程式碼片段後，出現了一些潛在問題:

1. jQuery: $.post呼叫中的offset 屬性正在使用(page * ppp) 1 而不是（第- 1 頁）* ppp。此公式應調整為 (page - 1) * ppp 才能正確計算下一組貼文的偏移。
2. AJAX 函數： 在functions.php 中的 more_post_ajax 函數中， offset 屬性應與 paged 屬性結合使用。這可確保 WP_Query 檢索適當的貼文頁面。
3. php: 程式碼中的某處可能缺少 PHP 結束標記，這會破壞程式碼。
4. WordPress 腳本在地化： more_post_ajax 函數需要在地化為 WordPress 腳本。腳本本地化應該放在functions.js 中載入腳本之前。這允許在 JavaScript 程式碼中使用 ajax_posts 物件。

修訂的程式碼：**

範本檔案 (index.php):

// Calculate the offset for page 2 onwards
$offset = ( isset( $_GET['page'] ) && $_GET['page'] > 1 ) ? ( $_GET['page'] - 1 ) * $postsPerPage : 0;

$args = [
    'post_type'             => 'post',
    'posts_per_page'        => $postsPerPage,
    'cat'                   => 1,
    'offset'                => $offset,
];

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'                   => 1,
        'paged'                 => $page + 1, // Increase the page by 1 since offset is already calculated in the template file
    );

    $loop = new WP_Query($args);

    $out = '';

    if ($loop->have_posts()) :  while ($loop->have_posts()) : $loop->the_post();
        // Generate HTML for the post
        $out .= '<div class="small-12 large-4 columns">';
        $out .= '<h1 id="get-the-title">'.get_the_title().'</h1>';
        $out .= '<p>'.get_the_content().'</p>';
        $out .= '</div>';

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

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

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

ajax.js:

$(document).ready(function() {
    var ppp = 3;
    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(){
        $("#more_posts").attr("disabled",true);
        load_posts();
    });
});

結論：

結論：透過解決這些問題，使用AJAX加載更多帖子的功能就可以成功實現了。偏移公式和 WordPress 腳本本地化在確保正確分頁和存取 JavaScript 程式碼中的 WordPress 變數方面發揮著至關重要的作用。這些更正應該會產生一個功能齊全的「加載更多」按鈕，該按鈕可以動態地將其他帖子加載到頁面上。

以上是為什麼我的 WordPress「載入更多貼文」按鈕無法使用 AJAX？的詳細內容。更多資訊請關注PHP中文網其他相關文章！