WordPressの記事検索機能を作る方法

WordPressの記事検索は、記事検索フォームのHTMLと検索結果を表示するテンプレートを用意するだけで実装することができます。

同じように「記事を検索する機能」としてはGoogleカスタム検索を利用する方法もあります。Googleカスタム検索は、検索したキーワード部分が太字になるなど検索結果が見やすい反面、ページがGoogleにインデックスされていないと検索対象にはなりません。
ホームページの状況に応じて使い分けましょう。

WordPressの記事検索の仕組み

WordPressの記事検索は、下のような仕組みになっています。

記事検索フォームのHTMLを書く「searchform.php」と、記事検索結果を表示する「search.php」を用意するだけです。
search.phpは記事の一覧形式で表示すれば良いので、category.phpなどの一覧を表示する他のテンプレートを元に作成すると手間が省けます。

記事検索フォーム用のテンプレートを作成

まずは記事検索フォームのHTMLを記述したテンプレートを作成します。以下のHTMLを記述したファイルをsearchform.phpという名前で保存して、WordPressのテーマフォルダにアップロードします。

	<form role="search" method="get" id="searchform" action="/" >
	<input type="text" value="" name="s" class="s" />
	<input type="submit" class="searchsubmit" value="検索" />
	</form>

記事検索フォームは、WordPressで作ったホムページのトップページのURLにGETでデータを渡すように設定します。また、入力フィールドの名前はsにする必要があります。関数リファレンスにはlabelも必ず含めるようにと書かれていますが、無くても検索機能は動きます。

searchform.phpは作成しなくても記事検索フォームを表示する場所に直接HTMLを記述しても大丈夫です。
ただ、テンプレート化しておくことで、記事検索フォームを複数の場所に設置する場合や、デザインなどのカスタマイズがやりやすくなるというメリットもあります。

スポンサーリンク

検索結果用のテンプレートを作成

検索結果の表示用にテンプレートsearch.phpを作成します。以下のコードをコピペしてファイルを作成後、テーマフォルダにアップロードします。

<?php get_header(); ?>

<?php
	global $wp_query;
	$total_results = $wp_query->found_posts;
	$search_query = get_search_query();
?>

<h1><?php echo $search_query; ?>の検索結果<span>（<?php echo $total_results; ?>件）</span></h1>

<?php
if( $total_results >0 ):
if(have_posts()):
while(have_posts()): the_post();
?>

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>

<?php endwhile; endif; else: ?>

<?php echo $search_query; ?> に一致する情報は見つかりませんでした。

<?php endif; ?>

それぞれの処理を解説します。

3行目〜7行目

検索されたクエリー（検索キーワード）と検索結果の件数を取得して変数に格納します。

<?php
	global $wp_query;
	$total_results = $wp_query->found_posts;
	$search_query = get_search_query();
?>

9行目

検索キーワードと検索結果件数を<h1>で括って表示します。

<h1><?php echo $search_query; ?>の検索結果<span>（<?php echo $total_results; ?>件）</span></h1>

11行目〜24行目

検索結果が0件でなければ投稿を表示させ、0件の場合にはメッセージを表示させます。
12行目の「if( $total_results >0 ):」で検索結果件数の判定をしています。

<?php
if( $total_results >0 ):
if(have_posts()):
while(have_posts()): the_post();
?>

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>

<?php endwhile; endif; else: ?>

<?php echo $search_query; ?> に一致する情報は見つかりませんでした。

<?php endif; ?>

検索されたキーワードをパンくずにも表示させる

プラグインなしの一番簡単なパンくずリスト表示方法でご紹介しているパンくずリストを表示させる関数には、検索されたキーワードをパンくずに挿入して表示する処理が組み込まれています。

if( is_search() ){
		echo '<ul><li><a href="' . home_url() . '/">ホーム</a> ></li><li>「'. $query .'」の検索結果</li></ul>';
}

オリジナル関数のthe_breadに、検索キーワードを引数として与えて、検索結果ページを表示している時だけに「○○」の検索結果と表示させるようにしています。

get_search_formで検索フォームを表示

記事検索フォームを表示したい場所にget_search_formを、以下のように書きます。

<?php get_search_form(); ?>

この関数は、最初に作成したsearchform.phpの内容を表示させる関数です。
ちなみにsearchform.phpを作成せずにget_search_formを使うと、下のような検索フォームが表示されますが、これはWordPressのデフォルトの検索フォームを表示しているためです。

検索フォームのデザインを変える

少しだけ検索フォームのデザインを調整しましょう。
以下のようになるように、style.cssにスタイルを定義します。

.s{
	border: 1px solid #D6D6D6;
	margin: 0 0 0 10px;
	height: 24px;
	width: 180px;
}
.searchsubmit{
	border: 1px solid #999;
	background: #999;
	padding: 6px 20px;
	color: #FFFFFF;
	font-size: 0.9em;
}

これでWordPressの機能を使った検索フォームの完成です。

カテゴリを指定して検索できるようにする方法

記事のカテゴリを指定して検索ができるように、検索フォームをカスタマイズしてみましょう。

searchform.phpに以下のテンプレートタグを書き加えます。

	<form role="search" method="get" id="searchform" action="/" >
	<input type="text" value="" name="s" class="s" />
	<input type="submit" class="searchsubmit" value="検索" />
	
	<!--▼書き加える-->
	<div>カテゴリ：<?php wp_dropdown_categories( 'show_count=1&hierarchical=1' ); ?></div>
	
	</form>

「wp_dropdown_categories」はドロップダウンリストでカテゴリーの一覧を表示するテンプレートタグ。
これだけで、カテゴリーを指定して記事検索ができるようになりました。

CSSでデザインを整えておきましょう。

#searchform div{
	margin-left:10px;
}
.postform{
	width:180px;
	height:24px;
	margin:3px 0;
}

デザインを整えると下のようになります。

「役にたった」と思ったらシェアお願いします