web-dev-qa-db-fra.com

Ajax Charger plus de messages dans la page Catégorie

Je développe un thème sur lequel j'ai besoin de charger plus de messages avec ajax. Actuellement, lorsque je clique sur Charger plus dans les pages de catégorie, tous les articles sont en cours de chargement. Le category.php ressemble à ceci:

>> Design <<

    <?php $counter = 0; ?>
              <?php while ( have_posts() ) : the_post(); ?>
              <?php  $style = ($counter % 2 == 0) ? 'col1 masonry-item ' :  'col2 masonry-item '; ?>
              <article id="post-<?php the_ID(); ?>" class="single-article post <?php echo $style; ?>" >
                  <div class="flip">
                    <a href="<?php the_permalink() ?>" rel="bookmark">
                      <?php if (has_post_thumbnail( $post->ID) ) { ?>
                       <?php if ($counter % 2 == 0) {
                        $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'masonry_thumb_large');
                       } else {
                        $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'masonry_thumb_small');
                       } ?>
                      <img src="<?php echo $image[0]; ?>" alt="" />
                      <?php } ?>
                    </a>          
                  </div>
                  <div class="post-meta click">
                    <a href="<?php echo the_permalink() ?>" rel="bookmark">
                      <div class="grid-text">
                        <h2 class="masonry-cat"><?php echo the_category('/ ') ?> &#124; N&#186; <?php the_field('sub_page_article_number'); ?> </h2>
                        <h2><?php echo get_the_title(); ?></h2>
                              <?php the_excerpt(); ?>
                              <a href="<?php echo the_permalink() ?>" class="click-more">More</a>
                      </div>
                    </a>
                  </div>
              </article>

                  <?php $counter++; endwhile;?>

    </div> <!-- end of postslist -->
    <a class="load_more" data-nonce="<?php echo wp_create_nonce('load_posts') ?>" href="javascript:;"><span>&#43;</span> Load More <span>&#43;</span></a>
</div>`

Une fois que vous avez cliqué sur le bouton "Charger plus", il appelle le fichier /functions.php qui contient le code suivant:

add_action( "wp_ajax_load_more", "load_more_func" );
function load_more_func() {
if ( !wp_verify_nonce( $_REQUEST['nonce'], "load_posts" ) ) {
  exit("No naughty business please");
}
$offset = isset($_REQUEST['offset'])?intval($_REQUEST['offset']):0;
$posts_per_page = isset($_REQUEST['posts_per_page'])?intval($_REQUEST['posts_per_page']):10;
$post_type = isset($_REQUEST['post_type'])?$_REQUEST['post_type']:'post';
ob_start(); 


$args = array(
      'post_type'=>$post_type,
    'offset' => $offset,
    'posts_per_page' => $posts_per_page,
    'orderby' => 'date',
    'order' => 'DESC'
      );
$posts_query = new WP_Query( $args );
if ($posts_query->have_posts()) {
  $result['have_posts'] = true; 
  $counter = 0;
  while ( $posts_query->have_posts() ) : $posts_query->the_post(); ?>

  <?php  $style = ($counter % 2 == 0) ? 'col1 masonry-item ' :  'col2 masonry-item '; ?>
  <article id="post-<?php the_ID(); ?>" class="single-article post masonry-brick <?php echo $style; ?>" >
    <div class="flip">
      <a href="<?php the_permalink() ?>" rel="bookmark">
        <?php if (has_post_thumbnail( $post->ID) ) { ?>
          <?php if ($counter % 2 == 0) {
          $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'masonry_thumb_large');
          } else {
          $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'masonry_thumb_small');
          } ?>
        <img src="<?php echo $image[0]; ?>" alt="" />
        <?php } ?>
      </a>          
    </div>
    <div class="post-meta click">
      <a href="<?php echo the_permalink() ?>" rel="bookmark">
        <div class="grid-text">
          <h2 class="masonry-cat"><?php echo the_category('/ ') ?> &#124; N&#186; <?php the_field('sub_page_article_number'); ?> </h2>
          <h2><?php echo get_the_title(); ?></h2>
            <?php the_excerpt(); ?>
            <a href="<?php echo the_permalink() ?>" class="click-more">More</a>
        </div>
      </a>
    </div>
</article>

  <?php $counter++; endwhile;
$result['html'] = ob_get_clean();

else {
$result['have_posts'] = false;


if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
        $result = json_encode($result);
        echo $result; 
    }
else { 
        header("Location: ".$_SERVER["HTTP_REFERER"]);
    }
die();

}

Le javascript est:

$('.load_more:not(.loading)').live('click',function(e){
e.preventDefault();
var $load_more_btn = $(this);
var post_type = 'post'; 
var offset = $('#posts_list .single-article').length;
var nonce = $load_more_btn.attr('data-nonce');
$.ajax({
    type : "post",
    context: this,
    dataType : "json",
    url : headJS.ajaxurl,
data : {action: "load_more", offset:offset, nonce:nonce, post_type:post_type, posts_per_page:headJS.posts_per_page},
    beforeSend: function(data) {
        $load_more_btn.addClass('loading').html('+ Loading... +');
        },
        success: function(response) {
                if (response['have_posts'] == 1){
                    var $newElems = $(response['html'].replace(/(\r\n|\n|\r)/gm, '')).css({ opacity: 0 });
                    $newElems.imagesLoaded(function(){
                            $newElems.animate({ opacity: 1 });
                            $('#posts_list').append( $newElems ).masonry( 'appended', $newElems); 
                            $load_more_btn.removeClass('loading').html('+ Load More +');
                        });
                    } else {
                        $load_more_btn.removeClass('loading').addClass('end_of_posts').html('<span>End of posts</span>'); 
                    }
                }
    });

J'ai essayé d'interroger les messages différemment, mais rien n'a fonctionné. Toute aide serait grandement appréciée.

postsphpjqueryajaxjavascript
6
Ranjan Agarwal

Vos paramètres de requête ne contiennent aucun arguments de catégorie . Vous devez transmettre et définir cat ou category_name ainsi que le type de publication, le décalage et les publications par page. Vous pouvez obtenir l'ID de la catégorie actuelle via get_queried_object() :

$queried_object = get_queried_object();  
$cat_id = $queried_object->term_id;

Affichez et récupérez la valeur quelque part dans votre modèle de catégorie, ou mieux, lorsque vous mettez en file d'attente votre javascript ajax , vérifiez si is_category et utilisez wp_localize_script() pour transmettre ces données à votre script.

1
Milo