web-dev-qa-db-ja.com

Ajaxハンドラーを使用したWP_Queryでも同じ投稿が返されます

私は私をハゲatmにしている問題を抱えている。いくつかのクエリを処理して投稿を返すループを処理するajax呼び出しがあります。

これまでのところ非常に優れていますが、ユーザーが初めてページを見たときには10件の投稿をロードする必要があります。その後、ボタンをクリックしてさらに5件をリクエストします。

ここまでは順調ですね。

しかし、さらに5つの投稿をリクエストすると、最初の5つの投稿が再び表示されます。

私のバッチループ

<?php   
// Our include  
define('WP_USE_THEMES', false);  
require_once('../../../wp-load.php');  

// Our variables  
$posts = (isset($_GET['numPosts'])) ? $_GET['numPosts'] : 0;  
$page = (isset($_GET['pageNumber'])) ? $_GET['pageNumber'] : 0;  
$category = (isset($_GET['category_name'])) ? $_GET['category_name'] : 0;  

var_dump($posts);

$args = array(  
    'posts_per_page' => $posts,
    'category_name'  => $category, 
    'post_status'    => 'publish',
    'orderby'        => 'date',
    'order'          => 'DESC',
    'paged'          => $page 
);

query_posts($args);  

// $query = new WP_query($args);

// our loop  
if (have_posts()) {  

    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts($args);

       while (have_posts()){  
              the_post();  

              get_template_part( 'thumbs', get_post_format() );  
       }  
} 

// unset($page, $posts, $category);

// wp_reset_postdata();
wp_reset_query();
?>

誰かがimが間違っているのを見ますか？

編集：

バッチハンドラ

 function _batchhandler() { 
        var getamount = localStorage.getItem('amount'); 

        console.log('amount of posts to retrive ' + JSON.parse(getamount));

        // Ajax call
        $.ajax({
            type: 'GET',
            data: {
                posts: getamount, 
                page: page,
                category: 'work'
            },
            dataType: 'html',
            url: 'http://dev.xxx.se/wp-content/themes/xxx/batch.php',
            beforeSend: function() {
                _setHeader;
                if( page != 1 ) {
                    console.log('Loading');
                    // Show the preloader
                    $('body').prepend('<div class="preloader"><span class="rotate"></span></div>');
                }
                // If we reach the end we hide the show more button
                if( page >= total ) {
                    $('.load').hide();
                }
            },
            success: function(data) {
                console.log(page);  
                var scroll = ($('.thumb').height() * posts);
                // If thumbs exist append them
                if( data.length ) { 
                    // Append the data
                    $('#batch').append(data);

                    // Remove the crappy width and height attrs from the image * Generated by WP *
                    $('img').removeAttr('height').removeAttr('width');

                    // Animate each new object in a Nice way
                    (function _showitem() {
                        $('#batch .thumb:hidden:first').addClass('show', 80, _showitem);

                        // On the last request do load any more
                        loading = false;  
                    })();

                    // Remove the preloader
                    $('.preloader').fadeOut(200, function() {
                        $('.preloader').remove();   
                    });
                }
                // return false;
            },
            complete: function() {
                // Delete storage
                localStorage.clear();

                // Update the scroller to match the updated content length
                if (scroller)
                    setTimeout("scroller.refresh()", 300);

                // Initalize the load more button
                _clickhandler();
            },
            error: function() {
                console.log('No page found');
            }
        });
    }

そして私のもっと多くのボタン機能をロードする

 $('.load').on('click', function(event) {
            event.preventDefault(); 
            // Delete storage
            localStorage.clear();

            if(!loading) {
                loading = true;
                // Increase our pagenumber per click
                page++;
                count++;
                // Remove preloader
                $('.preloader').remove();

                setTimeout(function() {
                    $('#batch').css({
                        '-webkit-transform' : 'translateY(-' + ($('#batch li').outerHeight() * count)  + 'px)'
                    });
                }, 30);

                // Clear storage and set a new
                localStorage.setItem('amount', JSON.stringify(amount.medium));
                var getamount = localStorage.getItem('amount');

                // Send the request to the handler                  
                _batchhandler(page);    
            }      

        });

最初の10件（1-10件）の投稿が正常にロードされましたが、最初の[load more]をクリックすると次の5件の結果が得られますが、結果は最初の（5-10件）のロードです。 「もっと読み込む」をもう一度クリックすると、正しい結果が得られます。

postswp-queryjqueryajax
1
Jonas

警告、私は今これを実際にテストすることはできません。しかし、私はあなたのコードから改善できると思うことがいくつかあります。

最初に codex または を使用してajaxを使用する際のヒント を読むと、ajaxコールバック関数を設定できます。 t WordPressのロード関数をブートストラップしなければならないファイルを指している。

あなたのスクリプトはすべてJSファイルの中にあり、正しくエンキューされていると仮定します。

// embed the javascript file that makes the AJAX request
wp_enqueue_script( 'wpa-95258-ajax-request', plugin_dir_url( __FILE__ ) . 'js/ajax.js', array( 'jquery' ) );

// declare the URL to the file that handles the AJAX request (wp-admin/admin-ajax.php)
wp_localize_script( 'wpa-95258-ajax-request', 'wpa-95258-ajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

wp_localize_scriptを使用して、スクリプトオブジェクトにいくつかの変数を渡すことができます。それをスクリプトで利用できるようにします。これを.ajax URLパラメータに使用します。 WordPressが探すのでactionパラメータも必要です。

// this hook is fired if the current viewer is not logged in
do_action( 'wp_ajax_nopriv_' . $_REQUEST['action'] );

// if logged in:
do_action( 'wp_ajax_' . $_POST['action'] );

そのため、後でそれを使用して、コールバック関数を任意のAjaxアクションにアタッチすることができます。最初に私はあなたの.ajaxがアクションを起こし、そしてWordPressのajax URLを使うように調整しました：

function _batchhandler() { 
    var getamount = localStorage.getItem('amount'); 

    console.log('amount of posts to retrive ' + JSON.parse(getamount));

    // Ajax call
    $.ajax({
        type: 'GET',
        data: {
            posts: getamount, 
            page: page,
            category: 'work',
            action: 'batchhandler' // use this to add a callback
        },
        dataType: 'html',
        url: wpa-95258-ajax.ajaxurl, //from localize script
        beforeSend: function() {
            _setHeader;
            if( page != 1 ) {
                console.log('Loading');
                // Show the preloader
                $('body').prepend('<div class="preloader"><span class="rotate"></span></div>');
            }
            // If we reach the end we hide the show more button
            if( page >= total ) {
                $('.load').hide();
            }
        },
        success: function(data) {
            console.log(page);  
            var scroll = ($('.thumb').height() * posts);
            // If thumbs exist append them
            if( data.length ) { 
                // Append the data
                $('#batch').append(data);

                // Remove the crappy width and height attrs from the image * Generated by WP *
                $('img').removeAttr('height').removeAttr('width');

                // Animate each new object in a Nice way
                (function _showitem() {
                    $('#batch .thumb:hidden:first').addClass('show', 80, _showitem);

                    // On the last request do load any more
                    loading = false;  
                })();

                // Remove the preloader
                $('.preloader').fadeOut(200, function() {
                    $('.preloader').remove();   
                });
            }
            // return false;
        },
        complete: function() {
            // Delete storage
            localStorage.clear();

            // Update the scroller to match the updated content length
            if (scroller)
                setTimeout("scroller.refresh()", 300);

            // Initalize the load more button
            _clickhandler();
        },
        error: function() {
            console.log('No page found');
        }
    });
}

アタッチするフックができたので、ブートストラップローダーなしでコールバック関数を構築できます。私はまたquery_posts()を取り除くことをお勧めします。これはクエリにとっては厄介なことであり、new WP_Queryを使用することが一般にここで推奨されています。

Batchloop.phpを代わりにコールバック関数になるように調整しました。

function wp_ajax_batchhandler_callback(){

    // Our variables  
    $posts = (isset($_GET['numPosts'])) ? $_GET['numPosts'] : 0;  
    $page = (isset($_GET['pageNumber'])) ? $_GET['pageNumber'] : 0;  
    $category = (isset($_GET['category_name'])) ? $_GET['category_name'] : 0;  

    var_dump($posts);

    $args = array(  
        'posts_per_page' => $posts,
        'category_name'  => $category, 
        'post_status'    => 'publish',
        'orderby'        => 'date',
        'order'          => 'DESC',
        'paged'          => $page 
    );

    $ajax_query = new WP_query($args);

    // our loop  
    if ($ajax_query->have_posts()) {  

        while ($ajax_query->have_posts()){  
            $ajax_query->the_post();  
            get_template_part( 'thumbs', get_post_format() );  
        }  
    } 

    // unset($page, $posts, $category);

    wp_reset_postdata();

}
add_action( 'wp_ajax_nopriv_batchhandler', 'batchhandler_callback' ); //logged out users
add_action( 'wp_ajax_batchhandler', 'batchhandler_callback' ); //logged in users

私が言ったように、私はこれをテストしませんでした、しかしそれはあなたが使っているように見えます：

$page = (isset($_GET['pageNumber'])) ? $_GET['pageNumber'] : 0;

クエリで使用しているページ番号を取得します。ただし、.ajax関数でpageNumberを送信していないので、適切なページ区切りが表示されないと思います。しかし、WordPressでajax呼び出しを行うための適切な方法を習得したら、pageNumber変数を渡すことでページ付けを修正できると思います。

1
helgatheviking