月別アーカイブをスクロールで月ごとに読み込み

2019.02.27

月別アーカイブをスクロールで月ごとに読み込みさせる方法です。

例えば今月の記事一覧をページを読み込んだ時表示しておき、最後までスクロールすると、
先月の記事一覧を読み込むといった感じです。

■index.phpなど

<div class="grid">
      <?php
      $year = date('Y');
      $month = date('m');
      $day = date('d');
      $paged = (int) get_query_var('paged');
      $paged = get_query_var('paged') ? get_query_var('paged') : 1;
      $args = array(

      	'post_type' => 'post',
        'date_query' => array(
           array(
             'year'  => $year,
             'month' => $month,
             'day'   => $day,
           ),
        ),

      );
      $the_query = new WP_Query($args);
      if ( $the_query->have_posts() ) :
        while ( $the_query->have_posts() ) : $the_query->the_post();
      ?>
      <article class="entry item w2 twitter">
        <div class="item-content">
          <div class="sns-mark"></div>
          <?php echo $icon_thats; ?>
          <figure class="entry-thumb">
            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(300,200) ); ?></a>
          </figure>
          <div class="entry-body">
            <time class="entry-time" datetime=""><?php the_time('Y.m.d'); ?></time>
            <h3 class="entry-title"><a href="#"><?php the_title(); ?></a></h3>
          </div>
        </div>
      </article>
      <?php endwhile; endif; ?>
      <!-- /entry -->
    </div>

<?php

$year = date('Y');

$month = date('m');

$day = date('d');

$paged = (int) get_query_var('paged');

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

$args = array(

'post_type' => 'post',

'date_query' => array(

array(

'year' => $year,

'month' => $month,

'day' => $day,

);

$the_query = new WP_Query($args);

if ( $the_query->have_posts() ) :

while ( $the_query->have_posts() ) : $the_query->the_post();

<?php echo $icon_thats; ?>

</figure>

</div>

</article>

<?php endwhile; endif; ?>

</div>

■js

var href = today = new Date(),
         current_year = today.getFullYear(),
         current_month = today.getMonth() + 1;

$(function() {
    $(window).scroll(function(ev) {

        var $window = $(ev.currentTarget),
            height = $window.height(),
            scrollTop = $window.scrollTop(),
            documentHeight = $(document).height();
        if (documentHeight === height + scrollTop) {
          current_month--;

          if(current_month == 0){
            current_year--;
            current_month = 12;
          }
          console.log(current_year);
          console.log(current_month);


          jQuery.ajax({
              type: 'post',
              
              data: {
                'today':today,
                'year':current_year,
                'current_month':current_month
              },
              success: function(data) {
                  data = JSON.parse(data);
                  jQuery(".section.container").append(data['html']);
              }
          });

          return false;
        }
    });
});

var href = today = new Date(),

current_year = today.getFullYear(),

current_month = today.getMonth() + 1;

$(function() {

$(window).scroll(function(ev) {

var $window = $(ev.currentTarget),

height = $window.height(),

scrollTop = $window.scrollTop(),

documentHeight = $(document).height();

if (documentHeight === height + scrollTop) {

current_month--;

if(current_month == 0){

current_year--;

current_month = 12;

}

console.log(current_year);

console.log(current_month);

jQuery.ajax({

type: 'post',

data: {

'today':today,

'year':current_year,

'current_month':current_month

success: function(data) {

data = JSON.parse(data);

jQuery(".section.container").append(data['html']);

}

});

return false;

}

});

■more.php

<?php

    require_once("../../../wp-config.php");

    //最新月から一つ前の投稿数を取得
      $today = $_POST['today'];
      $this_year = $_POST['year'];
      $current_month = $_POST['current_month'];//次呼び出される月
      $first_day = 1;//今現在の月の初日
      $last_day = 31;//今現在の月の末日




    //最新月前の投稿数を取得
    $mydata_past = get_posts( array(
        'order' => 'ASC',
        'post_type' => 'post',
        'orderby' => 'date',
        'posts_per_page' => -1,
        'date_query' => array(
            array(
                'after' => array(
                    'year' => $this_year,
                    'month' => $current_month,
                    'day' => $first_day,
                ),
                'before' => array(
                    'year' => $this_year,
                    'month' => $current_month,
                    'day' => $last_day,
                ),
                'inclusive' => true,
            ),
        ),
    ));

$results = $mydata_past;
    $html = "";


    foreach ($results as $result) {
      $html .= '<article class="grid">';
        $html .= '<article class="entry item">';
          $html .= '<div class="item-content">';
            $html .= '<div class="sns-mark"></div>';
              $html .= '<figure class="entry-thumb">';
                $html .= '<a href="'.get_permalink($result->ID).'">';
                  $html .= get_the_post_thumbnail($result->ID,'full');
                $html .='</a>';
              $html .= '</figure>';
              $html .= '<div class="entry-body">';

                $html .= '<div class="member_name text_white">'.get_post_time('m/d','false',$result->ID).'</div>';
                $html .= '<h3 class="entry-title"><a href="'.get_permalink($result->ID).'">';
                $html .=  get_the_title($result->ID);
                $html .='</a></h3>';
              $html .= '</div>';
            $html .= '</div>';
          $html .= '</div>';
        $html .= '</article>';
      $html .= '</div>';
    }

    $returnObj = array();
    $returnObj = array(
        'noDataFlg' => $noDataFlg,
        'html' => $html
    );
    $returnObj = json_encode($returnObj);

    echo $returnObj;
?>