【ワードプレス】テーマの作り方⑫：サイト内検索を追加＆カスタマイズする

ウェブサイトに「サイト内検索」機能があると、サイト訪問者が読みたいページを見つけやすくなるというメリットがあります。

今回は、この「サイト内検索」をワードプレスのテーマに追加する方法について解説していきたいと思います。

ワードプレスに用意されているサイト内検索

といっても、実は０からテーマを開発する場合でもウィジェット表示さえできていれば、ウィジェットを追加するだけでサイト内検索はできるようになっています。

ご自身のテーマでウィジェットの表示がまだできていない場合は、まずは下のページを参考にしてウィジェットエリアを追加し、ウィジェットを表示できるようにテーマをカスタマイズしていただければと思います。

【ワードプレス】テーマの作り方⑤：ページにウィジェットを表示する

ウィジェットエリアにワードプレスにもともと用意されている「検索」ウィジェットを登録すれば、検索フォームは表示されるようになります（見た目は違うと思います）。

また、この検索フォームに検索したいキーワードを記述して検索実行すれば、「基本的に」検索が実行されて結果がページに表示されるようになっているはずです。

わざわざ「基本的に」と書いたのはテーマの作りによって表示されない場合があるためです。もしかしたら検索結果が表示されない方もいるかもしれないです。

ただ検索結果が表示されないからといって、テーマがおかしいというわけではないので安心してください。

この理由などは後ほど説明していきますし、現状検索結果が表示されなくても、少し手を加えれば表示できるようになりますので安心してください。

とりあえず、ここまで説明したように、ワードプレスではもともとサイト内検索を行う機能が用意されています。

ですので、用意されている検索フォームや検索結果ページで問題ない方は、このページは飛ばしても良いです。

ですが、現状の検索フォームや検索結果ページで満足できない方は、カスタマイズすることをオススメします。

ここからは、まずそのカスタマイズを行う上で知っておくと役に立つ「ワードプレスでのサイト内検索の仕組み」を解説し、その後「サイト内検索をカスタマイズする方法」について説明していきたいと思います。

ワードプレスでのサイト内検索の仕組み

ではワードプレスでのサイト内検索がどのように行われているかについて説明していきます。

サイト内検索は、検索キーワードを入力する「検索フォーム」と検索結果を表示する「検索結果ページ」の２つにより実現されています。

スポンサーリンク

検索フォーム

検索フォームとは検索キーワードを入力するフォームで、このウェブサイトでもサイドバー（スマホで見ている方はページの最下部付近）に表示されていることが確認できると思います。

ワードプレスのテーマでは、この検索フォームは「ウィジェット」として実現されていることが多いです。もちろんテーマ自体に埋め込んでしまっても良いのですが、ウィジェットの方が取り外しができるのでテーマの拡張性が高くなり便利です。

また、この検索フォームのウィジェットは下記ファイルで作成されています。

ワードプレスインストールフォルダ/wp-includes/widgets/class-wp-widget-search.php

ですので、このファイルのソースコードを読めば、検索フォームがどのように作成されているかを調べることができます。

ポイントは widget メソッドの中で get_search_form 関数が実行されている点です。

この get_search_form 関数では下記の処理が実行されます。

• テーマ内に searchform.php が存在する場合は、searchform.php を実行して検索フォームを表示する
• テーマ内に searchform.php が存在しない場合は、ワードプレスにもともと用意された HTML を出力して検索フォームを表示する

ですので、searchform.php を作成し、検索フォームを表示する HTML を出力するようにすれば、独自に検索フォームをカスタマイズすることができます。この具体的例については独自にサイト内検索をカスタマイズする方法で紹介します。

検索結果ページ

検索フォームにキーワードを入力して検索を実行すると、下記のページが読み込まれ、検索結果結果が表示されます。

トップページのURL/?s=検索キーワード

例えばこのサイトで「ワードプレス 」と検索を行うと、下記の URL のページ表示が行われます。

https://daeuwordpress.com/?s=ワードプレス

この形式の URL で表示されるページが検索結果ページになります。「?s=検索キーワード」の部分が検索キーワードによる検索結果ページを表示するための識別子の役割を果たしています。

検索結果ページにおいても、ページ表示要求を受け付けるとワードプレスが起動し、ページを表示するための処理が行なわれます。

この際に行われる表示の処理は、基本的に通常の投稿記事ページが表示される時と変わらず、大きく分けると下記の３つが行われます。

• ワードプレスの起動
• メインクエリの発行による投稿データの取得
• テンプレートファイルの選択

通常の投稿記事ページが表示される時と、検索結果ページが表示される時では、「メインクエリの発行による投稿データの取得」と「テンプレートファイルの選択」が異なります。

検索結果ページ表示時のメインクエリの発行による投稿データの取得

通常の投稿記事ページ表示時には、その投稿記事の投稿データ（タイトルや本文など）を取得できるようにメインクエリが作成されます。

それに対して、検索結果ページ表示時には検索結果となる複数の投稿記事の投稿データが取得されるようにメインクエリが自動的に作成されます。

おそらくですが、検索キーワードがタイトルや本文に含まれる投稿記事が抽出できるようにメインクエリは作成されていると思います。

ですので、テーマ開発者はわざわざ検索キーワードに対して検索を行うような処理を自分でプログラミングする必要はありません。

このメインクエリの発行により取得された投稿データをテンプレートファイルでページに表示さえしてやれば、結果として検索キーワードに対する検索結果を表示することができます。

メインクエリって何？という方は是非下記のページも参考にしていただければと思います。

検索結果ページ表示時のテンプレートファイルの選択

またワードプレスでは投稿記事等のページを表示する際には、ルールに従ってテンプレートファイルが選択されます。この辺りは下のページで解説していますので参考にしていただければと思います。

【ワードプレス】テーマの作り方③：テンプレートファイルでページの種類ごとに表示を切り替える

検索結果ページ表示時にも同様にしてルールに従ってテンプレートファイルが選択されます。

このルールは下記のようになります。

• search.php がテーマに存在する場合：search.php が選択される
• search.php がテーマに存在しない場合：index.php が選択される

０からテーマを開発している場合は、search.php が無いため index.php が選択されて実行されることになります。

もし index.php でメインループ等でメインクエリで取得された投稿データを表示している場合は検索結果が自動的に表示されているはずです。そうで無い場合は検索結果は表示されていないと思います。

この辺りがワードプレスに用意されているサイト内検索でテーマによっては検索結果が表示されないと説明した理由になります。

また上記のルールの通り、search.php がテーマに存在すれば検索結果ページ表示時には search.php が選択されて実行されるようになります。

ですので search.php を作成して PHP を記述してやることで、独自に検索結果ページをカスタマイズすることができます。

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

それでは独自にサイト内検索の特に見た目部分をカスタマイズする方法について説明していきたいと思います（検索アルゴリズム自体をカスタマイズする方法では無いので注意してください）。

スポンサーリンク

検索フォームをカスタマイズする

検索フォームをカスタマイズするためには下記を行います。

• テーマに searchform.php を作成する
• searchform.php に検索フォームを出力するための PHP を記述する

テーマに searchform.php を作成する

まずはテーマに searchform.php を作成しましょう。作成する場所は下記になります。

ワードプレスインストールフォルダ/wp-contents/themes/テーマ名/

他のテンプレートファイル（single.php や page.php など）と並べて searchform.php を設置する感じですね。

searchform.php に検索フォームを出力するための PHP を記述する

続いて searchform.php に検索フォームを出力するための PHP を記述します。

簡単な例ですが、下記のように searchform.php を作成すれば、

<form role="search" method="get" id="searchform" class="searchform" action="<?php echo home_url( '/' ); ?>">
	<div>
		<p class="search-title">
		<?php
		bloginfo( 'name' );
		echo '内を検索';
		?>
		</p>
		<input type="search" id="searchinput" name="s" value="" />
		<button type="submit" id="searchsubmit">検索実行</button>
	</div>
</form>

検索ウィジェットに表示される検索フォームが下図のように変わります。

設定した class や id に対してスタイルを設定してやれば見た目も当然変えることができます。

こんな感じで好きなように searchform.php を作成すれば検索フォームをカスタマイズすることができます。基本的に好きなように記述すれば良いですが、下記には気をつけてください。

• input タグの name 属性には必ず “s” を指定

この name 属性が “s” でない場合は、検索実行時に表示されるページのテンプレートファイルとして search.php が選択されませんので注意してください。

前述の通り検索実行時に表示される検索結果ページは下記のように URL を指定して表示されます。

ウェブサイトのURL/?s=検索キーワード

この “s” 部分が input タグの name 属性で指定された文字列になります。

name 属性を “s” 以外にすると上記 URL も変わってしまうので、結果として検索結果ページが表示されなくなってしまいます。

検索結果ページをカスタマイズする

次は検索結果ページをカスタマイズする方法について説明します。

前述の通り、サイト内検索が行われた時、search.php があるときはページ表示時に search.php が選択され実行されるようになります。

ですので、下記により検索結果ページをカスタマイズすることができます。

• テーマに search.php を作成する
• search.php に検索結果を出力するための PHP を記述する

また下記を行うことでページに表示する検索結果を変更することもできます。

• 検索結果ページ表示時のメインクエリを変更する

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

まずはテーマに search.php を作成しましょう。作成する場所は searchform.php と同様に下記になります。

ワードプレスインストールフォルダ/wp-contents/themes/テーマ名/

search.php に検索結果を出力するための PHP を記述する

search.php に記述した PHP により、検索結果ページが表示されるようになります。

検索結果ページには下記のようなことを記述すれば良いと思います。

• 検索キーワード
• 検索されたページのタイトル（リンク付き）
• 検索結果がない場合にその旨を表示

例えば簡単なものなら下記のように search.php を作成すれば良いです。

<?php
// ヘッダーを表示.
get_header();

echo '<div id="content">';
// 検索キーワードを取得.
$keyword = esc_attr( get_search_query() );


// 検索キーワードを表示.
echo '<h2>「' . $keyword . '」の表示結果</h2>';

// 検索でページが見つかったかどうかを判断.
if ( have_posts() ) {
	// 見つかった場合はメインクエリで投稿データが取得されている.
	while ( have_posts() ) {
		// １ページずつ投稿データを取得して情報を表示.
		the_post();
		$post_link  = get_the_permalink();
		$post_title = get_the_title();

		echo '<h2>';
		echo '<a href="' . $post_link . '">' . $post_title . '</a>';
		echo '</h2>';

	}
} else {
	// ページが見つからなかった場合.
	echo 'ページが見つかりませんでした';
}
echo '</div>';

get_sidebar();
get_footer();
?>

表示結果は下記のようになります。

この例はかなり質素ですが、スタイル設定を行えば見た目も自分好みに変更することができます。

また検索キーワードは get_search_query 関数によって取得することが可能です。

searchform.php と違って注意点もないので search.php は自由に記述しても良いです。サイト訪問者が探しているページを見つけやすいようにどんどんカスタマイズしましょう！

検索結果ページ表示時のメインクエリを変更する

また検索ページ表示時に発行するメインクエリを変更することもフックを使えば可能です。

例えば functions.php に下記を追記すれば、検索結果を１５ページ分まで取得することができるようになります。

<php?/**
 * 検索結果ページ表示時のメインクエリを変更
 *
 * @param in $query : クエリ.
 */
function change_main_query( $query ) {
	if ( ! is_search() ) {
		return;
	}
	$query->set( 'posts_per_page', '15' );
}

add_action( 'pre_get_posts', 'change_main_query' );
?>

上記は検索ページ表示時のメインクエリを変更する記述になります。

こんな感じでメインクエリを変更してやれば、取得できる投稿データが変化し、より自分好みの検索結果ページにカスタマイズすることが可能です。

フックって何？と言う方は是非下記ページも参考にしてください。

ワードプレスのフックとは？使い方は？初心者向けに分かりやすく解説します！

まとめ

このページではサイト内検索をテーマに追加、そしてカスタマイズする方法について解説しました。

もともとワードプレスにはサイト内検索を行うための機能が備わっていますが、カスタマイズなどを行うためには searchform.php や search.php を作成して PHP を記述してやる必要があります。

注意点は検索フォームの「input タグの name 属性には必ず “s” を指定」をすることくらいです。是非このページを参考にして、ページ訪問者がより読みたい記事を見つけやすくなるテーマを開発してみてください！