【2022/12/27 修正・追記】WordPress 特定のカテゴリーの月別アーカイブリストをドロップダウンで実装

2022/12/28
Tips, WordPress, チカラの種

以前書いた記事「WordPress 特定のカテゴリーの月別アーカイブリストをドロップダウンで実装」に、
「うまく動きません！」とご指摘をいただきましたので、再度検証し、修正・追記いたしました。

記事を参考に、試行錯誤され、お時間を費やされた方もあると思います。
お詫びを申し上げますとともに、記事内容を修正・追記いたします。

結論。
WordPress のパーマリンク構造によって、各 option タグの value 属性の値を変更しなくてはいけません。
手順を紹介します。

今回やりたいことは、

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

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

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

2022/12/28 追記
sidebar.php のドロップダウンリストを表示したい箇所に記述。

<?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
です。

2022/12/28 修正
特定のカテゴリーアーカイブのURLは、パーマリンク構造によって違います。
管理画面の「設定」→「パーマリンク」から、パーマリンク構造を確認してください。

  • 日付と投稿名 　（https://example.com/2022/12/27/sample-post/）の場合
    https://example.com/年/月/?cat=カテゴリーID
    2022年12月、表示したいカテゴリーのIDが 2 なら、
    https://example.com/2022/12/?cat=2　で表示できます。

  • 月と投稿名　（https://example.com/2022/12/sample-post/）の場合
    https://example.com/年/月/?cat=カテゴリーID
    2022年12月、表示したいカテゴリーのIDが 2 なら、
    https://example.com/2022/12/?cat=2　で表示できます。

  • 投稿名　（https://oz-style.com/sample-post/）の場合
    https://example.com/年/月/?cat=カテゴリーID
    2022年12月、表示したいカテゴリーのIDが 2 なら、
    https://example.com/2022/12/?cat=2　で表示できます。

  • カスタム構造　の場合
    カスタム構造によって変わります。
    ＜例＞/%category%/%post_id%/　の場合
    https://example.com/date/年/月/?cat=カテゴリーID
    2022年12月、表示したいカテゴリーのIDが 2 なら、
    https://example.com/date/2022/12?cat=2　で表示できます。

    ＜例＞/%day%/　の場合
    https://example.com/年/月/?cat=カテゴリーID
    2022年12月、表示したいカテゴリーのIDが 2 なら、
    https://example.com/2022/12/?cat=2　で表示できます。

カスタム構造の場合は、通常の月別アーカイブを表示して、そのURLの末尾に　「/?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( 'date/'.$year_month.'/?cat=カテゴリーID' ) ) ?>">
    <!-- カテゴリーID の部分は、出力したいカテゴリーのIDを入力してください。
    <!-- 特定のカテゴリーのアーカイブのURLを value に格納 -->
    <?php echo $year_month_arr[0].'年'.$year_month_arr[1].'月' ?> [<?php echo count( $archive ) ?>]
    </option>
    <?php endforeach; ?>
  </select>
<?php endif; ?>

2022/12/28 追記
その際、

<option value="<?php echo esc_url( home_url( 'date/' .$year_month.'/?cat=カテゴリーID' ) ) ?>">

の部分を、パーマリンク構造によって変更しなくてはいけません。
それぞれのパーマリンク構造に合わせて、書き換えてください。
パーマリンク構造別にソースコードを示しておきます。

<!-- 基本（https://example.com/?p=123）の場合 -->
<option value="<?php echo esc_url( home_url( '?m' .$year_month.'/&cat=カテゴリーID' ) ) ?>">

<!-- 日付と投稿名 （https://example.com/2022/12/27/sample-post/）の場合 -->
<option value="<?php echo esc_url( home_url( ''.$year_month.'/?cat=カテゴリーID' ) ) ?>">

<!-- 月と投稿名（https://example.com/2022/12/sample-post/）の場合 -->
<option value="<?php echo esc_url( home_url( ''.$year_month.'/?cat=カテゴリーID' ) ) ?>">

<!-- 数字ベース（https://example.com/archives/123）の場合 -->
<option value="<?php echo esc_url( home_url( 'archives/date/'.$year_month.'/?cat=カテゴリーID' ) ) ?>">

<!-- 投稿名（https://oz-style.com/sample-post/）の場合 -->
<option value="<?php echo esc_url( home_url( ''.$year_month.'/?cat=カテゴリーID' ) ) ?>">

<!-- カスタム構造　の場合 -->
<!-- /%category%/%post_id%/　の場合 -->
<option value="<?php echo esc_url( home_url( 'date/'.$year_month.'/?cat=カテゴリーID' ) ) ?>">

<!-- /%day%/　の場合　の場合 -->
<option value="<?php echo esc_url( home_url( ''.$year_month.'/?cat=カテゴリーID' ) ) ?>">

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

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

jQuery(function($) {
  $('#△△△').change(function() {
    if ($(this).val() != '') {
      window.location.href = $(this).val();
    }
  });
});

以上です。

補足

特定のカテゴリーの月別アーカイブ一覧、
example.com/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