【WordPress】検索フォームを設置して特定の投稿のみの検索結果を表示する

検索フォームをたとえばサイドバーなどに設置してブログの投稿記事からのみの検索結果を返すやり方を解説します！

プラグインを使用する方法もありますが、当ブログではWEB制作者向けに記事を書いていますので、自作する方法を解説します。

今回実装する検索フォームは以下のような形になります。

用意するテンプレートファイル

用意するテンプレートファイル

検索フォームの作成に必要なテンプレートファイルは、searchform.phpとsearch.phpの2つになります。searchform.phpは新規で作成し、search.phpは今回検索結果を取りたい投稿のアーカイブテンプレート、例えばarchive.phpなどをコピーして作成しましょう。

searchform.php

searchform.phpの内容は以下のようなものになります。

<form method="get" id="searchform" action="<?php echo esc_url(home_url()); ?>">
    <input type="text" name="s" id="s" placeholder="キーワードで検索する">
    <button type="submit">
        <i class="fas fa-search"></i>
    </button>
</form>

buttonの中身に関しては今回Font Awesomeを使用していますが、画像でもテキストでもなんでも大丈夫です。

こちらが作成できましたら、検索フォームを設置したい箇所に以下の記述をします。

<div class="search-form">
　　<?php get_search_form(); ?>
</div>

<?php get_search_form(); ?>だけでも問題ありませんが、スタイルを適用させるためにdivタグで囲んでいます。

今回こちらのフォームにあてたスタイルは以下になります。お好きなようにしていただいて構いませんが念のため掲載しておきます。

.search-form {
    margin-bottom: 60px;
  }
#searchform {
    position: relative;
    border: 1px solid #333;
    height:45px;
  }
#searchform input {
    position: relative;
    width: calc(100% - 45px);
    height:45px;
    padding-left: 10px
  }
#searchform button {
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    height:45px;
    text-align: center;
    background: linear-gradient(90deg, rgb(20, 136, 204), rgb(43, 50, 178));
}
#searchform button i {
    color: #fff;
}

search.php

さてsearch.phpはarchive.phpと同じような体裁をとりたいので先ほどコピーしておいたと思います。
以下のようになります。

<h2><?php echo '「' . get_search_query() . '」の検索結果：' . $wp_query->found_posts . ' 件の記事が該当しました。'; ?></h2>
<ul class="post-contents">
    <?php
    if (have_posts()) :
        while (have_posts()) : the_post();
    ?>
            <li>
                <!-- archive.phpで出力されるものと同じ -->
            </li>
        <?php endwhile; ?>
    <?php else : ?>
        <p>該当する記事はありませんでした。</p>
    <?php endif; ?>
</ul>
<div id="pager">
    <ul class="pager-contents">
        <?php
        the_posts_pagination(array(
            'mid_size' => 2,
            'prev_next' => false,
        ));
        ?>
    </ul>
</div>

pagerなどもarchive.phpと同じです。

こちらで体裁は整いましたが、現在のままですとその他のカスタム投稿や固定ページまで検索に含まれます。

functions.php

通常の投稿タイプのみに検索を絞りたいので以下の記述をfunctions.phpに追加しましょう。

// 検索対象を投稿ページだけにする処理
function search_filter($query)
{
  if ($query->is_search) {
    $query->set('post_type', 'post');
  }
  return $query;
}
add_filter('pre_get_posts', 'search_filter');

以上で検索フォームの設置は完了です！