アトリエロワ

wpカテゴリーごとに年月アーカイブを表示

テンプレートに記載

        <?php
  $args = array(
    'posts_per_page' => -1,
    'order' => 'DESC',
    'orderby'=>'date',
    'category__in' => array( 2, 3,4 ),
  );
  
  $the_query = new WP_Query($args);
  if($the_query->have_posts()):
    $post_month = false; // 月の比較用変数の初期化
    while ($the_query->have_posts()): $the_query->the_post();
      if( $post_month != get_post_time('Y,m') ) {
        if ( $post_month !== false) { // 比較の値と投稿年月が異なる場合に以下を表示
          echo '</ul>';
        }
        if ( $post_month != get_post_time('Y,m')) { // 比較の値と投稿年が異なる場合に年を表示
            echo '<h3>'.get_post_time('Y年m月').'</h3>'; //投稿の月を表示
            echo '<ul>';
        }
      }
      echo '<li><a href="'.get_the_permalink().'">'.get_the_title().'</a></li>';
      $post_month = get_post_time('Y,m'); // 年月の比較用の変数に今の投稿の年月を代入
    endwhile;
    wp_reset_postdata();
    echo '</ul>';
  endif;
?>

HTML表示

<h3>●●●●年●●月</h3>
<ul>
<li><a href="">記事タイトル</a></li>
<li><a href="">記事タイトル</a></li>
<li><a href="">記事タイトル</a></li>
</ul>
<h3>●●●●年●●月</h3>
<ul>
<li><a href="">記事タイトル</a></li>
<li><a href="">記事タイトル</a></li>
<li><a href="">記事タイトル</a></li>
</ul>

●●●●年●●月（５）　　　など、マウスオーバーで記事の件数を表示させる

js（jquery）に下記を追加

$(function() {
  $('#sidebar h3').mouseover(function () {
  var size = $(this).next('ul').children('li').length;
  $(this).children('span').text('（' + size + '）');
});

●●●●年●●月　をクリックで、記事タイトルを表示。 ひとつクリックすると他は閉じる

js（jquery）に下記を追加

  $('#sidebar h3').click(function(){
    $(this).next('ul').slideToggle();
    $(this).siblings('h3').next('ul').slideUp();
  });
});

HOME > wordpress設計術 > wpカテゴリーごとに年月アーカイブを表示

wordpress設計術

wordpress設計術

+ More