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

2024年7月11日

生徒

ペン博士、運営しているブログの記事が多くなってきたのでカテゴリー分けをしたいです！

ペン博士

わかった！今から詳しく説明するからよーく聞くんじゃぞ！

生徒

はい！お願いします！

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

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

「学習→収入」につなげた受講生のリアルな体験談も公開中！
働き方を変えたい方にも響くストーリーです。

橋本さん
大学在学中にプログラミングに出会い、最初は独学で学ぶも限界を感じ、WithCodeを受講されました。短期集中カリキュラムでプログラミング学習に打ち込んだ結果、見事卒業テストに合格し、案件も獲得。現在はITエンジニアに向けて就職活躍中です

詳しくはこちらの記事をご覧ください。

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

ペン博士

実装に必要なものは以下のとおりじゃ

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

まだWordPressをお持ちでない方は、「ウチマネ」様が詳しく解説されているこちらの記事をご参考ください。

ウチマネ

エックスサーバーでWordPressの始め方をわかりやすく解説｜ブログの初期設定もあわせて解説 | ウチマネ「エックスサーバーでWordPressを解説する手順を知りたい」「設定に自信がなく、WordPressのブログを開設できるか不安」など、初心者にとってサーバーやドメインなど分か…

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

ペン博士

これらを覚えておけば大丈夫じゃぞ！

生徒

ありがとうございます！勉強になりました！

まとめ

本記事では、WordPressの検索機能で複数カテゴリーを選択する実装方法を解説しました。要点は以下の通りです。

・「Search & Filter」プラグインを使えば、WordPressのアーカイブページに複数カテゴリー選択機能を簡単に追加できる

・ユーザーの利便性が向上し、目的の記事を探しやすくなることで滞在時間や回遊率の向上が期待できる

・導入のハードルは低く、基本的なWordPress操作スキルがあれば誰でも実装可能

・実装後は、アクセス解析ツール（Googleアナリティクスなど）で効果測定を行い、必要に応じてチューニングすることが重要

ユーザーのニーズに合わせて進化し続けるサイトづくりを心がけましょう。