サイト内検索フォームを実装する方法(WordPress)
WordPressでサイト内検索フォームを実装する方法を説明します。
このサイトでもトップページなどに検索フォームを用意しています。
検索フォームの実装方法
下記の手順で検索フォームを実装できます。
searchform.phpを作成する
まずは検索フォームの作成を行います。
searchform.phpという名前でphpファイルを新規作成し、WordPressのテーマフォルダ直下(index.phpと同じ階層)に置きます。searchform.phpの内容は下記の検索フォームのhtmlを記載します。
<form class="search-form" method="get" action="<?php echo esc_url(home_url()); ?>">
<input class="search-box" type="text" name="s" placeholder="キーワードを入力">
<input class="search-btn" type="submit" value=" ">
</form>
補足:searchform.phpを使わない方法もある
searchform.phpを使わなくても、searchform.phpの内容を直接index.phpなどに書き込めば検索フォームを実装することができます。(ただしその場合は次のステップのget_search_form()関数は使えず、また検索フォームをウィジェットのようにテンプレートのカスタマイズパーツとしても使うことができなくなります。)
検索フォームを呼び出して表示する
次に作成した検索フォームをサイト内で呼び出して表示します。
searchform.phpは下記の関数でテーマファイルの任意の場所で呼び出すことができます。テーマファイルの検索フォームを呼び出したい場所にこの関数を記述して検索フォームを表示します。
<?php get_search_form(); ?>
外観をcssで整える
検索フォームが表示されたらcssでお好みに外観を整えます。(ここではcssの内容は省略)。
検索結果ページを作成
最後に検索結果を表示するテーマファイルを作成します。
search.phpという名前でファイルを新規作成し、WordPressのテーマフォルダ直下(index.phpと同じ階層)に置きます。search.phpには下記のように該当記事をループ表示するコード記述します。ここではループ部分のコードのみ記載していますので、実際はこの前後にヘッダーやフッターのコードを追加します。
<?php echo "<h1>" . esc_html($_GET['s']) ."の検索結果:" . $wp_query->found_posts . "件</h1>"; ?>
<ul>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<li>
<h1><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h1>
<p><?php echo get_the_excerpt(); ?></p>
</li>
<?php endwhile; endif; ?>
</ul>
補足:テンプレートの読み込み優先順位
検索結果ページでは、search.phpが最優先で読み込まれますが、search.phpが存在しない場合はindex.phpが読み込まれます。search.phpを使わずにindex.phpにまとめることでテンプレートのファイル数を削減することもできます。
以上でサイト内検索を実装する手順は完了です。
補足:やっていることをざっくり説明
名前が似ていて紛らわしいですが、searchform.phpは検索フォームを記述したファイルで、search.phpは検索結果をリスト表示するテンプレートです。WordPressはget_search_form();関数でsearchform.phpを呼び出して検索フォームを表示し、検索結果ページを表示する時にはsearch.phpを呼び出して記事を一覧表示する仕組みとなっています。
