初心者必見！WordPressのサイト内検索の作り方と高度にカスタマイズする方法

みなさんこんにちは！エンジニアの高澤です！

今回はWordPressのサイト内検索を高度にカスタマイズして検索できるようにする実装方法について解説していきたいと思います。

WordPressでいうところのサイト内検索とは、検索フォームのformタグをWordPressによって決められた仕様に従って実装し、その検索結果をテーマファイルであるsearch.phpで出力する一連の動作のことをいいます。

WordPressのサイト内検索を自由にカスタマイズすることができれば、検索を必要とするサイトの実装において幅広く対応することができ、クライアントのご要望にも応えられるようになりますので、よろしければぜひ当記事でご活用いただけましたら幸いです。

サイト内検索とは

サイト内検索とは、サイト内にある記事ページや商品ページなどを特定のキーワードやカテゴリーなどに絞って検索する機能のことです。

WordPressでは標準でこのサイト内検索機能が用意されており、決められた実装方法通りに実装すれば簡単にサイト内検索を実装することが可能です。

サイト内検索のメリット

サイト内検索にはいくつかメリットがあります。

メリットとしては以下の内容がいえるかと思います。

• ユーザーの離脱率を下げる
• サイトの使いやすさが向上する
• 時間短縮につながる

それではそれぞれ解説していきます。

ユーザーの離脱率を下げる

サイト内検索があればユーザーの離脱率を下げることができます。

なぜならばサイト内検索機能があればすぐに記事ページなどを見つけることができ、記事が見つからないといった問題が解消されるからです。

サイトの使いやすさが向上する

サイト内検索があることによって、サイトの使いやすさが向上します。

ブログやメディアサイトなど記事コンテンツが多めのサイトであれば特に威力を発揮するかと思います。

サイト内検索機能と合わせてカテゴリーやタグ機能もサイト内にあるとよりユーザーにとっては便利ですぐに閲覧したいページにアクセスできるといったメリットがあります。

時間短縮につながりSEO向上

サイト内検索があれば時間短縮にもつながります。

一人ひとりの時間はそれぞれ有限で、いつまでも一つのサイトに時間を使っていられないしそもそも使わないというのが正直なところかと思いますが、すぐにコンテンツにたどり着けるようにすることでユーザーの時間短縮にもつながり、気に入ってもらえればより多くの記事を閲覧してもらえる可能性があります。

サイト内検索の実装方法

それではWordPressにおけるサイト内検索の実装方法について解説していきます。

サイト内検索の実装方法はリストにすると以下になります。

• formタグで検索ボックスを実装する
• テーマ内にsearch.phpを作成する

上記を踏まえて順を追って解説していきます。

formタグで検索ボックスを実装する

まずはフォームの検索ボックスを実装します。

以下のコードをテーマ内のsidebar.phpやheader.phpなど任意のPHPテンプレートファイルにコピー＆ペーストしてください。

<form method="get" action="<?php echo esc_url( home_url('/') ); ?>">
    <label>
        <span>検索</span>
        <input type="text" name="s" placeholder="検索..." value="<?php echo get_search_query(); ?>">
    </label>
    <button type="submit">検索</button>
</form>

上記コードでは、WordPressの仕様にしたがってコードを記述しております。

仕様としては以下の内容になりまして、必ずこの決まりを守って実装してください。

• <form>にはmethod属性に「get」を設定し、action属性にはトップページへのURL（home_url()関数）を設定する
• formタグ内のinputタグにはname属性に「s」を設定する
• テーマ内にsearch.phpを作成する

上記の決まりを守って実装していただくことでWordPressのサイト内検索機能を実装することが可能です。

検索キーワードを入力するinputタグには「s」というクエリパラメータが必要で、このパラメータ名「s」に検索キーワードを設定して検索をかけることでWordPress内部でそのキーワードを記事のタイトルと本文からLIKE検索してくれます。

テーマ内にsearch.phpを作成する

次にテーマ内にsearch.phpを作成してください。

search.phpとはサイト内検索の検索結果を表示するためのPHPテンプレートファイルになります。

このsearch.phpに以下のコードをコピー＆ペーストしてください。

<?php get_header(); ?>

<div>
    <main>

        <?php
        if(have_posts()):
        ?>
            <div>
                <?php
                if(have_posts()):
                    while(have_posts()):the_post();
                    ?>
                        <!-- ループ内の処理をここに記述 -->
                    <?php
                    endwhile;
                else:
                ?>
                    <p>検索結果はありませんでした。</p>
                <?php
                endif;
                ?>
            </div>
        <?php
        else:
        ?>
            <p>検索結果はございません。</p>
        <?php
        endif;
        ?>

    </main>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

上記コードはsearch.phpで検索結果となる記事一覧を表示するための最低限のPHPコードになります。

search.phpではindex.phpやcategory.phpなどと同様にメインクエリのWordPressループの記述になります。

ここまで実装ができましたらサイト内検索の機能は作れたかと思います。お疲れ様でした！

試しに検索ボックスに記事タイトルのいずれかのキーワードを入力して検索してみましょう。

サイト内検索をカスタマイズする方法

次はサイト内検索の検索機能をカスタマイズする方法についていくつかサンプルをご紹介していきたいと思います。

サイト内検索をカスタマイズする方法は、大きく以下の内容となりますのでご確認ください。

• functions.phpにコードを記述する
• pre_get_postsフックを使用する
• WordPressループのパラメータと同じクエリ定義を使用する

それでは次から様々なカスタマイズ方法のパターンをご紹介していきます。

カスタムフィールドの値を含める

まずはカスタムフィールドの値を含める場合の実装方法について解説していきたいと思います。

以下のコードをfunctions.phpにコピー＆ペーストしてください。

<?php
// 検索結果にカスタムフィールドの値を含める
function custom_search_include_custom_fields($query) {
    // 検索ページかつメインクエリの場合のみ処理を行う
    if ( !is_admin() && $query->is_main_query() && $query->is_search() ) {
        // カスタムフィールドのキーを指定
        $meta_query = array(
            'relation' => 'OR', // OR検索を行う
            array(
                'key' => 'your_custom_field_key', // カスタムフィールドのキーを指定
                'value' => $query->query_vars['s'], // 検索キーワードを指定
                'compare' => 'LIKE', // 部分一致で検索する
            ),
            // 他のカスタムフィールドがあればここに追加
        );
        $query->set('meta_query', $meta_query); // メタクエリを設定
    }
}
add_action('pre_get_posts','custom_search_include_custom_fields');

上記コードではpre_get_postsフックを使用して、検索結果にカスタムフィールドの値を含めるためのコードです。

独自に定義したcustom_search_include_custom_fields関数は、検索結果にカスタムフィールドの値を含めるための関数です。

ここからコードを分解して解説していきます。

この関数は、pre_get_postsフックにフックされ、検索クエリが実行される前に実行されます。

if ( !is_admin() && $query->is_main_query() && $query->is_search() ) {

上記コードの部分は、検索結果ページかつ管理画面ではない場合に処理が実行されるようにします。

これにより、管理画面での検索結果への影響を避けることができます。

        // カスタムフィールドのキーを指定
        $meta_query = array(
            'relation' => 'OR', // OR検索を行う
            array(
                'key' => 'your_custom_field_key', // カスタムフィールドのキーを指定
                'value' => $query->query_vars['s'], // 検索キーワードを指定
                'compare' => 'LIKE', // 部分一致で検索する
            ),
            // 他のカスタムフィールドがあればここに追加
        );
        $query->set('meta_query', $meta_query); // メタクエリを設定

クエリを定義しているパラメータ内のmeta_queryとは、カスタムフィールドの値を検索クエリに含めるためのメタクエリを設定します。

relationパラメーターがORに設定されているため、複数の条件がOR条件で結合されます。

            array(
                'key' => 'your_custom_field_key', // カスタムフィールドのキーを指定
                'value' => $query->query_vars['s'], // 検索キーワードを指定
                'compare' => 'LIKE', // 部分一致で検索する
            ),

上記コードの部分は、「your_custom_field_key」というカスタムフィールドのキーを指定し、compareに「LIKE」と指定することで検索キーワードに部分一致する値を検索します。

「your_custom_field_key」の部分は、実際のカスタムフィールドのキーに置き換える必要があります。

$query->set('meta_query', $meta_query); // メタクエリを設定

また上記コードは、メタクエリを検索クエリに設定します。

これにより、検索結果にカスタムフィールドの値が含まれるようになります。

最終的に、このコードを使用することで、WordPressの検索結果にカスタムフィールドの値を含めることができます。

カスタム投稿タイプでの検索

次は特定のカスタム投稿タイプでの検索方法について解説していきたいと思います。

以下のコードをfunctions.phpにコピー＆ペーストしてください。

<?php
function custom_search_include_custom_post_type($query) {
    if ( !is_admin() && $query->is_main_query() && $query->is_search() ) {
        // カスタム投稿タイプのみ検索対象にする
        $query->set('post_type', 'custom_post_type_slug');
    }
}
add_action('pre_get_posts', 'custom_search_include_custom_post_type');

上記コードは、WordPressのpre_get_postsフックを使用して、検索結果に特定のカスタム投稿タイプのみを含めるためのものです。

$query->set('post_type', 'custom_post_type_slug'): 

検索クエリに特定のカスタム投稿タイプのみを含めるために、post_type パラメーターを設定します。custom_post_type_slug の部分は、実際のカスタム投稿タイプのスラッグに置き換える必要があります。

このコードを使用することで、WordPressの検索結果に特定のカスタム投稿タイプのみが含まれるようになります。

特定のカテゴリーでの検索

次は特定のカテゴリーでの検索方法について解説していきたいと思います。

以下のコードをfunctions.phpにコピー＆ペーストしてください。

<?php
function custom_search_include_specific_category($query) {
    if ( !is_admin() && $query->is_main_query() && $query->is_search() ) {
        // 特定のカテゴリーの投稿のみ検索対象にする
        $query->set('category_name', 'specific_category_slug');
    }
}
add_action('pre_get_posts', 'custom_search_include_specific_category');

上記コードは、WordPressのpre_get_postsフックを使用して、検索結果に特定のカテゴリーの投稿のみを含めるためのものです。

$query->set('category_name', 'specific_category_slug');

このコードを使用することで、WordPressの検索結果に特定のカテゴリーの投稿のみが含まれるようになります。

投稿者での検索結果の絞り込み

次は特定のカテゴリーでの検索方法について解説していきたいと思います。

以下のコードをfunctions.phpにコピー＆ペーストしてください。

<?php
function custom_search_include_author($query) {
    if ( !is_admin() && $query->is_main_query() && $query->is_search() ) {
        // 特定の投稿者の投稿のみ検索対象にする
        $query->set('author', 123); // 123 は投稿者のユーザーIDです。必要に応じて変更してください。
    }
}
add_action('pre_get_posts', 'custom_search_include_author');

上記コードは、WordPressのpre_get_postsフックを使用して、検索結果に特定の投稿者の投稿のみを含めるためのものです。

$query->set('author', 123);

検索クエリに特定の投稿者の投稿のみを含めるために、author パラメーターを設定します。

123 の部分は、特定の投稿者のユーザーIDに置き換える必要があります。

必要に応じて、検索対象としたい投稿者のユーザーIDに変更してください。

日付範囲での検索結果の絞り込み

次は日付範囲での検索結果の絞り込む方法について解説していきたいと思います。

以下のコードをfunctions.phpにコピー＆ペーストしてください。

<?php
function custom_search_include_date_range($query) {
    if ( !is_admin() && $query->is_main_query() && $query->is_search() ) {
        // 特定の日付範囲の投稿のみ検索対象にする
        $query->set('date_query', array(
            'after'     => '2022-01-01', // 2022年1月1日以降
            'before'    => '2022-12-31', // 2022年12月31日以前
            'inclusive' => true // 範囲に開始日と終了日を含める
        ));
    }
}
add_action('pre_get_posts', 'custom_search_include_date_range');

上記コードは、WordPressのpre_get_postsフックを使用して、検索結果に特定の日付範囲の投稿のみを含めるためのものです。以下にコードの詳細を説明します。

$query->set('date_query', array(...));

検索クエリに特定の日付範囲の投稿のみを含めるために、date_query パラメーターを設定します。

after パラメーターとbefore パラメーターを使用して、検索対象としたい日付範囲を指定します。

inclusive パラメーターがtrueに設定されているため、範囲に開始日と終了日が含まれます。

このコードを使用することで、WordPressの検索結果に特定の日付範囲の投稿のみが含まれるようになります。

特定の投稿ステータスでの検索結果の絞り込み

次は特定の投稿ステータスでの検索結果の絞り込み方法について解説していきたいと思います。

以下のコードをfunctions.phpにコピー＆ペーストしてください。

<?php
function custom_search_include_post_status($query) {
    if ( !is_admin() && $query->is_main_query() && $query->is_search() ) {
        // 特定の投稿ステータスの投稿のみ検索対象にする
        $query->set('post_status', array('publish', 'future')); // 'publish' と 'future' の投稿のみを検索対象にする
    }
}
add_action('pre_get_posts', 'custom_search_include_post_status');

上記コードは、WordPressのpre_get_postsフックを使用して、検索結果に特定の投稿ステータスの投稿のみを含めるためのものです。以下にコードの詳細を説明します。

$query->set('post_status', array('publish', 'future'));

検索クエリに特定の投稿ステータスの投稿のみを含めるために、post_status パラメーターを設定します。ここでは、publish および future の投稿のみを検索対象に設定していますが、必要に応じて他の投稿ステータスを含めることもできます。

このコードを使用することで、WordPressの検索結果に特定の投稿ステータスの投稿のみが含まれるようになります。

まとめ

WordPressのサイト内検索を高度にカスタマイズして検索できるようにする実装方法についての解説は以上になります。

サイト内検索をカスタマイズできるようになれば、一気に実装の幅が広がり今までは手が届かなかった痒い部分に対応できるようになります。

WordPress標準のままの仕様でサイト内検索を実装しても何かと不便な部分もあったりするので、より一層サイト内検索のカスタマイズは重要といえます。

よろしければぜひ当記事をご活用いただけましたら幸いです。