【WordPress】月別アーカイブの一覧をリスト／ドロップダウンで表示する方法

2021.08.24 2024.03.10 WordPress

WordPressで、標準の投稿やカスタム投稿タイプの月別アーカイブ一覧を、リスト形式またはドロップダウンで表示する方法。

どちらもwp_get_archivesという関数を使います。

wp_get_archivesの使い方

<?php
wp_get_archives (array(
	'type' => 'monthly', //表示するアーカイブの種類
	'limit' => '', //取得する件数
	'format' => 'html', //アーカイブの表示形式
	'before' => '', //formatがhtmlまたはcustomのとき、aタグの直前に付けるテキスト（htmlタグ可）
	'after' => '', //formatがhtmlまたはcustomのとき、aタグの直後に付けるテキスト（htmlタグ可）
	'show_post_count' => false, //投稿数を表示するか
	'echo' => 1, //表示するか（1）、値を返すか（0）
	'order' => 'DESC', //項目をどの方向に並べるか
	'post_type' => 'post' //アーカイブを取得する投稿タイプ
));
?>

formatというパラメーターをhtmlと指定するとリスト形式、optionと指定するとドロップダウンで表示されます。

月別アーカイブの一覧をリスト形式で表示する場合

<ul>
	<?php
	wp_get_archives (array(
		'type' => 'monthly',
		'format' => 'html',
		'before' => '<span class="item">',
		'after' => '</span>',
	));
	?>
</ul>

formatをhtmlに指定するとリンクがliタグで囲まれるので、全体をulタグで囲むようにします。

beforeとafterにhtmlタグを指定すると、以下のようにaタグを囲むことができます。

<li><span class="item"><a href='https://example.com/2021/07/'>2021年7月</a></span></li>

月別アーカイブの一覧をドロップダウンで表示する場合

<select name="archive-dropdown" onChange='document.location.href=this.options[this.selectedIndex].value;'>
	<option value="">月を選択</option>
	<?php
	wp_get_archives (array(
		'type' => 'monthly',
		'format' => 'option',
	));
	?>
</select>

formatにoptionを指定します。

項目がoptionタグに囲まれた状態で出力されるため、全体をselectタグで囲み、onChangeでページ遷移するようにします。

カスタム投稿タイプの年別アーカイブをドロップダウンで表示する

<select name="archive-dropdown" onChange='document.location.href=this.options[this.selectedIndex].value;'>
	<option value="">年を選択</option>
	<?php
	wp_get_archives (array(
		'type' => 'yearly',
		'format' => 'option',
		'post_type' => 'news'
	)); 
	?>
</select>

上のコードでは、スラッグが「news」のカスタム投稿タイプのアーカイブを年別で表示しています。

post_typeにカスタム投稿タイプのスラッグを指定すれば、標準の投稿だけでなく、カスタム投稿タイプのアーカイブを表示することができます。

またそこまで更新頻度が高くないため月別にするとスカスカになってしまう……　という場合には、年別で表示するというのも選択肢としてはアリだと思います。