sp_menu

【WordPress】サイト内検索を自作する方法を解説

【WordPress】サイト内検索を自作する方法

記事がたくさん掲載されているWEBサイトで特定の記事を見つけるにはサイト内検索が便利です。今回はWordPressでサイト内検索を自作する方法をご紹介します。

この記事は以下のお悩みを解決します。

  • ・サイト内検索を自作する方法がわからない
  • ・検索結果を投稿記事に絞り込む方法を知りたい

サイト内検索は検索フォームにキーワードを入力してWEBサイト内のコンテンツを検索する機能のことです。

記事がたくさんあるWEBサイトで特定の記事を見つけたい場合、探すのは大変ですよね。しかし、サイト内検索を使うことで見たい情報に最短でアクセスすることができます。

例えば、ページネーションに関する記事を見たいので検索フォームに「ページネーション」と入力します。

サイト内検索の入力例

するとキーワードの「ページネーション」に一致する記事が検索されます。

サイト内検索の検索結果

このようにサイト内検索を使えば見たいコンテンツを簡単に見つけることができます。

2. サイト内検索を実装

2-1. searchform.phpの作成

searchform.phpを作成し、検索フォームに関する記述をします。seachform.phpには以下のように記述します。

<!--searchform.php-->

<form action="<?php echo esc_url(home_url('/')); ?>" method="GET">
  <input type="text" placeholder="検索" name="s">
  <button>検索</button>
</form>

3-6行目：<form action=”<?php echo esc_url(home_url(‘/’)); ?>” method=”GET”>~<form>

formのaction属性は「WEBサイトのホームページのURL」、method属性は「GET」をそれぞれ指定します。

4行目：<input type=”text” placeholder=”検索” name=”s”>

name属性には“s”を指定します。

検索フォームのデザインはstyle.cssに指定します。今回は以下のデザインになるようにCSSを指定しました。デザインは適宜変更してください。

検索フォームのデザイン例
/* style.css */

form {
  position: relative;
  margin-bottom: 50px;
}

form input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
}

form button {
  position: absolute;
  top: 1px;
  right: 0px;
  background: gray;
  padding: 7px 10px;
  color: #FFF;
}

2-2. search.phpの作成

search.phpを作成し、検索結果を表示するページの記述をします。seach.phpには以下のように記述します。

<!--search.php-->

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

<div class="search-result">
　<!--検索キーワードが入力されてるかどうか-->
  <?php if(is_search() && empty(get_search_query())): ?>
   <p>検索キーワードが未入力です</p>
  <?php else: ?>
   <h1>「<?php echo esc_html(get_search_query()); ?>」の検索結果</h1>
　<?php endif; ?>
</div>
<!--検索キーワードと一致する記事があるかどうか-->
<?php if(have_posts()): ?>
 <?php while(have_posts()):the_post(); ?>

    <!--記事の検索結果一覧を表示-->

 <?php endwhile; ?>
<?php else: ?>
  <p>検索キーワードに一致する記事は見つかりませんでした</p> 
<?php endif; ?>

<!--footer.phpを読み込む-->
<?php get_footer(); ?>

8-12行目：if(is_search() && empty(get_search_query()))~ endif;

is_search()は検索結果ページが表示されているかかどうかを調べる関数で、get_search_query()は検索キーワードを取得する関数です。

検索結果ページであり、かつ検索キーワードが空だったら「検索キーワードが未入力です」と表示し、条件を満たさない場合は「「キーワード」の検索結果」と表示されます。

15-28行目：if(have_posts())~endif;

検索キーワードに一致する記事が存在する場合はその一覧を表示し、存在しない場合は「検索キーワードに一致する記事は見つかりませんでした」と表示します。

2-3. 検索フォームを出力する

検索フォームを表示したい箇所にget_search_form()を記述します。今回はサイドバーに検索フォームを設置します。sidebar.phpに、以下のように記述します。

<!--sidebar.php-->

<aside>
  <div class="search_form">
    <!--検索フォームを出力する-->
    <?php get_search_form(); ?>
  </div>
</aside>

6行目：get_search_form();

get_search_form()は検索フォームを出力する関数です。searchform.phpに記述した検索フォームがあれば出力され、ない場合はデフォルトの検索フォームが出力されます。

2-4. 検索結果を投稿記事のみに絞り込む

最後に検索結果を絞り込みます。このままだとお問い合わせページやプライバシポリシーなどの固定ページも検索結果に表示されてしまうので投稿ページだけを表示するようにします。

<!--functions.php-->

<?php
function filter_search( $query ) {
  //管理画面またはメインクエリ以外は処理を中断する
　if(is_admin() || !$query->is_main_query()) {
　　return;
  }
　//検索結果ページかどうか
  if( $query->is_search ) {
　　//投稿タイプを指定
    $query->set( 'post_type', 'post' );
  }
　return $query;
}

add_action('pre_get_posts', 'filter_search');
?>

6-8行目：if(is_admin() || !$query->is_main_query()) {~};

管理画面またはメインクエリ以外の場合は処理を中断します。WordPressのページを表示する時はURLに対応するデータをデータベースから取得しています。このURLに対応するデータをデータベースにリクエストすることを「メインクエリ」と呼びます。

10-15行目：if($query->is_search){~};

検索結果ページが表示されていれば処理を実行します。

12行目：$query->set( ‘post_type’, ‘post’ );

投稿タイプを「post」に設定しています。

17行目：add_action(‘pre_get_posts’, ‘filter_search’);

pre_get_postsはWordPressのアクションフックで投稿記事が読み込まれる前に呼び出されます。

3. まとめ

今回はサイト内検索を自作する方法をご紹介しました。サイト内検索はWEBサイトではよく使われている機能ですので実装する機会も多いと思います。

ご参考にしていただけますと幸いです。

関連記事