WordPress の「もっと投稿を読み込む」ボタンが AJAX で動作しないのはなぜですか?

WordPress で AJAX を使用した他の投稿の読み込みを実装する

はじめに:

AJAX を介して投稿を動的に読み込むことは、一般的に求められています。 WordPress開発における機能の後。これにより、ユーザーはページ全体をリロードすることなく、より多くのコンテンツを探索できるようになり、ユーザー エクスペリエンスが向上します。この記事では、AJAX を使用して読み込みを増やす投稿を実装するときに多くの人が直面する一般的な問題について説明します。

問題の説明:

ユーザーは AJAX を使用してページネーションを実装しようとしましたが、問題が発生し、目に見える変化が生じませんでした。ページと「さらに読み込む」ボタンの誤動作。要素を検査し、jQuery で予想される動作を観察したにもかかわらず、投稿はページに追加されませんでした。

解決策:

提供されたコード スニペットを分析したところ、いくつかの潜在的な問題が明らかになりました。 :

1. jQuery: $.post 呼び出しの offset プロパティは (page * ppp) を使用しています。 (ページ - 1) * ppp の代わりに 1。次の投稿セットのオフセットを正しく計算するには、この式を (page - 1) * ppp に調整する必要があります。
2. AJAX 関数: function.php の more_post_ajax 関数では、 offset プロパティは、paged プロパティと組み合わせて使用​​する必要があります。これにより、WP_Query が投稿の適切なページを確実に取得できるようになります。
3. php: コードのどこかに PHP 終了タグが欠落している可能性があり、コードが破損する可能性があります。
4. WordPress スクリプトのローカライズ: more_post_ajax 関数は WordPress スクリプトとしてローカライズする必要があります。スクリプトのローカリゼーションは、functions.js にスクリプトをロードする前に配置する必要があります。これにより、ajax_posts オブジェクトを JavaScript コード内で使用できるようになります。

改訂コード:**

テンプレート ファイル (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>'.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 中国語 Web サイトの他の関連記事を参照してください。