WordPress に検索フォームを組み込む方法を紹介します。
例えば、WordPress サイトに検索フォームを組み込んで、投稿された記事を検索できるようにするために便利な方法です。
検索フォームの実装には、検索フォームのテンプレート作成と検索結果ページの作成が必要です。この作成方法とよくリクエストされるカスタマイズ方法を合わせて紹介します。
- 検索フォームのテンプレートを作成
- 検索フォームの設置
- 検索結果ページの作成
- 検索結果ページのタイトルをカスタマイズする
- 投稿タイプを指定して検索対象を絞り込む
- カテゴリやカスタムフィールドも検索対象にする
- 検索結果ページで検索フォームに検索キーワードを残す方法
- 検索ワードをハイライトして表示する方法
検索フォームのテンプレートを作成
まずは検索フォームのテンプレートを作りましょう。
テーマディレクトリに、ファイル searchform.php を作成します。
作ったテンプレートファイルに次のコードを追加してください。
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
<input type="text" name="s" id="s" placeholder="SEARCH"/>
<button type="submit">検索する</button>
</form>
placeholder や buttonの文言は自由に変更してください。
これで検索フォームのベースは完成です。
検索フォームの設置
作った検索フォームのテンプレートは、関数 get search form で任意のテンプレートの好きな場所に追加できます。
次のコードを、検索フォームを設置したい場所に追加します。
<?php get_search_form(); ?>検索結果ページの作成
次に検索結果を表示するためのページテンプレート search.php を作成します。
テーマディレクトリに search.php ファイルを作成。
作ったテンプレートファイルに次のコードを追加します。
<?php if (have_posts()): ?>
<?php
if (isset($_GET['s']) && empty($_GET['s'])) {
echo '検索キーワード未入力'; // 検索キーワードが未入力の場合のテキストを指定
} else {
echo '“'.$_GET['s'] .'”の検索結果：'.$wp_query->found_posts .'件'; // 検索キーワードと該当件数を表示
}
?>
<ul>
<?php while(have_posts()): the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a>
</li>
<?php endwhile; ?>
</ul>
<?php else: ?>
検索されたキーワードにマッチする記事はありませんでした
<?php endif; ?>
ここまでできたらひとまず完成。
表示された検索フォームにキーワードを入力して動作を確認してみましょう。
検索結果ページのタイトルをカスタマイズする
ページタイトルの表示に wp_title などを使用していると、
検索結果ページで定型のタイトルが表示されます。
この時に表示されるタイトルをカスタマイズしたい場合は、
次のコードを functions.php に追加します。
// 【出力カスタマイズ】検索結果のタイトルをカスタマイズ
function wp_search_title($search_title){
if(is_search()){
$search_title = '「'.get_search_query().'」の検索結果';
}
return $search_title;
}
add_filter('wp_title','wp_search_title');
投稿タイプを指定して検索対象を絞り込む
投稿タイプを指定して検索対象を絞り込む方法を紹介します。
例えば、投稿（post）と固定ページ（page）の他に、カスタム投稿（blog）を検索対象にしたい場合、
次のコードを functions.php に追加します。
/* 【出力カスタマイズ】投稿タイプを指定して検索対象を絞り込む */
function SearchFilter($query) {
if ( !is_admin() && $query->is_main_query() && $query->is_search() ) {
$query->set('post_type', array('post', 'blog', 'page')); // カスタム投稿タイプ hogehoge を追加
}
}
add_action( 'pre_get_posts','SearchFilter' );
上記コードの4行目、
$query->set('post_type', array('post', 'page'));
この部分に手を加えます。
例えばカスタム投稿タイプ「ブログ（スラッグ：blog）」を加える場合は次のように追加します。
array('post', 'page', 'blog')
または register_post_type 関数を使って WordPress へカスタム投稿タイプを追加している場合は、
パラメーターに exclude_from_search を加えることで対応が可能です。
例えば、カスタム投稿タイプを検索に含める場合は register_post_type の値を false にしてパラメーターとして追加します。
'exclude_from_search' => false,逆に、検索に含めない場合は register_post_type の値を true にしてパラメーターとして追加します。
'exclude_from_search' => true,末尾のカンマは挿入箇所に応じて調整してください。
カテゴリやカスタムフィールドも検索対象にする
カスタムフィールドやカテゴリなどを検索対象に含める場合はプラグインを使うと簡単です。
例えば Search Everything などは導入が簡単でおすすめですが、
サポートが終了しているプラグインも多いため注意が必要です。
カスタムフィールドやカテゴリを検索対象とした場合、and検索が意図した通りに動かない場合があります。
実装を決める際は、検証作業を入念に行うことをおすすめします。
検索結果ページで検索フォームに検索キーワードを残す方法
検索結果ページに遷移すると検索フォームに入力されたキーワードは消えてしまいます。
最初に検索したキーワードに追加して検索を続けたい場合もあると思います。
その場合、検索結果ページで検索フォームに検索キーワードが入力されるように検索フォームのテンプレートを調整します。
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
<input type="text" name="s" id="s" placeholder="<?php if(!is_search()){ echo 'SEARCH';} ?>" value="<?php if(is_search()){ echo get_search_query();} ?>"/>
<button type="submit">検索する</button>
</form>
input タグの placeholder と value の値にif文を追加します。
検索ワードをハイライトして表示する方法
検索結果ページで検索ワードをハイライトして表示する方法を紹介します。
次のコードを function.php に追加します。
/*【検索カスタマイズ】検索ワードをハイライトする */
function highlight_search_word($text){ // 関数「highlight_search_word」を定義
if(is_search()){ // 検索ページが表示されている時に実行
$keys = implode('|', explode(' ', get_search_query())); // 検索ワードを分割して配列にして返す
$text = preg_replace('/('. $keys .')/iu', '<mark>\0</mark>', $text); // 該当ワードを mark で囲む
}
return $text; // 変更した値を呼び出し元に戻す
}
add_filter('the_title', 'highlight_search_word'); // タイトルに適用
add_filter('the_content', 'highlight_search_word'); // 本文に適用
add_filter('the_excerpt', 'highlight_search_word'); // 抜粋に適用
検索ワードのハイライトには mark タグを使用しています。
この方法の場合、例えば画像の alt に get_the_title() を使うと、
alt にタグが挿入されてしまいます。
そのため strip_tags() を使ってタイトルからタグを除く処理を追加して対応します。
<?php echo strip_tags(get_the_title()); ?>まとめ
WordPress に検索フォームを組み込む方法を紹介しました。
