WordPress #9 | 日報カテゴリーのアーカイブを実装

WordPressテーマ開発9日目。
今日は日報カテゴリーの月別アーカイブページの実装。フレームワークやライブラリを使わずにプレーンなJavaScriptでマウスホバーで開くタイプのナビゲーションを実装。久しぶりな感じでこれは楽しかった。

あるDOM要素に対してのすべてのイベントリスナーを外す仕組みが用意されていないJavaScriptにとって、removeEventListenerをかけるタイミングを漏れなく探るのは永遠の課題だったりする。

このページはちょっと特殊で、通常WordPressでは月別アーカイブは特定のカテゴリーに絞ってページを用意してくれる仕組みはないので、仮想的に作成する必要がある。
https://momo.matium.jp/[category-slug]/2023/08
のようには出来ないので、年と月はカテゴリーページにパラメータとして渡して、https://momo.matium.jp/days/?Year=2023&Month=8 というのをルールにする。テンプレートでは、これを$_GET[]を使ってURLパラメータで受け取って

$year = current_time('Y');
$month = current_time('n');
// URLパラメータが無い場合は現在の日付
if (isset($_GET['Year'])) {
  $year = $_GET['Year'];
}
if (isset($_GET['Month'])) {
  $month = $_GET['Month'];
}

年と月数字を元に、ページを構成するクエリループを作成。日報のカテゴリーページはその月のポストを上から読んでいく構成にするので、orderはASCにする。

<?php
$monthly_posts_args = array(
  'category_name' => 'days',
  'posts_per_page' => 31,
  'year' => $year,
  'monthnum' => $month,
  'order' => 'ASC',
  'orderby' => 'date'
);
$the_query = new WP_Query($monthly_posts_args);
while ($the_query->have_posts()) :
?>
  <?php $the_query->the_post(); ?>
  <!-- 投稿記事の表示 -->
  <div class="single-post-contents">
    <?php get_template_part('templates/days-post-template', null); ?>
  </div>
  <!-- 区切り線の表示 -->
  <div class="full-width-divider"></div>
<?php endwhile; wp_reset_postdata(); ?>

いろいろと模索してはみたけど、月別アーカイブの仕組みにカテゴリーの制限を加えようとすると失敗する。発想を逆転させてカテゴリーページに月を指定すると考えるとそれほど難しい実装ではなかった。
ただ、これだと月別アーカイブのリンクリストなども自作する必要があるので、それはかなり面倒くさいかもしれない。