WordPress複数カテゴリー検索機能の実装完全ガイド
生徒ペン博士、運営しているブログの記事が多くなってきたのでカテゴリー分けをしたいです！
ペン博士わかった！今から詳しく説明するからよーく聞くんじゃぞ！
生徒はい！お願いします！
WordPressでブログやWebサイトを運営していると、記事が増えるにつれてカテゴリーも増えていきます。そんなときに、アーカイブページで複数のカテゴリーを同時に選択して記事を絞り込めたら便利と考える方もいるのではないでしょうか。
本記事では、無料プラグイン「Search & Filter」を使って、この機能を簡単に実装する方法をご紹介します。
詳しくはこちらの記事をご覧ください。
あわせて読みたい
【学生さん必見】大学生ながら案件を完走！案件を経験した後の活動状況もお聞きしました！
ペン博士！大学生ながら案件をこなした方がいるって聞いたんですけど本当ですか？ うむ、本当じゃ。わしが運営しておるプログラミングスクールの受講生じゃ。そして、そ…
橋本さんの主な制作実績はこちら
目次
複数カテゴリー選択検索に必要な準備と事前知識
ペン博士実装に必要なものは以下のとおりじゃ
- WordPressがインストールされたWebサイト
（すでにWordPressでサイトを運営されている方が対象です） - Search & Filter プラグイン（無料版で十分です）
（このプラグインを使って高度な検索機能を実現します）
まだWordPressをお持ちでない方は、「ウチマネ」様が詳しく解説されているこちらの記事をご参考ください。
ウチマネ
エックスサーバーでWordPressの始め方をわかりやすく解説｜ブログの初期設定もあわせて解説 | ウチマネ
「エックスサーバーでWordPressを解説する手順を知りたい」 「設定に自信がなく、WordPressのブログを開設できるか不安」 など、初心者にとってサーバーやドメインなど分か…
Search & Filterプラグインのインストール手順【図解】
ペン博士まずは、必要なプラグインをインストールするのじゃ！
1. WordPress管理画面の左側メニューから「プラグイン」>「新規追加」を選択
2. 画面上部の検索バーに「Search & Filter」と入力し、検索結果から「Search & Filter」プラグインを見つけ、「いますぐインストール」をクリック
3. インストールが完了したら、「有効化」ボタンをクリックしてプラグインを有効にする
これで、高度な検索フィルター機能を使う準備が整いました。
固定ページに検索フォームを設置する3つの方法
ペン博士次は、固定ページに検索フォームを設置するのじゃ！
1. Search & FilterのHow To Useに記載されているショートコードをコピー
2. WordPressの管理画面から「固定ページ」→「新規追加」を選択
3. ページのタイトルを入力し、ショートコードを貼り付ける
4. 公開をして完了
ペン博士ここで補足じゃ
ショートコードが呼び出されると、WordPress はそれを対応するPHP関数にマッピングします。WordPress では、 add_shortcode() 関数を使用して、ショートコードとそれを処理する関数を登録できます。WordPressのPHPコーディングについてより詳しく知りたい方はこちらの記事をご覧ください。
あわせて読みたい
PHP基本文法を完全ガイド｜初心者向け実例コード付き解説
この記事の結論 PHPは「Hypertext Preprocessor」の略で、サーバーサイドで実行されるスクリプト言語であり、HTML内に直接記述でき、データベース連携が容易で、WordPre...
アーカイブページへの検索フォーム実装手順
ペン博士ここでは、アーカイブページにショートコードを設定する方法を解説するぞ！
アーカイブページで設定するには、テーマのarchive.phpファイルを編集する必要があります。テーマにこのファイルがない場合は作成します。
<?php
// アーカイブページテンプレート（archive.php）の例
get_header();
// Search & Filterフォームを表示
echo do_shortcode('[searchandfilter fields="search,category,post_tag" headings="検索,カテゴリー,タグ"]');
// 検索結果を表示
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// 投稿の内容を表示
get_template_part( 'template-parts/content', get_post_type() );
endwhile;
// ページネーションを表示
the_posts_pagination();
else :
// 投稿が見つからない場合のメッセージを表示
get_template_part( 'template-parts/content', 'none' );
endif;
get_footer();
?>do_shortcode() 関数は、指定されたショートコードを実行し、その結果を返します。
ペン博士これには注意点もあるのじゃ
- テーマによっては、
archive.phpの代わりにindex.phpや特定のアーカイブタイプ用のテンプレート（例：category.php,tag.php）を使用している場合があります。 - カスタム投稿タイプのアーカイブページの場合、
archive-{post_type}.phpというファイル名を使用します。
HTMLのタグ間で直接配置する方法もある
こちらは、WithCodeMediaのソースに配置されているショートコードです。
<section class="works-contents">
<div class="works-contents-wrap inner-n">
<div class="works-contents-wrap__cate">
<?php echo do_shortcode('[searchandfilter fields="works_course_cate,works_item_cate" submit_label="検索する" headings="コース,制作物" all_items_labels="- コースを選択,- 制作物を選択"]'); ?>
</div>
...fieldsではカスタムフィールドを使用しており、検索とフィルタリングの対象を呼び出しています。submit_labelでフォームの送信ボタンのラベルを「検索する」に設定しており、headingsで各フィールドの見出しを「コース」と「制作物」に設定しています。また、all_items_labelsによりドロップダウンの全項目ラベルを「- コースを選択」と「- 制作物を選択」に設定可能です。
これらの実装により、ユーザーはアーカイブページで高度な検索とフィルタリング機能を使用できるようになります。
ショートコードをカスタマイズする5つの事例
ペン博士ここでは、ショートコードのカスタマイズ方法事例を紹介するぞ！
1. ラベルを表示
[searchandfilter fields="search,category,post_tag" headings="検索,カテゴリー,タグ"]
2. 送信ボタンのラベルを設定
[searchandfilter fields="category,post_tag" submit_label="Filter" headings="Categories,Tags"]
3. 選択肢をラジオボタンやチェックボックスで表示
[searchandfilter fields="search,category,post_tag" types=",radio,checkbox" headings=",Categories,Tags"]
4. 日付での検索
[searchandfilter fields="search,post_date" types=",date" headings=",Post Date"]
5. 日付範囲での検索
[searchandfilter fields="search,post_date" types=",daterange" headings=",Post Date"]
6. カスタムフィールドでの検索
[searchandfilter fields="search,category,post_tag,cf_color,cf_size"]
7. 階層カテゴリーの使用
[searchandfilter fields="search,category,post_tag" hierarchical="category"]
Search & Filter の設定で表示する投稿数や並び順をカスタマイズできます。
詳細は「Search & Filter Free Edition」に載っているので参考にしましょう。
ペン博士これらにも注意点があるのじゃ
- 記事数が非常に多いサイトの場合、フィルタリング処理に時間がかかる可能性があります。その場合は、表示件数を制限するなどの対策を検討してください。
- スマートフォンなどのモバイルデバイスでも使いやすいよう、レスポンシブデザインを心がけましょう。
- SEO（検索エンジン最適化）の観点から、フィルタリング後のURLが適切な構造を維持していることを確認してください。
ペン博士これらを覚えておけば大丈夫じゃぞ！
生徒ありがとうございます！勉強になりました！
複数カテゴリー検索機能を完成させるための確認ポイント
本記事では、WordPressの検索機能で複数カテゴリーを選択する実装方法を解説しました。要点は以下の通りです。
・「Search & Filter」プラグインを使えば、WordPressのアーカイブページに複数カテゴリー選択機能を簡単に追加できる
・ユーザーの利便性が向上し、目的の記事を探しやすくなることで滞在時間や回遊率の向上が期待できる
・導入のハードルは低く、基本的なWordPress操作スキルがあれば誰でも実装可能
・実装後は、アクセス解析ツール（Googleアナリティクスなど）で効果測定を行い、必要に応じてチューニングすることが重要
ユーザーのニーズに合わせて進化し続けるサイトづくりを心がけましょう。
関連記事
- WordPressとDiscordを連携させるには？効果的な統合方法を解説
- WordPressのカスタム投稿とは？プラグイン「Custom Post Type UI」で実装する方法を徹底解説！
- WordPress プロフィール登録機能の実装方法｜コード例付き完全ガイド
- WordPress引用ブロックの使い方｜設定からデザイン変更まで完全ガイド
- WordPressアイキャッチ画像の設定方法|完全ガイド
参考リンク（公式・一次情報）
よくある質問（FAQ）
Q1. WordPressで複数カテゴリー検索を実装するには何が必要ですか？
A. WordPressがインストールされたWebサイトと、無料の「Search & Filter」プラグインが必要です。Search & Filterは無料版で十分とされており、このプラグインを使って複数カテゴリーの同時選択など高度な検索機能を実現できます。
Q2. Search & Filterプラグインの導入手順は？
A. WordPress管理画面の左メニューから「プラグイン」＞「新規追加」を選び、検索バーに「Search & Filter」と入力します。検索結果から該当プラグインを見つけて「いますぐインストール」をクリックし、完了後に「有効化」ボタンを押せば準備完了です。
Q3. 固定ページに検索フォームを設置するには？
A. Search & FilterのHow To Useに記載されているショートコードをコピーし、WordPress管理画面から「固定ページ」→「新規追加」を選びます。ページタイトルを入力してショートコードを貼り付け、公開すれば設置完了です。
Q4. アーカイブページに検索フォームを実装する方法は？
A. テーマのarchive.phpファイルを編集し、do_shortcode()関数を使ってショートコードを実行します。テーマにarchive.phpがない場合は作成します。テーマによってはindex.phpやcategory.php、tag.phpを使う場合や、カスタム投稿タイプではarchive-{post_type}.phpを使う点に注意が必要です。
Q5. 複数カテゴリー検索機能を実装する際の注意点は？
A. 記事数が非常に多いサイトではフィルタリング処理に時間がかかる可能性があるため、表示件数を制限するなどの対策を検討します。スマートフォンでも使いやすいようレスポンシブデザインを心がけ、SEOの観点からフィルタリング後のURLが適切な構造を維持しているか確認することも重要です。
WithCodeを体験できる初級コース公開中！
初級コース(¥49,800)が完全無料に！
- 期間：1週間
- 学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム。
副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？
未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！
