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