WordPressで検索機能を自作する方法と機能強化プラグイン

  • Web集客コンサルティング
  • WordPress

記事の監修

IT・WEB集客の専門家

波多野 明仁(Akihito Hatano)

WEB業界歴20年。学生時代に50サイトの制作・運営を行い収益化を達成。その後、ITシステム開発会社にてSEを6年間経験し独立。東証プライム企業をはじめ4,000サイト以上を改善してきた実績あり。自社メディアの制作・運営で培ったアクセスアップのノウハウをクライアント企業のWEB集客に活かし、日々活躍中。1年でアクセス数が715倍に増加した企業や、売上が25倍に増加した企業など、法人クライアントの実績多数。

こんにちは。WEBコンサルタントの波多野です。

ユーザーは、GoogleやYahoo! などの検索エンジンと同じように、特定のサイト内でも自分の欲しい情報だけをすぐに見つけたがっています。
そのため、規模が大きいWebサイトであればあるほど、サイト内に検索機能を設置してあるかどうかは、ユーザーの使い勝手を向上させる上でとても重要になります。

ECサイトであれば、ユーザーが欲しい商品にいかに早く辿り着けるか、情報サイトであれば、ユーザーがすぐに知りたい情報をいかに早く提供できるかがポイントとなってきます。

そこで今回は、WordPressでの検索機能の設置方法についてご紹介します。

WordPressで検索機能を自作するために必要なファイルと作り方

WordPressに検索機能を付けるには、大きく2つの方法があります。

①WordPressの標準仕様「ウィジット」使って実装する方法
②PHPファイルから自作で検索機能を作る方法

①はHTMLなどの知識がなくても実装ができる簡単な方法です。
特に初心者の方は、②のPHPと聞くと、少し身構えてしまうかもしれません。

①のウィジットで実装する方法は、簡単ではありますが、検索できる範囲が「投稿」記事のみとなるため機能的とは言えません。もしも固定ページの記事も検索させたいという場合は、②のPHPで自作する必要が出てきます。
しかし、簡単な検索機能であれば、それほど難しいものではなく、基本的にはコードをコピペして実装することができます。

今回は、PHPファイルから自作で検索機能を実装する方法をご紹介します。

検索機能を自作するために必要なファイルと基本仕様

WordPressの検索機能を実装するために必要なPHPファイルは、

searchform.php
search.php

の2つのテンプレートファイルです。

「searchform.php」は、検索フォームおよび検索ボタンを作るためのコードを記述するファイルです。
「search.php」は、検索ボタンを押した後に検索結果画面を表示させるためのコードを記述するファイルです。

なお、この検索フォームでは、単ワード検索と複数ワード検索の両方が出来ますが、複数ワード検索の場合、半角スペースで区切った場合の検索しか対応できません。

例えば、「WordPress プラグイン」というように単語を”半角スペース”で区切って検索した場合、該当するキーワードのページがあれば検索結果が表示されますが、「WordPress プラグイン」というように単語を”全角スペース”で区切って検索すると、該当キーワードのページがあったとしても検索結果が表示されないということです。
違いは、「WordPress」と「プラグイン」の二つのワードの間に、半角スペースが入っているか、全角スペースが入っているかです。

また、WordPressのデフォルトの検索機能では、「固定ページ」「投稿記事」「タイトル」と「本文」からのみ検索を行うことになります。
カテゴリやタグからも検索ワードでヒットさせたい場合は、別途プラグインを使ったり、PHPファイルをカスタマイズすることで対応は可能になります。

こちらのプラグインについてはこの後ご紹介します。

検索フォームの作り方

まずは検索フォームから作成します。
検索フォームは、「searchform.php」です。

①WordPressのテーマディレクトリに、「searchform.php」ファイルを作成します。

②PHPファイルに、以下のコードを記述します。

<form id=”form” action=”自分のサイトURL” method=”get”>
<input id=”s-box” name=”s” type=”text” placeholder=”キーワードを入力”/>
<button type=”submit” id=”s-btn-area”><div id=”s-btn”>検索</div></button>
</form>

これで、検索フォームが作成できました。

③次に、今作成した検索フォームを、画面に表示させるためのコードを追加します。
検索フォームを表示させたいページのファイルに、以下のコードを記述します。

<?php get_search_form(); ?>

検索フォームの作成作業は、これで終わりです。

検索結果の作り方

次に、検索結果を表示させるページを作成します。

①WordPressのテーマディレクトリに、「search.php」ファイルを作成します。

②PHPファイルに、以下のコードを記述します。

<?php if ( have_posts() ) : ?>

<h1><?php printf( __( ‘Search Results for: %s’, ‘altitude’ ), ‘<span>’ . get_search_query() . ‘</span>’ ); ?>の検索結果</h1>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( ‘content’, ‘search’ ); ?>
<?php endwhile; ?>
<?php else : ?>
キーワードに該当する記事がありませんでした。
<?php endif; ?>

これで、検索フォームと検索結果の実装は完了です。
ただし、上記は最も簡単なコード記載のみなので、必要に応じてCSSなどで見た目を整えてください。

WordPressのプラグインを使って検索機能を強化する

上記のデフォルト検索機能だけでは、検索の精度が高いとは言えません。そこで、ユーザーの使い勝手をあげるため、さらにWordPressの検索機能を補うことができるプラグインをいくつかご紹介します。

Search Everything

カテゴリー、タグ、カスタムフィールドなど、WordPressのあらゆる項目を検索できるようにしてくれるプラグインです。

WordPressのデフォルト機能では、検索できる対象がタイトル、本文だけですが、それ以外にも、抜粋、カスタムフィールド、カテゴリー、タグ、カスタムタクソノミー、コメントも検索できるようになるので検索機能性が格段に上がるのでおすすめです。

Search Everything

Enhanced media Library

画像にALTと呼ばれる、画像が表示されなかった場合に代わり、その画像を説明するテキストを設定している場合などは、その設定キーワードをもとに画像検索を行うことができるプラグインです。

ALTを設定していない場合は、該当画像を認識することはできないのでこのプラグインを入れても役立ちませんが、ALT設定もしっかりと行っている場合は便利に利用できます。
例えば、商品販売を行っているECサイトなどは、商品画像に検索されるであろう商品名などのキーワードを入れておくと良いでしょう。

Enhanced media Library

Highlight Search Terms

検索しているキーワードに該当する箇所をハイライト表示させ、検索したキーワードの記事がどこにあるのかを見つけやすくするプラグインです。

設定は簡単で、プラグインをインストールするだけで実装できます。

重要度は高くないかもしれませんが、プラスαの機能を加えたい場合に利用してみると良いでしょう。

Highlight Search Terms

Search &Filter

検索できる範囲を、カテゴリー、タグ、カスタムタクソノミーなどに広げて検索できるようにしてくれるプラグインです。
さらに、この「Search &Filter」のすごいところは、検索機能を組み合わせた絞込検索もできるようになる点です。

また、検索フォームもテキスト検索だけではなく、ドロップダウンやラジオボタン、チェックボックスから設定することができます。

検索結果を表示させる際、次のページに画面遷移せずに同じ画面で結果を返すAjaxを使っているので、即時結果が確認できる点もストレスがありません。

Search &Filter

WordPressで検索機能を自作する方法と機能強化プラグインまとめ

WordPressの検索機能の実装方法と、検索機能を向上させてくれるプラグインについてご紹介してきましたが、いかがでしたでしょうか。

ユーザーにとって検索機能があるかどうかは、Webサイトの利便性に大きく関わります。
Webサイトの規模がそれほど大きくない場合は無理に設置する必要はありませんが、それなりにページ数が増え、求める記事や商品などをメニューからだけで探すのが難しくなってきた場合は、検索機能をつけてあげると親切ですし、結果的にWebサイトの売上にも貢献することになるでしょう。

最後に、WordPressに検索機能をつけたり、プラグインを追加する場合は、必ず事前にバックアップ取ること忘れないようにしてください。

作業は必ずしもスムーズに進まない場合もあるため、何かあった時に元のファイルに戻せるようにしておくことは必須です。
WordPressのバックアップについては、以下のページで詳しくご紹介しているのでわからない方は参考にしてください。

あわせて読みたい
WordPressのバックアップをとるタイミングと方法

また、やはりWordPressの検索機能を自作したり、カスタマイズしたりすることには抵抗があるという場合は、ソライルにご相談ください。

ソライルでは、WordPressに関するお悩みなど、「ここを解決したい!」というピンポイントでの相談でも柔軟にお請けしていますので、まずはお気軽にお問い合わせください。

お問合せはこちら

Web集客コンサルブログ一覧

初回のご相談は無料です。
私たちが直接対応いたします。

無料お問い合わせする

ご相談・お問い合わせ

ホームページやWebサイトのことでお悩みがある方は、
些細なことでもお気軽にご相談ください。

オンライン会議にも対応していますので、
遠方の方のご相談も承っております。

無料お問い合わせする