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

2020/06/22 20:00

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

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

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

 

 

必要なファイル

 

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

 

・search.php

・searchform.php

 

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

 

 

検索フォームを作成

 

 

【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; ?>

 

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

 

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

 

現場から以上です!

 

1327

PICK UP