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

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

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

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

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

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

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

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

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

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

※CSSのコードは今回省略しています。

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

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

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

・formタグのaction属性にトップページのURLを設定する

・formタグのmethod属性には「get」を指定する

・name属性には「s」を使用する

・value属性には「<?php the_search_query(); ?>」を指定し、検索されたキーワードを表示させる

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

③searchform.phpを作成する

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

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

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

④search.phpを作成する

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

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

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

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

◎search.php

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

まとめ

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

 

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事