LucyとRuby

サイト内検索フォームを実装する方法(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を呼び出して記事を一覧表示する仕組みとなっています。

post no. 100

Comments