web-dev-qa-db-ja.com

もっと読み込む AJAX に WP 問い合わせ

2つの投稿を出力するためのAJAX WPクエリループを取得しようとしていますが、[さらに読み込む]ボタンを使用して次の結果ページを読み込みます。現時点では機能していないため、アプローチするための最良の方法は何ですか？

_ js _ 

  var ajaxRequest=function(){
  var filter = $('#filter');
  var page = 1; // What page we are on.
  var ppp = 3; // Post per page
        $.ajax({
            url: filter.attr('action'),
            data: filter.serialize(),
            type: 'POST',
            dataType: 'json',
            offset: (page * ppp) + 1,
            ppp: ppp,
            success: function(response) {
              page++;
              $(".card-wrap").append(response); //Post class
              $("#more_posts").attr("disabled",false);
            }
        });
    };

_ php _ 

<?php
    header("Content-type: application/json"); //Outputting as JSON for map data.
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];    
    $args = array(
        'order' => $_POST['date'],
        'post_type' => 'custom',
        'posts_per_page' => 2,
        'offset' => $offset,        
    );
    [Rest of query]
?>

_ html _ 

<a id="more_posts" href="#">Load More</a>
wp-queryjqueryajax
2
scopeak

もしあなたがワードプレスでajaxを使いたいのなら、次のステップに従う必要があります：1）最初にあなたのjsファイルをmain.jsのようにします。

2）wp_localize_script()を使ってfunctions.phpにローカライズします。

wp_enqueue_script( 'main.js', get_template_directory_uri().'/js/main.js', array( 'jquery'  ) );
    wp_localize_script( 'main.js', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php')) );

3）JavaScriptまたはjqueryコードにajaxを使用してクエリを実行させ、ajaxデータオブジェクトにaction： 'load_more_posts'のようなアクションプロパティを追加します。このアクションプロパティは、コードを実行するために同じ名前で機能します。

jQuery(function($){
    $('#load_more_posts').on('click', function(e){
        console.log('hi');
        e.preventDefault();
         var $offset = $(this).data('offset');
         console.log('var'+$offset);
        $.ajax({
            method: 'POST',
            url: ajax_object.ajax_url,
            type: 'JSON',
            data: {
                offset: $offset,
                action: 'load_more_posts'
            },
            success:function(response){
                console.log(response);
                $('#load_more_posts').data('offset', parseInt(response.data.offset));

            }
        }); 
    })
});

4）functions.php内

 add_action( 'wp_ajax_load_more_posts', 'load_more_posts' );
    add_action( 'wp_ajax_nopriv_load_more_posts', 'load_more_posts' );
    function load_more_posts(){
        global $post;
        $args = array('post_type'=>'post', 'posts_per_page'=> 2, 'offset'=> $_POST['offset']);
        $rst=[];
        $query = new WP_Query($args);
        if($query->have_posts()):
            while($query->have_posts()):$query->the_post();
                $rst[] = $post;
            endwhile;
            wp_reset_postdata();
            $offset = $_POST['offset']+2;
        endif;
        wp_send_json_success(array('post'=>$rst, 'offset'=>$offset));
    }

wp_ajax_nopriv_（action）は、ログインしていないユーザーに対して実行されます。wp_ajax_（action）は、ログインしているユーザーに対して実行されます。

あなたは好きなようにクエリレスポンスを使うことができます。これが役立つことを願っています！

3
Jitender Singh