WordPress に Ajax を使用して「もっと投稿を読み込む」ボタンを実装するにはどうすればよいですか?

WordPress の「その他の投稿 Ajax ボタンを読み込む」

Ajax を介してさらに投稿を読み込むことは、大量のコンテンツを含む Web サイトにとって一般的なニーズです。これにより、ユーザーはページ全体を更新せずに、コンテンツの複数ページを閲覧できるようになります。この記事では、WordPress で Ajax を使用して「他の投稿を読み込む」ボタンを実装する手順について説明します。

テンプレート コードの作成

まず、 「他の投稿を読み込む」ボタンを表示するテンプレート ファイルを作成します。この例では、index.php を使用します。次のコードをテンプレートに追加します:

<div>

他の投稿をロードする関数

次に、Ajax 呼び出しを処理する関数を function.php ファイルに作成します。より多くの投稿を読み込むため。この関数は、現在のページとページごとの投稿数に基づいて、次の一連の投稿をクエリします。

function more_post_ajax(){
    // Get parameters from the Ajax request
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];

    // Prepare query arguments
    $args = [
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'offset' => $offset,
    ];

    // Perform the query
    $loop = new WP_Query($args);

    // Output the posts
    while ($loop->have_posts()) : $loop->the_post(); 
        the_content();
    endwhile;
    exit; 
}

// Hook the function to the WordPress Ajax action
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');

jQuery Ajax Script

フッター内で、 Ajax ボタン機能を処理する次の jQuery スクリプトを含めます:

<script type="text/javascript">
    jQuery(document).ready( function($) {
        // Ajax post endpoint
        var ajaxUrl = "<?php echo admin_url('admin-ajax.php')?>";

        // Page counter
        var page = 5; 
        // Posts per page
        var ppp = 3; 

        // Event handler for the "Load More Posts" button
        $("[id^=more_posts]").on("click", function() {
            $("[id^=more_posts]").attr("disabled", true);

            $.post(ajaxUrl, {
                action: "more_post_ajax",
                offset: (page * ppp) + 1,
                ppp: ppp
            })
            .success(function(posts) {
                page++;
                $("#ajax-posts").append(posts);
                $("[id^=more_posts]").attr("disabled", false);
            });
        });
    });
</script>

カスタマイズFunction

提供されたコードは基本的な例です。次のような特定の要件に合わせてカスタマイズできます。

• クエリ パラメータ: クエリ引数にパラメータを追加して、特定の基準 (カテゴリ、カテゴリなど) に基づいて投稿をフィルタリングします。タグ).
• ページネーション: ページ間を移動するためのページネーション リンクを追加します。 photos.posts.
• 無限スクロール: ユーザーがページを下にスクロールすると、スクロール イベントを使用してさらに投稿を自動的に読み込みます。

次の手順に従うことで、次のことができます。 Ajax を使用して WordPress に機能的な「他の投稿を読み込む」ボタンを実装し、大規模なコンテンツ セットを閲覧する訪問者のユーザー エクスペリエンスを向上させます。

以上がWordPress に Ajax を使用して「もっと投稿を読み込む」ボタンを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。