WordPress

WordPress 検索フォームを実装する方法

WordPress で検索フォームを実装する方法を紹介します。
例えば、投稿された記事を特定のキーワードでソートする機能を実装する場合に便利な方法です。

  1. 検索フォームのテンプレートを作成
  2. 検索フォームの設置
  3. 検索結果ページの作成
  4. 投稿タイプを指定して検索対象を絞り込む

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

まずは検索フォームのテンプレートを作成します。
テーマディレクトリにファイル 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>

フォームの設置箇所に直接コードを追加してもよいのですが、フォームを複数箇所に設置する場合はテンプレート化する方が使いやすいでしょう。

検索フォームの設置

テンプレート化したフォームを表示する場合は、関数 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; ?>

ここまでが基本的な設置方法になります。
フォームにキーワードを入力して動作を確認しましょう。

投稿タイプを指定して検索対象を絞り込む

デフォルトの投稿以外に、カタスタム投稿タイプを検索対象に含める場合は、検索対象の絞り込みを指定する必要があります。
例えば、通常の投稿(post)と、カスタム投稿(blog)、固定ページ(page)を検索対象にしたい場合、次のコードを 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' );

$query->set('post_type', array('post', 'blog'));array('post', 'blog', 'page') に任意のポストタイプをしていしてください。

まとめ

WordPress で検索フォームを実装する方法を紹介しました。

合わせて読みたい関連記事