WordPressで検索フォームを自作する方法を説明します。
検索フォームに使用するWordPressのテンプレートファイルを作成してから、検索機能となる検索フォームを自作し、テンプレート化した検索フォームをサイトのヘッダーやサイドバーなど任意の位置に読み込んで設置する4ステップ作業で検索フォームを自作する方法です。
検索フォームを自作するテンプレート作成
1ステップ目、まずはWordPressの検索フォームを自作するためのテンプレートを作成します。
WordPressが検索フォームをテンプレートファイルとして認識するファイルは「searchform.php」です。
それぞれ使用しているテキストエディタでファイル名をsearchform.phpで作成してから、検索フォームを自作したいWordPressテーマのテーマフォルダにsearchform.phpを設置します。
検索フォームを自作するテンプレートファイル「searchform.php」の設置後は、WordPressがsearchform.phpを「検索フォームのテンプレート」として認識しているか確認しておきます。
WordPressの外観からテーマエディターをクリックして進んだ「テーマを編集」のページで検索フォームを自作するテーマを選択して、先ほどテーマフォルダに設置したsearchform.phpが「検索フォーム」で認識できていれば、WordPressで検索フォームを自作するテンプレート作成の成功です。
WordPressで自作する検索フォームは、テンプレートにして作成する方法ならヘッダーやサイドバーなどいろいろな箇所にテンプレートファイルを読み込むだけで検索フォームを設置できるので自作後が楽になります。
WordPressの検索フォームをsearchform.phpで自作
2ステップ目、WordPressで検索フォームを自作するために作成したテンプレート「searchform.php」で検索フォームの機能を自作します。
検索フォームの機能を自作する方法としては、HTMLのform要素が主になり、フォームの機能として検索窓と検索ボタンを自作します。
またformのinputタグでvalue値にはWordPressのthe_search_query()関数をPHPで組み込みます。
以下に記述したform要素でWordPressの検索フォームを自作する方法の説明を進めます
<form action="<?php echo esc_url(home_url('/')); ?>" method="get" class="Search-form-style">
<input type="text" name="s" value="<?php the_search_query(); ?>" placeholder="キーワードを入力" id="s" class="form-text">
<button type="submit" id="s" class="search-btn"><span class="dashicons dashicons-search"></span></button>
</form>
form開始タグにはacction属性とmethod属性を記述します。
- action属性の値にWordPressのhome_url()関数を指定。
- methodは属性値にgetを記述です。
formの子要素にはinputタグとbutton要素をマークアップします。
- inputタグは検索キーワードを入力する検索窓として自作するのでtype属性値をtextにします。
- name属性値はsを指定です。
name属性をsにすることでsubmit ボタンをクリックするとgetメソッドでテキストボックスに入力された値が検索キーワードとして送信されます。
そしてvalue属性は値にWordPressのthe_search_query()を記述。
the_search_query()は検索が行われた時に、その検索キーワードを表示できるWordPressの関数です。value値にthe_search_query()を記述することでサイト内の検索ボックスにキーワードを残したままにすることができます。
placeholderは値に「キーワードを入力」のように文字列を指定することで、検索フォームの検索窓の入力ヒントになるようにするための記述です。
次に検索フォームの検索ボタンです。button要素の開始タグでtype属性の値をsubmitで指定します。
検索ボタンのテキストはサンプルとしてWordPressのdashiconsで虫眼鏡のアイコンにしていますが、適宜でテーマに使用しているアイコンのタグをマークアップしても良いですし、テキストで「検索」のように表示したり、お好みで自作します。
WordPressで検索フォームの機能を自作するのは完成です。
WordPressに自作した検索フォームの読み込み
3ステップ目に突入です。
今回、WordPressの検索フォームを自作する方法は、テンプレート化した検索フォームなので、自作した検索フォームのテンプレートファイル「searchform.php」をヘッダーやサイドバーなど検索フォームを表示する任意のテンプレートファイルに読み込みます。
<?php get_search_form(); ?>
テンプレートファイルへの検索フォームの読み込み方法はWordPressのget_search_form()を使用します。
<aside>
<div class="side_content">
<!--searchform.phpの検索フォームを読み込み-->
<?php get_search_form(); ?>
</div>
</aside>
例えばWordPressに自作した検索フォームをget_search_form()でサイドバーに設置する場合には、sidebar.phpにget_search_form()を記述します。
すると検索フォームを自作したコードが書かれているsearchform.phpがsidebar.phpで読み込まれて検索フォームの設置ができます。
以下の画像は自作したWordPressテーマのサイドバーに検索フォームを自作して設置した画像です。
自作した検索フォームが設置したいテンプレートの位置に表示されれば読み込みも設置も完成ですが、実際に検索フォームの検索窓にキーワードを入力して検索ボタンでサイト内を検索した場合、おそらく検索結果ページはテンプレートの優先順位が一番低いindex.phpで表示されます。
このとき検索フォームからの検索結果をindex.phpで表示するのではなく、検索結果を表示する専用のテンプレートを自作することができます。
検索フォームの検索結果をsearch.phpで表示する
最終工程の4ステップ目です。
WordPressに自作した検索フォームの検索結果を表示するためのページは検索結果テンプレートのsearch.phpで表示することができます。
search.phpの作成方法は、ファイル名をsearch.phpで作成し、自作した検索フォームを設置しているWordPressのテーマフォルダにsearch.phpをアップします。
search.phpをテーマフォルダにアップするとsearch.phpが「検索結果」のテンプレートとしてWordPressに認識されます。
検索結果テンプレートとして認識したsearch.phpには検索フォームで検索キーワードを入力し送信した検索結果の記事を一覧で表示すればいいだけですので、WordPressのメインループを記述してループ処理します。
これでWordPressの検索フォームを自作するのは完成です。
参考程度にはなりますが、私がWordPressに検索フォームを自作したときに書いたループのコードを以下に載せておきます。
<?php get_header(); ?>
<div class="search-hit">
<strong><?php echo '「'.get_search_query().'」の検索結果：' .$wp_query->found_posts. ' 件の記事がヒットしました。';?></strong>
</div>
<div class="wrapper">
<main class="main_contents">
<?php if (have_posts()): ?>
<?php while(have_posts()) : the_post();?>
<div class="archive_item">
<?php get_template_part('template-parts/loop'); ?>
</div>
<?php endwhile; endif ; ?>
</main>
<div class="sidebar">
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>
検索フォームから送信される検索キーワードを元に検索結果ページでループ処理する記事のサムネイルや投稿タイトルなどは、loop.phpから読み込んでいるループなため、適宜でループコンテンツは組み直す必要があります。
<div class="search-hit">
<strong><?php echo '「'.get_search_query().'」の検索結果：' .$wp_query->found_posts. ' 件の記事がヒットしました。';?></strong>
</div>
get_header()の下に記述しているsearch-hitクラスを付与したdiv要素と子要素のstrongについては、検索フォームの検索結果をsearch.phpで表示するときに「検索結果の件数」を表示するための要素です。
例えば自作した検索フォームにWordPressというキーワードを入力して検索ボタンで送信すると、検索結果を表示するsearch.phpでは「WordPress」の検索結果：57件の記事がヒットしました。のように表示できます。
strong要素のget_search_query()で検索キーワードを表示し、$wp_query->found_postsで件数を表示しています。
以上がWordPressで検索フォームを自作する方法です。
