У меня есть код на моей странице категорий wordpress, где, если они нажимают на графику, тогда загружаются больше сообщений – в этом случае 15.
Он отлично работает в первый раз, когда он нажат. Однако, как только он снова нажат, он не добавляет следующий набор сообщений (т. Е. Третий), но приносит второй.
Я понимаю, что проблема заключается в смещении – то есть. где он начинается. Таким образом, при первом нажатии сдвиг должен быть 16, второй – 31, третий – 46 и т. Д.
Однако, когда я испытываю трудности, проходит через это смещение.
Это js:
$('#do-show-more-posts').live('click', function(){ if( $(this).data("o-set")){ $offset=$(this).data("o-set"); }else { $offset=16 ; //assume this is 16 initially } var post_type = $(this).attr('post-type'); var parent = $(this).attr('parent-id'); var offset = $('.article').size(); $(this).fadeTo(0,0); $('.load-more-posts-wrapper .loader').addClass('show'); $.post( ajaxurl, { action: 'load_more_posts', post_type : post_type, parent : parent, offset : offset }, function(data){ $load_more = $('.load-more-posts-wrapper'); $load_more.find('.loader').removeClass('show'); $load_more.find('.link').removeAttr('style'); var load_more_button = '<div class="load-more-posts-wrapper">' + $load_more.html() + '</div>'; $load_more.remove(); if( data == '' || data == 'udefined' || data == 'No More Posts' || data == 'No $args array created' ){ data = ''; load_more_button = '<div class="load-more-posts-wrapper">There are no more posts.</div>'; setTimeout("$('.load-more-posts-wrapper').fadeTo(1800,0)", 8000 ); } $('#content').append( data ); $('#content').append( load_more_button ); $(this).data("o-set",$offset); }); }); Это PHP:
function load_more_posts() { if( isset($_POST['post_type']) && $_POST['post_type'] == 'publication' ){ $args = array( 'offset' => $_POST['offset'], 'orderby' => 'post_date', 'order' => 'DESC', 'post_type' => 'article', 'post_status' => 'publish', 'meta_query' => array( array( 'key' => 'related-publication', 'value' => $_POST['parent'], 'meta_compare' => 'IN' ) ) ); } else if(isset($_POST['post_type']) && $_POST['post_type'] == 'category') { $args = array( 'cat' => $_POST['parent'], 'offset' => $_POST['offset'], 'post_type' => array('post','article','publication') ); } else { // print_r($args); } $Query = new WP_Query( $args ); //print_r($Query); if ( $Query->have_posts() ) { while ( $Query->have_posts() ) { $Query->the_post(); get_template_part('loop', 'xxxry'); } } else { // print_r($args); } exit; }
У меня возникла идея создать сеанс, содержащий значение для смещения, хотя это, похоже, не работает. Кроме того, я не уверен, как удалить его, если кто-то вернется на эту страницу категории.
Код, который я использовал, был следующим:
if (isset($_SESSION['posts_start'])){ $_POST['offset']=$_SESSION['posts_start']+15; $_SESSION['posts_start']=$_POST['offset']; } else { $_POST['offset']=15; $_SESSION['posts_start']=$_POST['offset']; }
Я положил это в начале функции php. Кажется, он не зарегистрировал добавление 15, если уже был сеанс.
Вместо использования смещения вы можете использовать posts_per_page и paged параметры аргументов WP_Query.
function load_more_posts() { //... $args = array( 'posts_per_page' => $_POST['offset'], 'paged' => $_POST['page'], 'orderby' => 'post_date', 'order' => 'DESC', 'post_type' => 'article', 'post_status' => 'publish', 'meta_query' => array( array( 'key' => 'related-publication', 'value' => $_POST['parent'], 'meta_compare' => 'IN' ) ) ); //... }
И в вашем JS:
//EDIT2: (global page variable $(document).ready(function(){ //... var page = 1; //don't redefine this variable each time you click. $('#do-show-more-posts').live('click', function(){ //... $.post( ajaxurl, { action: 'load_more_posts', post_type : post_type, parent : parent, offset : $offset, page : page++ }, function(data){ //EDIT: --------------------------------------------------------------------------------------------------- ^ $load_more = $('.load-more-posts-wrapper'); $load_more.find('.loader').removeClass('show'); $load_more.find('.link').removeAttr('style'); var load_more_button = '<div class="load-more-posts-wrapper">' + $load_more.html() + '</div>'; $load_more.remove(); if( data == '' || data == 'udefined' || data == 'No More Posts' || data == 'No $args array created' ){ data = ''; load_more_button = '<div class="load-more-posts-wrapper">There are no more posts.</div>'; setTimeout("$('.load-more-posts-wrapper').fadeTo(1800,0)", 8000 ); } $('#content').append( data ); $('#content').append( load_more_button ); $(this).data("o-set",$offset); }); } //... }