WordPress 特定のカテゴリーの月別アーカイブリストをドロップダウンで実装

2019/06/15
Tips, WordPress, チカラの種

今回やりたいことは、

  • 「ブログ」カテゴリーだけの月別アーカイブページを表示したい。
  • 更に、長年書いてきたブログなので、リストにすると長～い。
    サイドバーにドロップダウンで表示したい！

特定のカテゴリーの月別アーカイブを実行

通常、ウィジェットから追加した「月別アーカイブ」では、投稿された全ての記事について、月別にアーカイブされます。
「お知らせ」も「ブログ」も「実績」も、全ての記事がごちゃ混ぜになります。
「ブログ」カテゴリーだけ！

<?php
$cat_slug = 'blog'; //アーカイブしたいカテゴリーのスラッグ
$args = array(
	'category_name' => $cat_slug,
	'posts_per_page' => -1 //カテゴリーの記事を全部出力
);
$the_query = new WP_Query( $args ); //上記アーカイブクエリを実行
?>

<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php $archive_list[ get_the_time( 'Y/n', $post->ID ) ][] = $post->post_title;//年月ごとに記事情報を格納
?>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>

プルダウンリストの作成

で、ここから、プルダウンリストの作成です。
記事がある月を出力し、option タグで囲みます。
その際、value値に、リンク先となるURLを格納します。
特定のカテゴリーのアーカイブのURLは、
example.com/archives/date/年/月/?cat=カテゴリーID
です。
[<?php echo count( $archive ) ?>] で記事数も表示します。

<?php if( $archive_list ) : ?>
	<select id="△△△"><!-- △△△は任意の名前：後述のJavaScriptで必要です -->
    <option>月を選択</option>
		<?php foreach( $archive_list as $year_month => $archive ) :
			$year_month_arr = explode( '/', $year_month );
		?>
		<option value="<?php echo esc_url( home_url( 'archives/date/' .$year_month.'/?cat=カテゴリーID' ) ) ?>">
		<!-- 特定のカテゴリーのアーカイブのURLを value に格納 -->
			<?php echo $year_month_arr[0].'年'.$year_month_arr[1].'月' ?> [<?php echo count( $archive ) ?>]
        </option>
		<?php endforeach; ?>
    </select>
<?php endif; ?>

これだけじゃリンクしないよ
option タグにリンクを設定

さて、これだけでは、記事がある月のリストは表示されますが、一覧表示ページにリンクしません。
option タグの value に設定したURLにリンクさせるための、JaveScript を記述します。

<script type="text/javascript">
 (function() {
	var dropdown = document.getElementById( "△△△" ); //selectタグに付与したIDでターゲットのselectタグを取得
	function onSelectChange() {
		if ( dropdown.options[ dropdown.selectedIndex ].value !== '' ) { //optionにvalueが格納されていれば
			document.location.href = this.options[ this.selectedIndex ].value; //valueの値を location.hrefの値に格納
		}
	}
	dropdown.onchange = onSelectChange;
})();
</script>

特定のカテゴリーだけのアーカイブなので、 JavaScript は、functions.php で wp_enqueue_script関数を使って読み込みます。
その際、出力したいカテゴリーでの条件分岐も忘れずに。

以上です。

補足

特定のカテゴリーの月別アーカイブ一覧、
example.com/archives/date/年/月/?cat=カテゴリーID
の表示は、カテゴリーテンプレートで制御します。
category-スラッグ名.php もしくは、category-カテゴリーID .php を作成します。
if( is_month() ) 関数を使って条件分岐し、通常のカテゴリー一覧の場合の表示と区別することができます。

例えば、タイトル。

<?php if( is_month() ) : //月別アーカイブ一覧だったら、
	$date_name = get_query_var('year').'年'.get_query_var('monthnum').'月';
//アーカイブクエリのyearとmonthnumの値を使って○年□月と記述
?>
<h1 class="page-title"><?php single_cat_title(''); ?>　アーカイブ：<?php echo $date_name ;?></h1>
	<?php else : ?>
<h1 class="page-title"><?php single_cat_title(''); ?></h1>
<?php endif; ?>

結果は、

<!-- 通常のブログカテゴリー表示なら、-->
<h1 class="page-title">ブログ</h1>
<!-- ブログカテゴリーの2019年6月のアーカイブ表示なら、-->
<h1 class="page-title">ブログ　アーカイブ：2019年6月</h1>

となります。

特定のカテゴリーの月別アーカイブ実行部分で、下記サイト様を参考にさせていただきました。
参考サイト：株式会社リコネクト様
スタッフブログ:「【WordPress】wp_get_archivesを使わずに特定カテゴリーの年月アーカイブリストを表示したい」
https://www.rcnt.jp/blog/wordpress-wp_get_archives/

関連記事

©Oz-style