在 WordPress 中使用 AJAX 實(shí)現(xiàn)加載更多帖子

簡(jiǎn)介：

通過(guò) AJAX 動(dòng)態(tài)加載帖子是一種常見(jiàn)的方法 - WordPress 開(kāi)發(fā)中的功能之后。它允許用戶探索更多內(nèi)容，而無(wú)需重新加載整個(gè)頁(yè)面，從而增強(qiáng)用戶體驗(yàn)。本文解決了許多人在使用 AJAX 實(shí)現(xiàn)加載更多帖子時(shí)面臨的常見(jiàn)問(wèn)題。

問(wèn)題陳述：

用戶嘗試使用 AJAX 實(shí)現(xiàn)分頁(yè)，但遇到了困難，導(dǎo)致頁(yè)面上沒(méi)有可見(jiàn)的變化頁(yè)面和“加載更多”按鈕故障。盡管檢查了元素并觀察了 jQuery 中的預(yù)期行為，但帖子并未添加到頁(yè)面中。

解決方案：

對(duì)提供的代碼片段進(jìn)行分析后，出現(xiàn)了一些潛在問(wèn)題:

1. jQuery: $.post 調(diào)用中的 offset 屬性正在使用 (page * ppp) 1 而不是（第 - 1 頁(yè)）* ppp。此公式應(yīng)調(diào)整為 (page - 1) * ppp 才能正確計(jì)算下一組帖子的偏移量。
2. AJAX 函數(shù)： 在functions.php 中的 more_post_ajax 函數(shù)中， offset 屬性應(yīng)與 paged 屬性結(jié)合使用。這可確保 WP_Query 檢索適當(dāng)?shù)奶禹?yè)面。
3. php: 代碼中的某處可能缺少 PHP 結(jié)束標(biāo)記，這會(huì)破壞代碼。
4. WordPress 腳本本地化： more_post_ajax 函數(shù)需要本地化為 WordPress 腳本。腳本本地化應(yīng)該放在functions.js 中加載腳本之前。這允許在 JavaScript 代碼中使用 ajax_posts 對(duì)象。

修訂的代碼：**

模板文件 (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 函數(shù)(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>'.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();
    });
});

結(jié)論：

通過(guò)仔細(xì)解決這些問(wèn)題，使用AJAX加載更多帖子的功能就可以成功實(shí)現(xiàn)了。偏移公式和 WordPress 腳本本地化在確保正確分頁(yè)和訪問(wèn) JavaScript 代碼中的 WordPress 變量方面發(fā)揮著至關(guān)重要的作用。這些更正應(yīng)該會(huì)產(chǎn)生一個(gè)功能齊全的“加載更多”按鈕，該按鈕可以動(dòng)態(tài)地將其他帖子加載到頁(yè)面上。

以上是為什么我的 WordPress'加載更多帖子”按鈕無(wú)法使用 AJAX？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！