ホームページ > バックエンド開発 > PHPチュートリアル > Ajax を利用した「もっと読み込む」投稿を WordPress に実装するにはどうすればよいですか?

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

Linda Hamilton
リリース: 2024-12-01 09:59:10
オリジナル
350 人が閲覧しました

How to Implement Ajax-Powered

WordPress で Ajax 経由でさらに投稿を読み込む

WordPress に投稿を動的に読み込むための「さらに読み込む」ボタンを実装するには、PHP とJavaScript。特定のアプローチの概要を説明しましたが、コードの機能や効率に影響を与える追加の要因がある可能性があります。改訂され強化されたソリューションは次のとおりです。

HTML マークアップ:

<div>
ログイン後にコピー

関数 PHP ファイル:

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' パラメータを含めます。
  • Infinite Load: 無限スクロールの場合は、次を使用できます。ユーザーがページを下にスクロールすると、投稿を自動的に読み込む jQuery のスクロール イベント。 1 つの方法は、ページの下部からビューポートの上部までの距離がしきい値 (100 ピクセルなど) 未満のときに投稿を読み込むことです。
  • 読み込みインジケーター: の追加を検討してください。投稿の読み込み中にユーザーに視覚的なフィードバックを提供する読み込みスピナーまたはインジケーター。
  • エラー処理: を確認してくださいAjax リクエストまたは後処理中に発生する可能性のある潜在的なエラーを処理するために、PHP コードと JavaScript コードの両方で適切なエラー処理を行います。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート