WordPressで独自のデザインの検索フォームを設置する方法

WordPressで構築したWebサイトやブログでは、サイト内のニュース記事やブログ記事をユーザーが目的の情報を探しやすいように、検索フォームを設置していくでしょう。

WordPressでは、ウィジェットで簡単に検索フォームを設置できるように作られてますが、利用するテーマでもある程度決まったデザインで設置できる場所もだいたい決まっています。

WordPressのテーマをオリジナルのデザインにされている方は、Webサイトやブログにあった検索フォームのデザインに、そして設置したい場所も自由にコントロールしたいところです。

ここでは、WordPressで独自のデザインの検索フォームを設置する方法をご紹介します。

独自の検索フォームの作成

WordPressで独自の検索フォームを作るには、以下の2つのファイルを作成する必要があります。

searchform.php
search.php

「searchform.php」は検索フォームの部分のファイルで、「search.php」は検索結果を表示するページのファイルです。
この2つに加えて、検索フォームをCSSでデザインしていきます。

実際にフォームの作成から、設置するまでの流れを見ていきましょう。
サンプルとして、以下のように検索フォームを構築してみました。

searchform.php

<form id="s-form" method="get" action="<?php echo home_url( '/' ); ?>">
  <input id="s-box" name="s" type="text" placeholder="キーワードを入力"/>
  <button type="submit" id="s-btn">検索</button>
</form>

シンプルに、検索窓と検索を実行するボタンとして構築してみました。

formのmethod属性はget送信で、action属性にはサイトのURLを設定します。
入力部分をinput要素で作り、WordPressで検索プログラムを動かすためname属性には「s」とします。
ページ内検索placeholder属性で入力欄のダミーテキストを設定。最後にbutton要素で、検索を実行するボタンを構築します。

各要素には、CSSでデザインしやすいようにIDを付けています。

続いてはスタイルシートです。
CSSでは、作成した検索フォームに対して、サイトに合わせたオリジナルのデザインを作ります。
サンプルとして以下のように記述してみました。

style.css

#s-form {
  position: relative;
  height: 42px;
}
 
#s-box {
  height: 38px;
  padding: 0 10px;
  position: absolute;
  top: 0;
  left: 0;
  border: 2px solid #999;
}
 
#s-btn {
  background: #212121;
  border: none;
  font-size: 1rem;
  color: #fff;
  width: 60px;
  height: 42px;
  position: absolute;
  top: 0;
  left: 200px;
  cursor: pointer;
}

フォームのデザインはサイトに合わせてお好みに。
また、検索ボタンをアイコンにして画像としてもいいですね。
その場合はHTMLの方も調整してください。

続いて、検索の実行結果を表示するファイルを作成します。
ファイル名は「search」とします。

search.php

<?php if ( have_posts() ) : ?>
<p><?php printf( '"' . get_search_query() . '"' . __( 'の検索結果 - ' ) . $wp_query->found_posts . __('件')); ?></p>
<?php while ( have_posts() ) : the_post(); ?>
 
<!-- post -->
ループ処理
<!-- /post -->
 
<?php endwhile; else: ?>
<p>検索キーワードに該当する記事がありませんでした。</p>
<?php endif; ?>

if文でクエリにループできる結果があるかどうかのチェックから始まります。

PHPのprintf関数で文字列を出力するプログラムを書いています。
これは、検索した結果の状況をわかりやすくするためです。

WordPressの関数である「get_search_query()」では、サイト内検索を行ったときのクエリ文字列を取得してきます。
検索した文字列の検索結果としての表示をして、さらに「$wp_query->found_posts」でクエリ変数に一致する投稿の数を取得して、何件ヒットしたのかを表示させます。

その後、while文で検索した記事分を出力する処理を書きます。
投稿一覧で利用しているループ処理になります。
while文が終わったら、if文のelseで検索キーワードで該当しなかった場合のテキストの記述をします。
最後にendifでif文の終わりとなります。

検索フォームの機能を「searchform.php」「search.php」で。そしてデザインを「style.css」で作ったら準備完了です。
あとは検索フォームを表示させる部分に、作成したテンプレートを組み込むことができる関数「get_search_form」を使って設置します。

例えば、サイドバーに設置する場合は「sidebar.php」の表示させる部分に、以下のプログラムを追加します。

sidebar.php