【初心者向け】WordPressの検索機能を自作する方法とカスタマイズ方法を解説！

【WordPress】検索機能の特徴

WordPressで利用する検索機能の特徴は下記の通りです。

• ウィジェット欄から簡単に追加できる
• 自作する際は2つのphpファイルを作って実装する
• デフォルト設定だとカテゴリとタグを検索できない

各内容について解説します。

ウィジェット欄から簡単に追加できる

検索フォーム機能はWordPressのウィジェットに標準搭載されているので、簡単に実装できます。

実装するには、WordPress管理画面から「外観」にマウスを当て、表示されたメニュー欄にある「ウィジェット」をクリックします。

ウィジェット一覧が表示されたら、下にスクロールして下記画像のように「検索」と書かれたウィジェットを探します。 検索ウィジェットの右にある三角ボタンをクリックすると、検索欄を指定できる場所が表示されます。

指定したい場所をクリックして「ウィジェットを追加」ボタンを押すと県楽フォームを追加できます。

自作する際は2つのphpファイルを作って実装する

WordPressに検索機能を自作して実装するには、「searchform.php」「search.php」という2つのファイルを用意します。

searchform.phpは検索フォームと検索ボタンの外観を作成するファイルで、formタグやinputタグを使って検索フォームを作成します。

search.phpは検索結果を表示するファイル。ユーザーが検索した内容をphpで条件分岐して出力します。

デフォルトではカテゴリとタグを検索できない

WordPressにデフォルトで搭載されている検索フォームは、入力した内容をタイトルと本文から探して表示するシステムなので、カテゴリとタグを検索できません。

カテゴリーとタグを検索結果に表示するには、プラグインを使ってカスタマイズする必要があります。

WordPressで検索機能を自作する方法

WordPressで検索機能を自作する方法について、サンプルコードを用いて解説します。

サンプルコードをコピペして貼り付けるだけ実装できるので、WordPressで独自テーマを作る際に役立ててみてくださいね！

searchform.phpで検索フォームを作成する

まず、searchform.phpというファイルを作成して、利用するテーマのフォルダ内に配置します。

配置後はWordPress管理画面に移動し、外観という欄にマウスを当てて、表示されるメニュー欄から「テーマファイルエディター」をクリックします。

下記の画面が表示されたら、画面右にある「テーマファイル」欄にsearchform.phpが反映されているかチェックしましょう。

searchform.phpをクリックして、画面中央の入力欄に下記のコードを指定します。

サンプルコード

<form action="<?php echo esc_url(home_url('/')); ?>" method="get" class="Search-form-style">
    <input type="text" name="s" value="<?php the_search_query(); ?>" placeholder="キーワードを入力" id="s" class="form-text">
    <button type="submit" id="s" class="search-btn"><span class="dashicons dashicons-search"></span></button>
</form>

inputタグが検索欄でbuttonタグが検索ボタンです。formタグ内にあるmethod属性の値をgetにすることで、ユーザーが検索した内容をWebサイトのデータベースから取得します。

get_search_formテンプレートで検索フォームを表示する
get_search_formは、searchform.phpファイルの内容を出力するテンプレートです。get_search_formテンプレートを使うことで、searchform.phpで作った検索フォームを好きな場所に表示できます。

たとえば、サイドバーに検索フォームを表示したいときは下記のように入力します。

<aside>
    <div class="sidebar">
        <div class="search-form">
            <?php get_search_form(); ?>
        </div>
    </div>
</aside>

<?php get_search_form(); ?>を使ってsearchform.phpの内容を読み取っているので、HTML上では下記のように表示されます。

<aside>
 <div class="sidebar">
  <div class="search-form">
   <form action="<?php echo esc_url(home_url('/')); ?>" method="get" class="Search-form-style">
    <input type="text" name="keyword" value="<?php the_search_query(); ?>" placeholder="キーワードを入力" id="s" class="form-text">
    <button type="submit" class="search-btn"><span class="dashicons dashicons-search"></span></button>
   </form>
  </div>
 </div>
</aside>

検索結果を実装する

検索フォームに入力されたキーワードの検索結果はsearch.phpに表示されます。 WordPressにはテンプレート階層という仕組みがあり、呼び出す内容によって表示するテンプレートの優先順位が決まっています。

検索フォームに関してはsearch.phpが一番優先度が高く、次にindex.phpという順番です。search.phpファイルが存在しないときは、index.phpファイルが表示されます。

検索結果のサンプルコードは下記の通りです。

<div class="search-result">
    <p><?php echo '「'.get_search_query().'」の検索結果：' .$wp_query->found_posts. ' 件の記事が該当しました。';?></p>
</div>

<div class="container">
    <main class="main">
    <?php if (have_posts()): ?>
        <?php while(have_posts()) : the_post();?>
        <div class="contents">
          <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
          <?php the_excerpt(); ?>
          <div class="content-date">
            <p>投稿日：<?php echo get_the_date(); ?>投稿時間：<?php the_time(); ?>カテゴリー：<?php the_category(" , "); ?></p>
          </div>
        </div>
       <?php endwhile; ?>

       <?php else: ?>
           <p>該当する記事はありませんでした。</p>
       <?php endif; ?>
    </main>
</div>

get_search_query関数は、ユーザーが検索フォームに入力した文字列を取得する関数です。

$wp_queryはfound_postsというプロパティを保持しており、ページを読み込む際データベースから取得した記事の総数を表示できます。

次に、have_posts関数を使って該当する記事があるかチェックし、the_post関数で記事の情報を取得します。

取得した記事の情報は、WordPressに標準搭載されている下記の関数で実装できます。

• the_title：記事のタイトルを取得
• the_permalink：記事のパーマリンク(URL)を取得
• the_excerpt：記事の抜粋を表示
• get_the_date：投稿日時を表示
• the_time：投稿時間を表示
• the_category：カテゴリー名を表示

実行結果

プラグインで検索フォームをカスタマイズする方法

先述したとおり、デフォルトのWordPress検索フォームだとカテゴリーやタグが検索結果に表示されません。

そこで、WordPressのプラグインである「WP Extended Search」を使って、検索結果にカテゴリーとタグを追加する方法について解説します。

簡単な入力作業だけで設定できるので、検索機能の幅を広げたいときに活用してみてくださいね！

https://tcd-theme.com/2021/10/wp-extended-search.html

WP Extended Searchをインストールする

最初に、WordPress管理画面の「プラグイン」欄から「新規追加」をクリックし、画面右上にある検索欄に「WP Extended Search」と入力します。 上記画面のような画面が表示されたら、右上にある「インストール」ボタンをクリック。インストールが終わると「有効化」というボタンが表示されるので、再度クリックして有効化します。

WP Extended Searchの詳細設定

有効化が完了すると、WordPressLICLIのメニュー欄に「Extended Search」が追加されています。そちらにマウスカーソルを当てて、表示された選択肢の中から「Search Settings」をクリックしましょう。

表示画面の中にある「Select Taxonomies」の入力欄から、カテゴリーとタグを指定することで検索結果に追加できます。

ほかの設定内容は下記の通りです。

• Terms Relation Type：AND検索かOR検索を指定できる
• Match the search term exactly：完全一致検索の有無を指定
• Posts per page：検索結果の表示件数を指定
• Search Results Order：検索結果の並び順を「Ascending（昇順）」か「Descending（降順）」で指定

各内容について解説します。

AND検索とOR検索

AND検索とは、複数の検索キーワードを含めた記事を表示する条件。OR検索は、複数の検索キーワードのいずれかが該当する記事を表示する条件になります。

たとえば、検索欄に「東京 レストラン」と入力した場合、AND検索だと「東京」と「レストラン」の両方が指定されている記事を表示します。OR検索だと「東京」か「レストラン」のいずれかのキーワードに該当する記事を表示します。

検索したユーザーは、東京にあるレストランについて知りたくて調べたという意図があるので、AND検索の方がユーザーの以降に沿った検索条件になるのです。

完全一致検索

名前の通り、検索結果で表示する記事の件数を指定します。上記画像だと、検索結果で表示する記事は最大8記事です。

表示件数が少ないと希望の記事が表示されない可能性があるので、記事数に合わせて調節するとよいでしょう。

検索結果の条件と並び順

検索結果の条件は、Search Results Orderのプルダウンメニューから指定できます。メニューの内容は下記の通りです。

• Relevance（関連のある記事）
• Date（日付）
• Last Modified Date（最後に編集した日）
• Post Title（記事のタイトル）
• Post Slug（カテゴリーやタグなどのスラッグ）
• Post Type（投稿のタイプ）
• Number of Comments（コメントの数）
• Random（ランダム）

また、並び順は「Ascending（昇順）」か「Descending（降順）」で指定 できます。

たとえば「Number of Comments」と「Descending（降順）」を選択した場合、コメント数の多い記事順に表示されます。

特にこだわりがない場合は、検索条件を「Relevance」で並び順を「Descending」にすれば問題ありません。

最後に、画面左下にある「Save Changes」ボタンをクリックして設定完了です。

WordPressの検索機能まとめ

WordPressに検索機能を追加するには、テーマのウィジェットから追加する方法とPHPを使って自作する方法の2通りあります。

デフォルトの検索機能だとカテゴリーとタグが指定できないので、「WP Extended Search」プラグインを使うことがおすすめ。本記事を参考にして、利便性の高い検索機能を作ってみてくださいね！