サイトに検索フォームを設置しよう【WordPress関数】get_search_form()|ためになるWordPressブログ

WordPress

今日はサイトに検索フォームを設置するやり方を見てみましょう。

どんなWebサイトでもだいたい設置してあるこれですね。
これを設置するにはこのような関数があります。

get_search_form()

これを設置したい場所に入力すると以下のように表示されます。

ちょっとさっきと見た目が違いますね。
実は冒頭の検索フォームは私が設定をしてさらにCSSで見た目も整えたものですが、これはget_search_form()と入力しただけでその他の設定をしていないと表示されるWordPressに組み込まれているデフォルトの検索フォームです。

全体の流れとしては
1,検索フォームの設置
2,検索結果ページの作成
ということになります。

それでは今回は少しカスタマイズする事も含めて順に見ていきましょう。

検索フォーム

検索フォームの設置

では検索フォームを設置するためのWordPress関数get_search_form()についてWordPress Codexではこうあります。

テーマの searchform.php ファイルを使用して検索フォームを表示します。無ければ WordPress に組み込みの検索フォームを表示します。

get_search_form() – WordPress Codex

このようになにも設定をしないとデフォルトのWordPress仕様の検索フォームが出力されます。
なにもしなくても最低限使えるのはいいですね。

実際のコードはこうです。

<?php get_search_form(); ?>

これだけでWordPress仕様の検索フォームが設置されます。
ではこれをカスタマイズする方法を見てみましょう。

検索フォームのカスタマイズ

検索フォームの色、ボタンとフォームの位置関係、テキストフォーム内の文字を”検索”にするのか”search”にするのかなど色々と自分好みにカスタマイズをしたいことがあるかと思います。

そのためにはWordPress Codexにあるとおり、searchform.phpファイルを作成することでsearchform.phpファイル内で記述した検索フォームを引っ張ってきます。

とりあえずsearchform.phpを作ってテーマフォルダの中に保存してみましょう。
これでsearchform.phpが認識され、searchform.phpから情報を取得しようとしますが、今はまだsearchform.phpが空の状態なので何も表示されません。

ではsearchfrom.phpになにか書いてみましょう。
例えばこうです。

<form method="GET" action="<?php echo home_url('/'); ?>">
  <label for="search_word">サイト内検索</label>
  <input type="text" name="s" placeholder="検索">
  <input type="submit" value="検索">
</form>

このように検索フォームをsearchform.phpに記述するとそれがそのままHTMLとして出力されますが、いくつか最低限満たさなければいけないルールがあります。
・form要素のmethodにはGETを仕様
・テキストフィールドを含める(input type=”text”)
・テキストフィールドのnameは”s”にする
・送信ボタンを含める
・nameを”s”にしたinputタグに対するラベルタグを含める

これらは必ず満たすようにしましょう。
classなどをつければCSSで見た目を変えることもやりやすいですね。

ということで検索フォームが設置できましたが、検索結果を表示するページをまだ作成していないのでこのままではまだ使えません。

検索結果ページ

検索結果ページを作成

それでは次は検索結果ページを作成してみましょう。

検索結果ページを表示するにはsearch.phpというファイルが必要になります。
searchform.phpとは別物ですので注意してください。

テーマフォルダの中にsearch.phpを作成すると検索結果ページとして認識されます。

検索結果ページの例

検索結果ページというのはこんな感じです。

よくあるWebサイトの検索結果ページですね。
ではこれを表示しているsearch.phpのコードを見てみましょう。

search.phpのコード

ではsearch.phpの中身を見てみましょう。

<!-- header.phpを読み込み -->
<?php get_header(); ?>

<div class="search-result">

 <!-- パンくずリスト -->
  <div class="search-result__breadcrumb"><?php breadcrumb(); ?></div>

 <!-- タイトル -->
  <h2 class="search-result__title">検索結果</h2>
  
 <!-- 検索ヒット件数 -->
  <p class="search-result__count">
  「<?php echo the_search_query() ?>」の検索結果は<?php echo $wp_query->found_posts; ?>件です。
  </p>

 <!-- 検索結果ループ -->
  <?php if(have_posts()): while(have_posts()): the_post(); ?>
    <div class="search-result__item">
    <!-- ヒットしたページのタイトル -->
      <h3 class="search-result__item-title">
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
      </h3>

      <!-- ヒットしたページの本文抜粋 -->
      <?php the_excerpt(); ?>
      <p class="search-result__link">
        > <a href="<?php the_permalink(); ?>"><?php echo the_permalink(); ?>
      </p>
    </div>
  <?php endwhile; else: ?>
  <?php endif; ?>

  <!-- ページネーション --> 
  <?php
  $args = array(
      'mid-size' => 1,
      'prev_text' => '«',
      'next_text' => '»',
      'screen_reader_text' => 'ページナビゲーション'
  );
  the_posts_pagination($args); ?>

</div>

<!-- フッター読み込み -->
<?php get_footer(); ?>

基本的にはarchive.phpと同じループを書き込む形になります。
その他のクラス名などは適当にアレンジしてみてください。

ページネーションについては以下の記事を参考にしてみてください。

まとめ

これでサイト内検索機能を実装できました。

コーポレートサイトなどでは必ずと行っていいほど使う機能なのでぜひ実装できるようになっておきましょう。

コメント

タイトルとURLをコピーしました