web-dev-qa-db-ja.com

WP_Queryページ付けを使用した遅延ロード

私はカスタム遅延ロードをするためにWP_Queryのページ付けを使うことを考えていました。遅延ロードのためにWP_Queryのページ付けを利用する方法はありますか？

たとえば、最初のロードで24件の投稿をロードする必要があり、スクロールが一番下に達すると、次の24件の投稿を遅延ロードします。

これは可能ですか？

postswp-querypagination
1
karlo jay bueno

この大まかな例を見てください。これには少し調整が必要ですが、全体としてはあなたが望むことをします - ユーザーが既にロードされている投稿の下にあるべきボタンをクリックすると、X個の次の投稿をロードします。

ユーザーが下にスクロールしたときに自動的に追加の投稿をロードしたい場合は、clickイベントをスクロールを見据えた他のコードに置き換えてください。オンラインでたくさんの例があります。

  • jQuery('some-html-element')-sを見張って、これらの要素名を変更するか、あなた自身のHTMLname__をそれらが合うように変更することを忘れないでください
  • 総投稿数：ユーザーに総投稿数を表示させる場合、またはCSSopacityname__を使用して非表示にする場合は、表示させることができます。値を格納する場所を確保するためには、まだどこかにある必要があります。

これはあなたのメインの.jsに行きます：

この関数はすべてのDOM操作とajaxを処理します。それはあなたが望むけれどもそれを呼ぶことができる。

//ajaxLock is just a flag to prevent double clicks and spamming
var ajaxLock = false;

if( ! ajaxLock ) {

    function ajax_next_posts() {

        ajaxLock = true;

        //How many posts there's total
        var totalPosts = parseInt( jQuery( '#total-posts-count' ).text() );
        //How many have been loaded
        var postOffset = jQuery( '.single-post' ).length;
        //How many do you want to load in single patch
        var postsPerPage = 24;

        //Hide button if all posts are loaded
        if( totalPosts < postOffset + ( 1 * postsPerPage ) ) {

            jQuery( '#more-posts-button' ).fadeOut();
        }

        //Change that to your right site url unless you've already set global ajaxURL
        var ajaxURL = 'http://www.my-site.com/wp-admin/admin-ajax.php';

        //Parameters you want to pass to query
        var ajaxData = '&post_offset=' + postOffset + '&action=ajax_next_posts';

        //Ajax call itself
        jQuery.ajax({

            type: 'get',
            url:  ajaxURL,
            data: ajaxData,
            dataType: 'json',

            //Ajax call is successful
            success: function ( response ) {

                //Add new posts
                jQuery( '#posts-container' ).append( response[0] );
                //Update the count of total posts
                jQuery( '#total-posts-count' ).text( response[1] );

                ajaxLock = false;
            },

            //Ajax call is not successful, still remove lock in order to try again
            error: function () {

                ajaxLock = false;
            }
        });
    }
}

これはあなたのメインの.jsに行きます：

これはボタンで上記の関数を呼び出す方法の例です、これは私の意見ではより良いです、彼/彼女がもっと見たいのであればユーザーが選択できます..

//Load more posts button
jQuery( '#more-posts-button' ).click( function( e ) {

    e.preventDefault(); 

    ajax_next_posts(); 

});

これはfunctions.phpに行くかmu-pluginを作成してください：

これはあなたのサーバーで "走る"関数です、ajaxはこれを呼んでいます、それはそれがものでありそして結果を送り返します。

//More posts - first for logged in users, other for not logged in
add_action('wp_ajax_ajax_next_posts', 'ajax_next_posts');
add_action('wp_ajax_nopriv_ajax_next_posts', 'ajax_next_posts');

function ajax_next_posts() {

    //Build query
    $args = array(
        //All your query arguments
    );

    //Get offset
    if( ! empty( $_GET['post_offset'] ) ) {

        $offset = $_GET['post_offset'];
        $args['offset'] = $offset;

        //Also have to set posts_per_page, otherwise offset is ignored
        $args['posts_per_page'] = 24;
    }

    $count_results = '0';

    $query_results = new WP_Query( $args );

    //Results found
    if ( $query_results->have_posts() ) {

        $count_results = $query_results->found_posts;

        //Start "saving" results' HTML
        $results_html = '';
        ob_start();

        while ( $query_results->have_posts() ) { 

            $query_results->the_post();

            //Your single post HTML here
        }    

        //"Save" results' HTML as variable
        $results_html = ob_get_clean();  
    }

    //Build ajax response
    $response = array();

    //1. value is HTML of new posts and 2. is total count of posts
    array_Push ( $response, $results_html, $count_results );
    echo json_encode( $response );

    //Always use die() in the end of ajax functions
    die();  
}
2
N00b

私はこれに無限スクロールを使っています。

これが私がscript.jsで使ったことです

$(function(){
    var $container = $('#ms-container');
    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector : '.ms-item',


      });
    });
//var templateUrl = object_name.templateUrl;
//var src =  "'"+templateUrl+"/images/loader.gif' ";

$container.infinitescroll({
      navSelector  : '#navigation',    // selector for the paged navigation 
      nextSelector : '#navigation a',  // selector for the NEXT link (to page 2)
      itemSelector : '.ms-item', 


      loading: {
          finishedMsg: $('<div class="finmsg">No More Posts.</div>'),
          msgText: '',
          img: '',
          speed: 0
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true ); 
        });
      }
    );
});

私は石積みを使用しているので、あなたはこれを微調整する必要があるかもしれません。アーカイブページのコンテナ全体は

<div id="ms-container">

それゆえ：

var $container = $('#ms-container');

私のアーカイブページに表示される個々の投稿ごとの私のコンテナは次のとおりです。

<div class="ms-item col-sm-4">

それゆえ：

itemSelector : '.ms-item',

これは私がアーカイブページの一番下のページネーションとして使っているものです：

      <div id ="navigation" class="pagination pull-left prevnext">
      <ul class="list-inline clearfix">
        <li class="text-left pull-left"><?php previous_posts_link( '<span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span> Previous' );?></li>
        <li class="text-right pull-right"><?php next_posts_link( 'Next <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>'); ?></li>
      </ul>
      </div>

私が正しく覚えているならば、これは私がそれをする方法に関する情報を得たところです： https://stackoverflow.com/questions/9766515/imagesloaded-method-not-working-with-jquery-masonry-and-infinite-scroll

0
MrFox