今回は、WordPressで「検索フォームを作成してサイト内検索が出来るようにする方法」について紹介します！

検索フォームはWordPress案件で頻出の実装なので、是非理解しておきたいところです。

【WordPress】検索フォームを作成してサイト内検索が出来るようにする方法

検索フォームを作成してサイト内検索が出来るようにするためには、以下の5ステップを踏んだらOKです。

それでは1つずつ見ていきましょう！

①HTMLで検索フォームを作成する

まずはHTMLで検索フォームを形作っていきましょう。

今回使用するコードはこちら。

<form class="search-form" role="search" action="" method="">
    <input type="submit" value="&#xf002;" class="search-button" />
    <input type="text" value="" name="" class="search-input" placeholder="キーワードから探す" required="" />
</form>

今回はFont Awesomeを使っているので、もし上記のコードを使う場合は、headタグの中にFont AwesomeのCDNを読み込むようにしましょう。

②HTMLで作成した検索フォームにWordPress関数を組み込む

①で作成した検索フォームにWordPress関数を組み込んでいきましょう。

<form class="search-form" role="search" action="<?php echo home_url('/'); ?>" method="get">
    <input type="submit" value="&#xf002;" class="search-button" />
    <input type="text" value="<?php the_search_query(); ?>" name="s" class="search-input" placeholder="キーワードから探す" required="" />
</form>

検索フォームを動作させるには、以下の点を守る必要があります。

これで検索フォームが動作するようになりました。

③searchform.phpを作成する

searchform.phpファイルを作成し、②で作成した「<form>~</form>」の箇所をコピペして貼り付けましょう。

そして、searchform.phpを表示したい箇所に「<?php get_search_form(); ?>」と記述しましょう。

<?php get_search_form(); ?>

検索フォームパーツを共通化することで、修正が楽になるメリットがあります。

④search.phpを作成する

検索結果を表示させるためのページである「search.php」を作成しましょう。

そして、検索結果ページのタイトル部分には、<?php the_search_query(); ?>のテンプレートタグを使って、検索されたキーワードを動的に表示されるようにします。

<h2>
    「<?php the_search_query(); ?>」の検索結果
</h2>

⑤検索結果が0件の場合を考慮する

最後に、検索結果がある場合は該当する記事を表示させ、もし検索結果が0件の場合は「検索結果はありませんでした。」と条件分岐させるようにしましょう。

◎search.php

<h2>
    「<?php the_search_query(); ?>」の検索結果
</h2>

<?php if (have_posts()): ?>
<?php while (have_posts()) : the_post(); ?>   

<!-- 検索結果がある場合に表示させる -->

<?php endwhile; ?>
<?php else: ?>

    <p>検索結果はありませんでした。</p>

<?php endif; ?>

上記のコードを追加することが出来たら、検索フォームを検索してちゃんと動作するのか確認したら完了です。

まとめ

以上が、「検索フォームを作成してサイト内検索が出来るようにする方法」でした。