[Wordpress]フリーワード検索機能を追加する方法

だいたいならデフォのテーマとかについてる「フリーワード検索」の機能ですが、オリジナルのテーマを作るなら、検索機能もオリジナルでの実装が必要な場合があります。

今回はオリジナルテーマ作成時に役立つ「フリーワード検索機能」を簡単に設置する方法をご紹介します。

必要なファイル

まずはテーマ内に下記の2つのファイルを作成しましょう。

それぞれ検索結果を表示するファイルと、検索フォーム自体を作るファイルとなります。

検索フォームを作成

【searchform.php】

<form id="form" action="自分のサイトURL" method="get">
  <input name="s" type="text" placeholder="Search">
  <button type="submit">検索</button>
</form>

これでフォームが作成されますので、このフォームを呼び出す（出力）為のコードをサイトのどこかに設置しましょう。

ちなみにここで重要なのは「name="s"」とする事です。

【出力したいphpファイル内】

<?php get_search_form(); ?>

こで上記の検索フォームが表示されます。

検索結果の表示を作成

次に検索結果を表示するページを作っていきます。

下記は出力の一例です。

【search.php】

<?php
  global $wp_query;
  $total_results = $wp_query->found_posts;
  $search_query = get_search_query();
?>
<p>「<?php echo $search_query; ?>」の検索結果
  <span>（<?php echo $total_results; ?>件）</span>
</p>
 
  <?php
    if( $total_results > 0 ):
    if(have_posts()):
    while(have_posts()): the_post();
    ?>
      【検索結果の投稿記事内容をここに表示】
    <?php endwhile;?>
    <?php endif; wp_reset_postdata();?>
 
  <?php else: ?>
    <p>
      「<?php echo $search_query; ?>」に一致する情報は見つかりませんでした。
    </p>
  <?php endif; ?>

検索結果があるかないかを判断して、あるならその記事一覧を出力する記述例です。

ブログ記事が溜まっていくほど、訪問者にとって検索機能があると便利だと思いますので、ぜひ付けておきましょう。

現場から以上です！