WordPressで年別月別のアーカイブをアコーディオンで表示する方法

wordpress

当ブログのサイドバーに表示している「月別アーカイブ」のように、年別で表示してその中に月別アーカイブを表示する方法を紹介していきます!

特にプラグインは使わずにサイドバーのテンプレートファイルを直接修正していきます。

[スポンサーリンク]

やりたいこと

こちらのHTMLを出力して、年別の下に月別が表示されるようにしていきます。
その後CSSをJavaScript(jQuery)を使ってアコーディオンを作成していきます。

<ul class="accordion">
  <li>
    <p><span>2017年</p></span>
    <ul>
      <li> <a href="http://XXX/2017/03"> 3月(5) </a></li>
      <li> <a href="http://XXX/2017/02"> 2月(7) </a></li>
      <li> <a href="http://XXX/2017/01"> 1月(7) </a></li>
    </ul>
  </li>
  <li>
    <p><span>2016年</p></span>
    <ul>
      <li> <a href="http://XXX/2016/12"> 12月(8) </a></li>
      <li> <a href="http://XXX/2016/11"> 11月(4) </a></li>
      <li> <a href="http://XXX/2016/10"> 10月(2) </a></li>
      <li> <a href="http://XXX/2016/09"> 9月(7) </a></li>
    </ul>
  </li>
</ul>

WordPressのサイドバー

まずは上記HMTMLを出力するように、こちらのロジックをWordPressテンプレートファイルのサイドバーへ追加していきましょう。

こちらのロジックは、コチラで紹介されているコードを参考にアレンジさせてもらいました。

<ul class="accordion">
<?php
$year_prev = null;
$months = $wpdb->get_results("SELECT DISTINCT MONTH( post_date ) AS month ,
                                    YEAR( post_date ) AS year,
                                    COUNT( id ) as post_count FROM $wpdb->posts
                                    WHERE post_status = 'publish' and post_date <= now( )
                                    and post_type = 'post'
                                    GROUP BY month , year
                                    ORDER BY post_date DESC");
foreach($months as $month) :
$year_current = $month->year;
if ($year_current != $year_prev){
if ($year_prev != null){?>
            </ul></li>
        <?php } ?>
<li><p><span><?php echo $month->year; ?>年</p></span><ul>
    <?php } ?>
    <li>
        <a href="<?php bloginfo('url') ?>/<?php echo $month->year; ?>/<?php echo date("m", mktime(0, 0, 0, $month->month, 1, $month->year)) ?>">
            <?php echo date("n", mktime(0, 0, 0, $month->month, 1, $month->year)) ?>月
            (<?php echo $month->post_count; ?>)
        </a>
    </li>
    <?php $year_prev = $year_current;
    endforeach; ?>
</ul></li></ul>

CSSでデザインを整えます

こちらのCSSで当ブログのサイドバーに表示されている「月別アーカイブ」と同じデザインのアーカイブになります。

ul.accordion {
    width:80%;
    font-size:12px;
}
ul.accordion a { 
    display:block; 
    padding:5px; 
    background-position:97% center; 
    background-repeat:no-repeat; 
    text-decoration:none; 
    color:#333; 
    border: solid 1px #DBDBDB;
}
ul.accordion a:hover {
   background:#3498db; 
    color:#FFF; 
}
ul.accordion span { 
    display:block; 
    padding:5px; 
    background-position:97% center; 
    background-repeat:no-repeat; 
    color:#333; 
    font-weight:bold;
    border: solid 1px #DBDBDB;
}
ul.accordion span:hover { 
    background:#3498db;
    color:#FFF;
    cursor: pointer; 
}
ul.accordion ul { 
    display:none;
}
ul.accordion > li > p span { 
    background:#FFF
}
ul.accordion > li > p span.open { 
    background:#FFF
}
ul.accordion > li > p span.open:hover { 
    background:#3498db;
    color:#FFF
}
ul.accordion > li > ul > li { 
    background:#FFF;
    border-bottom:1px solid #EEE;
}
ul.accordion > li > ul > li > p { 
    background:#FFF;
}
ul.accordion > li > ul > li > a { 
    background:#FFF;
}
ul.accordion > li > ul > li > ul > li { 
    background:#FFF; 
}
ul.accordion > li > ul > li > ul > li:last-child {
    border:none;
}

jQueryでアコーディオンを実装

こちらのJavaScriptを追加するとアーカイブがアコーディオンで開閉できるようになります。

  $(function(){
    $(".accordion li ul").hide();
    $(".accordion p").click(function(){
      $(this).next("ul").slideToggle();
      $(this).children("span").toggleClass("open");
    }); 
    $(".accordion dt").click(function(){
      $(this).next("dd").slideToggle();
      $(this).next("dd").siblings("dd").slideUp();
      $(this).toggleClass("open");    
      $(this).siblings("dt").removeClass("open");
    });
  });

参考にしたサイト

こちらのサイトを参考にさせて頂きました。有難うございます!

さいごに

WordPressについている標準のウィジェットでも月別アーカイブは表示させることはできるのですが、年別月別を階層的に表示させるということはできません。

最初はプラグインで簡単にできるのかなと思ってプラグインも探してはみましたが、メジャーどころのプラグインがなかったので自前でアーカイブを作ることにしました。

年別・月別のアーカイブがあると自分がいつブログ更新を頑張って、いつさぼっているのかが見える化できてよいですね。汗

それでは!