【WordPress】検索フォームの実装方法

こんにちは、daissh04です。

今回はWordPressの検索フォームの 実装方法について記述したいと思います。

この記事はこんな人向けに書いてます。

・自分のブログに過去記事等の検索機能を載せたいけどやり方がわからない

・検索フォーム実装案件を受注したがやり方がわかならない

この記事読んで頂けたら、実装の進め方が理解できるようになると思います！

検索フォームとはこのような感じですね、テキストボックス内に検索ワードを打ち込んんで虫眼鏡ボタンを押下すると、それに該当する記事が検索される。

検索結果表示ページもこのように用意してあげます。

トップページの実装

まずは検索フォームを部分テンプレートで呼び出すので

例えばheader.phpに呼び出し文を書きます（これは必須ではありません。）

<?php get_search_form(); ?>

searchform.phpを作成

以下のポイントをおさえて記述ください

・formのactionにはトップページurl

・methodにはgetを使用

・nameとidにはsを使用

searchform.php

<form action="<?php echo home_url('/'); ?>" method="get" class="searchform">

<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" placeholder="サイト内検索">

<input type="submit" id="searchSubmit" value="">

</form>

テンプレートタグ the_search_query();を使用しています。これは検索フォームに打ち込まれたワードを表示するものです。

検索結果ページを表示したときに検索フォームに自分が打ったワードがあると何で検索したのかわかるからいいですよね、valueに表示させています。

検索結果ページの作成

search.phpを作成してください。

レイアウトはトップページやブログ一覧と合わせると思うので、他ページと同じように部分テンプレートを使用するといいと思います。

・the_search_query();を盛り込みましよう

このようにフォームに打ち込んだ文字が表示されるようにしたいですね

<h1 class="type-A">「<?php the_search_query(); ?>」の検索結果</h1>

と入力すれば大丈夫です。

あとはブログ一覧ページのように、have_post();のテンプレートタグをwhileで回してあげれば完成です。

<?php if(have_posts()):

while(have_posts()):the_post();

?>

ここは前に記事にしているのでこちらをご参照ください。

過去記事リンク

https://daissh04.hatenablog.com/entry/2020/03/04/224501?_ga=2.242053707.875980846.1584746565-211519333.1579787156