WordPressでリッチな検索機能を作成！複数カテゴリー選択を実現する方法を解説

2024年7月11日

WordPressでブログやWebサイトを運営していると、記事が増えるにつれてカテゴリーも増えていきます。そんなときに、アーカイブページで複数のカテゴリーを同時に選択して記事を絞り込めたら便利と考える方もいるのではないでしょうか。

本記事では、無料プラグイン「Search & Filter」を使って、この機能を簡単に実装する方法をご紹介します。

複数カテゴリーの実装に必要なもの

実装に必要なものは以下のとおりです。

WordPressがインストールされたWebサイト
（すでにWordPressでサイトを運営されている方が対象です）
Search & Filter プラグイン（無料版で十分です）
（このプラグインを使って高度な検索機能を実現します）

Search & Filterインストール手順

まずは、必要なプラグインをインストールしましょう。

1. WordPress管理画面の左側メニューから「プラグイン」>「新規追加」を選択

2. 画面上部の検索バーに「Search & Filter」と入力し、検索結果から「Search & Filter」プラグインを見つけ、「いますぐインストール」をクリック

3. インストールが完了したら、「有効化」ボタンをクリックしてプラグインを有効にする

これで、高度な検索フィルター機能を使う準備が整いました。

テーマから固定ページに検索フォームを設置する方法

まずは、固定ページに検索フォームを設置してみましょう。

1. Search & FilterのHow To Useに記載されているショートコードをコピー

2. WordPressの管理画面から「固定ページ」→「新規追加」を選択

3. ページのタイトルを入力し、ショートコードを貼り付ける

4. 公開をして完了

補足：ショートコードが呼び出されると、WordPress はそれを対応するPHP関数にマッピングします。WordPress では、 add_shortcode() 関数を使用して、ショートコードとそれを処理する関数を登録できます。WordPressのPHPコーディングについてより詳しく知りたい方はこちらの記事をご覧ください。

アーカイブページに検索フォームを設置する方法

続いて、アーカイブページにショートコードを設定する方法を解説していきます。アーカイブページで設定するには、テーマの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によりドロップダウンの全項目ラベルを「- コースを選択」と「- 制作物を選択」に設定可能です。

これらの実装により、ユーザーはアーカイブページで高度な検索とフィルタリング機能を使用できるようになります。

ショートコードのカスタマイズ方法事例

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が適切な構造を維持していることを確認してください。

まとめ

Search & Filter プラグインを使用することで、WordPressのアーカイブページに複数カテゴリー選択機能を簡単に追加できます。この機能により、ユーザーはより効率的に目的の記事を見つけることができ、サイトがより使いやすくなります。

技術的なハードルも低く、WordPressの基本的な知識があれば十分に実装可能です。ぜひ、ご自身のサイトでも試してみてください。ユーザーからの反応の変化や、サイト内のアクセス数の向上なども期待できるでしょう。

実装後は、アクセス解析ツールなどを使って効果を測定し、必要に応じて調整を加えていくことをおすすめします。ユーザーのニーズに合わせて進化し続けるサイトづくりを心がけましょう。

WithCodeを体験できる初級コース公開中！

初級コース(¥49,800)が完全無料に！

期間：1週間
学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！

公式サイトから無料カウンセリングに申し込む →

この記事を書いた人

WithCode 編集部

WithCode(ウィズコード)は「目指すなら稼げる人材」というコンセンプトを掲げ、累計300名以上の卒業生を輩出してきたプログラミングスクールです。Web制作・Webデザインに関する役立つ情報や有意義な情報を発信していきます。