Intereting Posts

Lazy Load с использованием разбиения на страницы WP_Query

Я подумывал использовать WP_Query на страницы WP_Query , чтобы сделать WP_Query ленивую загрузку. есть ли способ использовать разбиение на страницы WP_Query для ленивой загрузки?

Скажем, например, я должен загрузить 24 сообщения в первой загрузке, и когда прокрутка достигнет дна, она будет ленить загружать следующие 24 сообщения.

Это возможно?

Взгляните на этот пример. Для этого требуется немного адаптации, но в целом он делает то, что вы хотите – он загружает X количество следующих сообщений, если пользователь нажимает кнопку, которая должна быть ниже загруженных сообщений.

Если вы хотите автоматически загружать больше сообщений, если пользователь прокручивается вниз, просто замените событие click другим кодом, который следит за прокруткой. В Интернете есть много примеров.

  • Следите за jQuery('some-html-element')-s , не забудьте переименовать эти имена элементов или изменить свой собственный HTML чтобы они соответствовали
  • Количество сообщений: вы можете сделать его видимым, если вы хотите, чтобы пользователи отображали общее количество сообщений или использовали opacity CSS чтобы скрыть его. Он все еще должен быть где-то, чтобы иметь место для хранения ценности

Это касается вашего основного .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(); }); 

Это относится к функциям.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(); } 

Для этого я использовал бесконечный прокрутки.

Вот что я использовал в 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