WordPressのアーカイブをカテゴリーで絞り込む方法

WordPress個別サポート

WordPressで年月ごとの記事一覧を表示できるアーカイブ。全カテゴリーの記事が含まれていますが、特定のカテゴリーで絞り込みたいこともありますよね。

その方法が以下のサイトに掲載されています。ここでは以下のサイトを参考にさせていただき、実際に作業するときの手順を紹介します。

【参考】カテゴリー毎の日付別アーカイブを表示する方法 | デザイナーのタネあかし

※以下の手順で使うPHPおよびjQueryのコードは上記のサイトから引用させていただきました。ありがとうございます。

プラグインの準備

PHP Code Widgetプラグイン

まずは、ウィジェットにPHPコードを入力できるように、「プラグイン」‐「新規追加」メニューからPHP Code Widgetプラグインをインストール、有効化します。

PHP Code Widgetプラグインのインストール
PHP Code Widgetプラグインのインストール

Simple Custom CSS and JSプラグイン

jQueryを使ってリンクを書き換えるためSimple Custom CSS and JSプラグインをインストール、有効化します。

Simple Custom CSS and JSプラグインのインストール
Simple Custom CSS and JSプラグインのインストール
自分なりにjQueryを入力する手順を確立できている場合は上記のプラグインは不要です。

アーカイブウィジェットの作成

「外観」-「ウィジェット」メニューでアーカイブウィジェットを作成します。

それには、任意のウィジェットエリア（例：サイドバー）にPHP Codeウィジェットを追加して次のコードを入力します。

<ul class="archive-links">
<?php
wp_get_archives( 'type=monthly&limit=12' );
?>
</ul>

作成したウィジェットのイメージは次のようになります。

アーカイブウィジェットの作成
アーカイブウィジェットの作成

比較のため、通常のウィジェットも追加しています。上が全カテゴリー記事を表示する通常のアーカイブ、下が特定カテゴリー対象のアーカイブになります。

アーカイブを特定カテゴリーで絞り込む

アーカイブを特定のカテゴリーで絞り込むため、次のjQueryを入力します。

/* アーカイブをカテゴリーで絞り込む */
jQuery( function() {
  jQuery( ".archive-links a" ).each( function() {
    var obj = jQuery(this);
    var link = obj.attr("href");
    obj.attr("href",link+"?cat=2");
  });
});

それには、「Custom CSS & JS」‐「Add Custom JS」メニューを開いて、jQueryを入力(1)します。わかりやすくタイトルを入力(2)しておくとよいでしょう。

アーカイブをカテゴリーで絞り込むjQueryを入力
アーカイブをカテゴリーで絞り込むjQueryを入力

コードのポイントは6行目です。「cat=2」の「2」を絞り込みたいカテゴリーのIDに変更する必要があります。

カテゴリーIDの調べ方がわからないときはCatch IDsプラグインをインストールしておくと便利です。

Catch IDsプラグインのインストール
Catch IDsプラグインのインストール

「投稿」‐「カテゴリー」メニューでカテゴリーIDを調べることができます。

カテゴリーIDをチェック
カテゴリーIDをチェック

jQueryを保存して、アーカイブの動作を確認してみましょう。

まず、通常のアーカイブをクリックすると、さまざまなカテゴリーの記事が混じって表示されます。

通常のアーカイブ（全カテゴリーが表示される）
通常のアーカイブ（全カテゴリーが表示される）

特定カテゴリーに絞り込んだアーカイブをクリックすると、指定したカテゴリー（ここでは「イベント情報」）の記事のみが表示されます。

カテゴリーを絞り込んだアーカイブ
カテゴリーを絞り込んだアーカイブ

これで作業は完了です。動作確認できたら、通常版のアーカイブは削除しましょう。

アーカイブをカテゴリーで絞り込む仕組み

予備知識として仕組みを理解するため、カテゴリーで絞り込んだアーカイブのリンクを見てみましょう。

「http://example.com/date/2014/07?cat=2」のようにURLの最後に「?cat=2」が付いています。アーカイブページにこの文字を付けることでカテゴリーで絞り込める仕組みです。

うまくいかないとき

テーマによってはアーカイブページのURLが異なる場合があるので、上記のjQueryによる絞り込みがうまくいかないかもしれません。

その場合、「?cat=2」の「?」を「&」に変更（つまり、&cat=2）してみてください。話が長くなるので理由は省略しますが、これでうまくいく場合があります。

WordPressカスタマイズ