Wrdpressでサイト内検索を作る方法

2019.06.20
WordPress

サイト内でキーワード検索する機能を実装する方法をまとめておきたいと思います。

検索フォームを作成する

検索のフォームを作成するテンプレートを用意します。
テーマディレクトリに、searchform.phpファイルを作成します。

作成したsearchform.phpに入力フォームと「検索」ボタンを作成します。

<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
  <input type="text" name="s" id="s" placeholder="Search..."/>
  <button type="submit">検索</button>
</form>

formのactionはサイトのトップページのurlを指定します。

WordPressの検索機能を使用するため、inputのnameは「s」を設定します。

検索フォームを表示する

作成した検索フォームをページ内に設置します。ページ内のフォームを表示させたい箇所にget_search_form関数を記入します。

<?php get_search_form(); ?>

表示された検索フォームのデザインはcssで設定します。

検索結果を表示する

検索結果を表示するページを作成します。テーマディレクトリに、search.phpファイルを作成します。

WordPressの検索機能を利用した場合、検索ボタンを押すと検索が実行され、検索結果がsearch.phpのページで表示されます。

コードはindex.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; ?>

$_GET[ 's' ]で検索したキーワードを出力します。キーワードが未入力の場合、「キーワード未入力」とメッセージを表示します。

$wp_query->found_postsで、検索に該当した件数を出力します。

whileで検索に該当した記事を一覧表示します。テキストや使用するタグはデザインに合わせて変更してください。

検索結果の表示順はfunction.phpにフィルターフックを設定することで変更できます。