ブログ系のサイトとかである月別アーカイブページ
記事の分量やデザインのタイプによって表示方法は色々あるので、特にコーディングからのWordPress案件とかで違うパターンをリストで持っておけば何かと便利なので、まとめておきます。
【1】一般的な月別アーカイブリスト
自分がよく使うのはカウント（記事数）部分を＜span＞で囲み、数字部分だけ個別にレイアウトできるようにアーカイブリストを表示させます。
1 | <ul class="archive_list"> |
3 | $string = wp_get_archives(array( |
4 | 'show_post_count' => 1, |
7 | echo preg_replace('/<\/a> (\([0-9]*\))/', ' <span class="count">$1</span></a>', $string); |
【抽出されるHTML】
1 | <ul class="archive_list"> |
2 | <li><a href=''>2018年11月 <span class="count">(1)</span></a></li> |
3 | <li><a href=''>2018年10月 <span class="count">(14)</span></a></li> |
4 | <li><a href=''>2018年9月 <span class="count">(1)</span></a></li> |
【2】一般的な年月アーカイブリスト
wp_get_archivesはデフォルトが月別リストになるので、年月リストを出したい場合は、単純にtypeを「yearly」にするだけ
1 | <ul class="archive_list"> |
3 | $string = wp_get_archives(array( |
4 | 'show_post_count' => 1, |
8 | echo preg_replace('/<\/a> (\([0-9]*\))/', ' <span class="count">$1</span></a>', $string); |
【抽出されるHTML】
1 | <ul class="archive_list"> |
2 | <li><a href=''>2018 <span class="count">(16)</spn></a></li> |
【3】セレクトボックス型のアーカイブリスト（月別）
セレクトボックスの初期値を「月を選択して下さい」とする場合
1 | <select name="archive-dropdown" onChange='document.location.href=this.options[this.selectedIndex].value;'> |
2 | <option value=""><?php echo attribute_escape(__('月を選択してください')); ?></option> |
3 | <?php wp_get_archives (array( |
6 | 'show_post_count' => '1' |
1 | <select name="archive-dropdown" onChange='document.location.href=this.options[this.selectedIndex].value;'> |
2 | <option value="">月を選択してください</option> |
3 | <option value=''> 2018年11月 (1)</option> |
4 | <option value=''> 2018年10月 (14)</option> |
5 | <option value=''> 2018年9月 (1)</option> |
※こちらもtypeを「monthly」から「yearly」に変更すると年月アーカイブを出せます。
【4】カスタム投稿のアーカイブリスト
こちらもけっこうシンプルです。
カスタム投稿タイプが「product」の場合は「post_type」を指定して上げる以外は一緒です。
2 | $string = wp_get_archives(array( |
3 | 'post_type' => 'product', |
4 | 'show_post_count' => 1, |
7 | echo preg_replace('/<\/a> (\([0-9]*\))/', ' <span class="count">$1</span></a>', $string); |
【5】アーカイブリストをアコーディオンにする
年別リストだけ並んでいて、その2019年（5）とかのテキストをクリックすると、月別リストが出てくるあのタイプですね。
1 | <div class="side_archive_menu"> |
4 | $months = $wpdb->get_results("SELECT DISTINCT MONTH( post_date ) AS month , |
5 | YEAR( post_date ) AS year, |
6 | COUNT( id ) as post_count FROM $wpdb->posts |
7 | WHERE post_status = 'publish' and post_date <= now( ) |
10 | ORDER BY post_date DESC"); |
11 | foreach($months as $month) : |
12 | $year_current = $month->year; |
13 | if ($year_current != $year_prev){ |
14 | if ($year_prev != null){?> |
16 | <p class="toggle_btn"><?php echo $month->year; ?>年</p> |
20 | <a href="<?php bloginfo('url') ?>/<?php echo $month->year; ?>/<?php echo date("m", mktime(0, 0, 0, $month->month, 1, $month->year)) ?>"> |
21 | <?php echo date("n", mktime(0, 0, 0, $month->month, 1, $month->year)) ?>月 |
22 | (<?php echo $month->post_count; ?>) |
25 | <?php $year_prev = $year_current; |
29 | <!-- /.side_archive_menu --> |
【抽出されるHTML】
1 | <div class="side_archive_menu"> |
2 | <p class="toggle_btn">2018年</p> |
4 | <li><a href="">11月(1)</a></li> |
5 | <li><a href="">10月(14)</a></li> |
6 | <li><a href="">9月(1)</a></li> |
年号を抽出して、その下に月別リストを出します。
あとは、CSSとjQueryでアコーディオンを入れます。
【CSS】
※基本的なCSSしか入れてません。レイアウトは適正調整して下さい。
【jQuery】
1 | $(".toggle_btn").on("click", function() { |
2 | $(this).next().slideToggle(); |
3 | $(this).toggleClass("active"); |
参考サイト
