WordPressで検索フォームと検索結果ページを実装する方法を紹介します。
検索フォーム｜searchform.php
検索フォームのWordPressテンプレートファイルは下記のとおりですが、自作しなくても検索フォームが使える仕組みになっています。
searchform.php初期設定の検索フォームのコード
WordPressで検索フォームを設置するには下記の関数を設置したいテンプレートファイルに書く必要があります。
<?php get_search_form(); ?>このとき、検索フォームのテンプレートファイル「searchform.php」を自作していなくても、下記のデフォルトのPHPが返される仕組みになっています。
<form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( 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>検索フォームをカスタマイズしたい場合
初期設定の検索フォームをカスタマイズしたい場合には次の２つの方法があります。
- 初期設定の検索フォームコードのクラス属性にCSSを当てる。
- 初期設定の検索フォームのコードを元に好みのsearchform.phpを作る
自由度が高いのは②の方法で、検索フォームのテンプレート自作です。これについてはインターネットにカスタムした検索フォームのコード記述例が多く紹介されています。
検索結果ページの実装｜search.php
検索結果ページは自作しないと表示されませんので、その作り方を解説していきます。
テンプレートファイル作成｜search.php
検索結果ページのテンプレートファイルは下記のとおり「search.php」です。
search.php基本的には、このテンプレートファイルに記事一覧ページ（archive.phpなど）のコードを載せてカスタマイズすれば実装できます。
下の記述例は、さらに検索キーワードが未入力のまま検索ボタンが押された時の処理も条件分岐で合わせて行っています。
<!-- 未入力のまま検索した時の処置 -->
<?php if (isset($_GET['s']) && empty($_GET['s'])): ?>
<?php echo '検索キーワードが入力されていません。'; ?>
<?php else: ?>
<!-- 検索結果タイトル -->
<h1>
<?php the_search_query(); ?>の検索結果 : <?php echo esc_html($wp_query->found_posts); ?>件
</h1>
<!-- 検索結果のループ文 -->
<ul>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>">
<h2><?php the_title(); ?></h2>
</a>
</li>
<?php endwhile; ?>
<?php else : ?>
<p>お探しの記事は見つかりませんでした。</p>
<?php endif; ?>
</ul>
<?php endif; ?>未入力で検索した場合
未入力でキーワード検索された場合に全件表示させないためには、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に記述します。
<?php if (isset($_GET['s']) && empty($_GET['s'])): ?>
<?php echo '検索キーワードが入力されていません。'; ?>
<?php else: ?>
<!-- 検索結果タイトル文 -->
<h1>
<?php the_search_query(); ?>の検索結果 : <?php echo esc_html($wp_query->found_posts); ?>件
</h1>
<!-- 以下、検索結果のループ文 -->
<?php endif; ?>検索対象の投稿タイプ指定
functions.phpには、検索対象とするページの指定を書く必要があります。
下の記述例は、４行目に、投稿タイプ（post）、固定ページ（page）およびカスタム投稿タイプ（そのスラッグ）から検索される設定が書いてあります。
// 検索条件のページタイプを指定する(通常投稿とカスタム投稿)
function SearchFilter($query){
if ($query->is_search) {
$query->set('post_type', array('post', 'page', 'カスタム投稿タイプのスラッグ'));
}
return $query;
}
add_filter('pre_get_posts', 'SearchFilter');例えば、カスタム投稿タイプのスラッグがworksであれば、５行目の記述は下記のようになります。
$query->set('post_type', array('post', 'page', 'works'));
