WordPressの検索機能を使ってサイト内検索フォームを設置する

公開日：2014年2月5日
最終更新日：2019年3月25日

WordPressでは、標準で検索機能が用意されており、簡単なコードの記述で検索フォームを設置することができます。検索する際は、一般の検索エンジンとは少し違う部分があります。ユーザビリティを考えると若干のカスタマイズも必要ですので、それらを解説します。

【コンテンツ】

検索フォームを設置する場所にコードを記述する
検索フォーム部分のCSS設定をする
検索結果を表示するページを用意する
WordPress検索機能の仕様
検索対象を絞り込む
検索条件未入力時の処理を追加する

【記事執筆時の環境】
WordPress 3.8.1

検索フォームを設置する場所にコードを記述する

フォームを設置するには、表示したいページの場所に、
<?php get_search_form(); ?>
と記述するだけです。

これで、以下のようなHTMLコードを出力してくれます。
※<?php echo home_url( '/' ); ?>の部分は実際のURLに変換されます。

<form role="search" method="get" id="searchform" class="searchform" action="<?php echo home_url( '/' ); ?>">
	<div>
		<label class="screen-reader-text" for="s">検索:</label>
		<input type="text" value="" name="s" id="s" />
		<input type="submit" id="searchsubmit" value="検索" />
	</div>
</form>

<div>

</div>

</form>

get_search_form()の動作としては、searchform.phpが存在する場合は、その内容を読み込みます。
searchform.phpが存在しない場合は、上記コードを出力します。

従って、検索フォームをカスタマイズしたい場合は、searchform.phpを作成し、その中に上記コードを参考に内容を記述すればいいわけです。

検索フォーム部分のCSS設定をする

デフォルトでの検索フォームの表示は、下記のようになります。

ここでは、searchform.phpを用意せず、デフォルトコードを使用することとしますが、CSSで若干の修正を加えます。

検索ボックスの前の、「検索:」という文字を消すのと、ボックスの幅をCSSで設定してみます。

.screen-reader-text {
	display: none;
}
#s {
	width:200px;
}

.screen-reader-text {

display: none;

}

#s {

width:200px;

}

【注意！】
ボックスやボタンのデザインはブラウザによって違ってきますので、ボックス幅を大きくするとレイアウト崩れが発生する場合があります。各ブラウザで表示確認し、適切なボックス幅を設定するようにします。特にiOS Safariでは注意が必要です。

検索結果を表示するページを用意する

検索結果を表示するページは、search.phpになります。
search.phpが存在しない場合は、index.phpになります。

検索条件にヒットしない場合はメッセージを表示するなど、検索結果を表示する際は工夫が必要ですので、専用ページとしてsearch.phpを用意するのがよいでしょう。

以下は、get_search_query()で検索文字を取得し見出しに表示させているのと、検索条件にヒットしなかった場合の処理を記述した例です。

<h1>『<?php echo get_search_query(); ?>』での検索結果一覧</h1>
<?php if(have_posts()): ?>
	<?php while(have_posts()): the_post(); ?>
		<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
		<?php the_excerpt(); ?>
	<?php endwhile; ?>
<?php else : ?>
	<p>検索条件にヒットした記事がありませんでした。</p>
<?php endif; ?>

<h1>『<?php echo get_search_query(); ?>』での検索結果一覧</h1>

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

<?php while(have_posts()): the_post(); ?>

<?php the_excerpt(); ?>

<?php endwhile; ?>

<?php else : ?>

<p>検索条件にヒットした記事がありませんでした。</p>

<?php endif; ?>

他によくやるのは、ヒットした件数を「$wp_query->found_posts」を使って表示するくらいです。

WordPress検索機能の仕様

WordPressの検索機能は、一般の検索エンジンとは少し異なる部分があります。
カスタマイズする場合は、それを前提にします。
デフォルト状態での動作仕様は以下のようになっています。

検索対象となるページは、投稿記事と固定ページです。
検索条件は、キーワードのみです。
キーワードが含まれているか対象とするのは本文とタイトルです。抜粋に入力した文章は対象としません。
AND検索するには半角スペースで区切ります。全角スペースを区切り文字として認識させるには、デフォルトで入っているプラグイン「WP Multibyte Patch」を有効にします。
検索条件が未入力で検索をかけると、index.phpを表示します。

検索対象を絞り込む

検索結果に固定ページを表示したくない、あるいは特定のカスタム投稿タイプを指定したいなど、検索対象を絞り込みたい場合があります。

この場合は、posts_searchというフィルターを使ってfunctions.phpに記述します。

以下は、投稿記事とカスタム投稿タイプ'custompost'のみを検索対象とするコードを、functions.phpに記述した例です。

// 投稿だけを検索対象とする
function my_search_condition($search) {
	$search .= " AND (post_type = 'post' OR post_type = 'custompost')";
	return $search;
}
add_filter('posts_search','my_search_condition');

// 投稿だけを検索対象とする

function my_search_condition($search) {

$search .= " AND (post_type = 'post' OR post_type = 'custompost')";

return $search;

}

add_filter('posts_search','my_search_condition');

検索条件未入力時の処理を追加する

検索条件が未入力で検索をかけると、たとえsearch.phpが存在していても、index.phpを呼び出してしまいます。

その場合でも、search.phpを表示させるには、template_redirectというアクションフックを使い、functions.phpに以下のように記述します。

// 検索条件が未入力時にsearch.phpにリダイレクトする
function set_redirect_template(){
	if (isset($_GET['s']) && empty($_GET['s'])) {
		include(TEMPLATEPATH . '/search.php');
		exit;
	}
}
add_action('template_redirect', 'set_redirect_template');

// 検索条件が未入力時にsearch.phpにリダイレクトする

function set_redirect_template(){

if (isset($_GET['s']) && empty($_GET['s'])) {

include(TEMPLATEPATH . '/search.php');

exit;

}

add_action('template_redirect', 'set_redirect_template');

なお、検索条件未入力時には、全件が検索結果となります。
そのケースではメッセージだけを表示し、検索結果を表示しないようにするには、search.phpに条件を追加する必要があります。

以下は、その条件を追加した記述例です。

<?php if (isset($_GET['s']) && empty($_GET['s'])) { ?>
	<p>検索条件が入力されていません。</p>
<?php } else { ?>
	<?php if(have_posts()): ?>
		<?php while(have_posts()): the_post(); ?>
			<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
			<?php the_excerpt(); ?>
		<?php endwhile; ?>
	<?php else : ?>
		<p>検索条件にヒットした記事がありませんでした。</p>
	<?php endif; ?>
<?php } ?>

<?php if (isset($_GET['s']) && empty($_GET['s'])) { ?>

<p>検索条件が入力されていません。</p>

<?php } else { ?>