【WordPress】検索フォーム(検索ボックス)のデザインを整えてみる

さて本ブログ、 WordPress のデザインをゆっくりいじりながらある程度が経ち、まぁ見れなくもないくらいになってきましたが、いまだに放置されている場所がありました。
それが「検索フォーム(検索ボックス)」です。

今回はそちらのデザインを整えつつ、記事にまとめてみようと思います。

一応こんな感じのシンプルなものを作りたいと思います。

検索フォームを分解して見てみる

まず“デフォルト”の「検索フォーム」がどのような要素で構成されているかを見てみたいと思います。
※下の例は WordPress でのサイドバーへ設置する「検索フォーム」です。

外観>ウィジェットより追加できます。

・ラベル
・ボタン
・枠(通常状態 / 選択時)
・テキスト選択カーソル
・プレースホルダー
・メッセージ
・テキストカーソル

大体こんな感じでしょうか。
それぞれに CSS で見た目を整えていけばいいですね。

検索フォームのコードを見てみる

っと、その前に知識として、、
「検索フォーム」は<?php> get_search_form(); ?>で呼び出すと、WordPress であらかじめ用意してあるデフォルトの「検索フォーム」が表示されます。

そして、自分でテンプレートを用意することもできます。
「searchform.php」を作成することでより自由にカスタマイズした「検索フォーム」を作ることができるようになります!

「searchform.php」を作成すると、<?php> get_search_form(); ?>で表示する「検索フォーム」が、作成したファイルから呼び出されるようになるみたいです。特に設定とかは必要なさそうです。(特殊なことをしなければ……?)

いろいろググりながら調べたのですが、

外観>ウィジェットで設定した「検索フォーム」も切り替わるような感じでどのサイトも解説されていましたが、いろいろ試してみても切り替わりませんでした。

ウィジェットからではなく、サイトの適当なところに<?php> get_search_form(); ?>を入れてみると、たしかに「searchform.php」が読み込まれていたので、情報の間違いではないし、コードの間違いでもないはずです……。

ひと晩悩みながらたどり着いたひとつの答えですが、、ひょっとして、、、

検索ウィジェットからの読み込みは
Gutenberg で対応してない?

恐らく、いろいろなサイトで紹介している情報は、クラシックウィジェットのようなプラグインを使う前提で話を進めているような気がしました。ビギナーの私にはなかなか判断はできないですがなんとなくそんな気がしました。。

わからないことで悩みすぎていても次に進めないので、仕方なく、無理やりプラグインで<?php> get_search_form(); ?>を読み込ませて「検索フォーム」を表示させるというやり方で、とりあえず本記事の内容を進めていきます。。


前置きが長くなりましたが、
デフォルトの「検索フォーム」のコードは、こちら↓

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <label for="s">Search for:</label>
    <input type="text" id="s" name="s" value="<?php echo get_search_query(); ?>" />
    <input type="submit" value="Search" />
</form>

こちらを記述した「searchform.php」を新たに作成し、テーマフォルダ(header.php や single.php などのファイルが入っているフォルダ)に入れておけば、デフォルトの「検索フォーム」と同じものが表示されるようです(日本は日本語かもです)。

このコードをテンプレートにして、自分の作りたいデザインに合わせて CSS 調整してあげればよいわけですね!

そして私は今回、このように感じに調整してみました↓

<form method="get" class="searchform" action="<?php echo esc_url( home_url('/') ); ?>">
	<div class="searchform__inner">
		<input type="text" placeholder="サイト内を検索" name="s" class="searchform__field" />
		<button type="submit" aria-label="検索する" class="searchform__btn">検索</button>
	</div><!--/.searchform__inner-->
</form>

こだわりポイントは、

・ボタンをinput要素からbutton要素に
input要素では、value属性で“Search”とボタンに表示させていますが、アイコンを表示する場合もスマートに対応させたいなぁと思い、button要素の方が都合が良さそうな気がします。
それとGutenberg のウィジェットで出力される検索フォームがbutton要素だったのでその方が今風なのかなぁと思い。。

・フォームとボタンをdivで囲む
→アイコンをフォーム内に収めたり、全体を枠で囲ってあげることもできるので便利かなぁという思い。

という下準備もできたので、CSS で整えていきます。

ボタンのデザインの調整

ボタンのアイコン化

まずは、ボタンを虫眼鏡マークでアイコン化してみます。

例のごとく「Font Awesome」を利用したいと思いますので、「Font Awesome」ってなんだ?って方はこちらの記事で紹介しているのでぜひご覧ください。

やっていることは全然むずかしくなく、

<button type="submit" aria-label="検索する" class="searchform__btn">検索</button>

“検索”となっているところにi要素でアイコンを読み込んであげるだけです。

<button type="submit" aria-label="検索する" class="searchform__btn"><i class="fas fa-search"></i></button>

するとこんな感じになりました↓

意外と簡単ですね!(上の“検索”ラベルは取っちゃいました。)

※FontAwesome を読み込むには<head>~</head>内に読み込むためのlink要素を記述する必要があります。わからない方は、よかったら上の関連記事も合わせてご覧ください。

よりボタンっぽく整える

次にボタンを、よりボタンっぽく整えてみました。

.searchform__btn{
  width:48px;
  height:48px;
  background-color:#D39B19;
}
.searchform__icon{
  color:#fff;
}

特に難しいことはしてませんが一応コードは載せておきます。
あとで、高さを左のフォームと揃えたいので、widthheightはしっかり指定しました。
また、アイコンはフォント扱いなので、colorで色を指定します。

フォームを整える

次は、フォームを整えていこうと思います。
デフォルトの枠線とかついているので、先にリセットしてみます。

input{
  margin:0;
  padding:0;
  border:none;
  border-radius:0;
}

とりあえず余計な CSS はこんなもんでしょうか。

それで、縦幅をボタンに合わせて枠線を付けてその他もろもろ調整してみました。

.searchform__field{
  height:48px;
  padding:0.5em;
  border:1px solid #ddd;
  font-size:1em;
}

input要素とbutton要素の間に隙間が空いてしまうトラブルがありましたが、これは HTML の方で改行せずにそのまま続けて記述することで解決できました。

全体を整える

幅を整える

全体の幅は、サイドバー自体が 300px +パディングだったので、それに合わせて親要素を 300px で指定しました。

.searchform{
  width: 300px;
  margin:auto;
}
.searchform__field{
  width:calc(100% - 48px);
  height:48px;
  padding:0.5em;
  border:1px solid #ddd;
  font-size:1em;
}
.searchform__btn{
  width:48px;
  height:48px;
  background-color:#D39B19;
}
.searchform__icon{
  color:#fff;
}

フォームの幅はcalc()関数を使って計算をさぼり、、いえ、全体のサイズが変わっても臨機応変に対応できるようにしました!

角を丸くする

ちょっとだけ角を丸くしたかったので、
フォームの左側とボタンの右側をそれぞれborder-radiusでまるめました。

.searchform__field{
  border-radius:8px 0 0 8px;
}
.searchform__btn{
  border-radius:0 8px 8px 0;
}

わざわざ個別に左右の角を丸めなくても、親要素を角丸にすればいいのでは?

その場合は以下のようにします。

.searchform__inner{
  width: auto;
  border:1px solid #ddd;
  border-radius:8px;
  overflow:hidden;
}

.searchform__field{
  width:calc(100% - 48px);
  height:48px;
  padding:0.5em;
  font-size:1em;
}
.searchform__btn{
  width:48px;
  height:48px;
  background-color:#D39B19;
}

その際、枠線がをフォームではなく、親要素につけてあげるようにも変更します。

ぱっと見の違いはありませんが、
よく見るとこんな感じ。

白背景だとほとんど気になりませんが、
濃い目の背景に置いたとき、少し気だけ目立ってしまいます。

左の方がスッキリして見えませんか?
好みの問題かもしれませんが、個人的に気になってしまったので、ボタンの方には枠線をかけないようなやり方にしました。

フォーカス時の調整

カーソルをフォーム内でクリックすると、フォーカス状態(選択状態)になります。

すると、特に何も設定していないと、
枠が太くなり、枠内に「テキストカーソル」なる縦棒が出現して、カーソルが「テキスト選択カーソル」という変化があります。
※環境によっては異なる場合もあります。

この3つの設定方法をまとめてみます。

やり方は対象のinput要素に:focus 疑似クラスを使用してスタイルを指定します。

.searchform__field:focus{
  outline: solid 1px #000; /*枠線、基本的には border と同じ指定方法*/
  caret-color:#000; /*テキストカーソル(縦棒)の色*/
  cursor:text; /*カーソルの種類*/
}

デフォルトで選択時に枠が太くなるのはoutlineの指定によるものです。
outlineの値の指定は基本的にborderと同じで問題ないようです。boderとの違いとしてはoutlineは要素のレイアウト(サイズ、位置、重なりなど)に影響を与えないということです。

この辺をいろいろ操作したい場合は、outline: none;にしてboderで指定してあげるのも良いかもしれませんね。

※今回私はoutline: none;だけ指定して、後は特に変更する必要がなさそうなのでそのままにしてあります。

その他の調整

プレースホルダーの変更

これは HTML の方で、input要素にplaceholder属性と値を記述して変更することが可能です。

<input type="text" placeholder="ここにプレースホルダー" name="s" class="searchform__field" required/>

メッセージの有無

フォームにカーソルを合わせると(hover すると)“メッセージ”が出てきます。

こちらも HTML の方でinput要素に属性としてrequiredを記述すると出てきます。ですので、このメッセージを表示させたくない場合は、required属性削除すればよいというわけですね。
ちなみにrequired属性を入れることで、フォームへの入力が必須になります。

“メッセージ”の内容はブラウザに依存するようなので、JavaScriptを使用する必要があるみたいです。今回こちらに関してはスルーします。

ということは、
デフォルトの「検索フォーム」を使用する場合は、こちらの“メッセージ”に関して調整することはできないということです。

個人的にrequired属性はついていても問題ないような気もします。。。

まとめ

CSS でのデザインの調整自体は初歩的なものでできますが、厄介なのが、「searchform.php」を新たに作成しないといけないことと、なぜかウィジェットで追加した「検索フォーム」が「searchform.php」に切り替わらないという点でしょうか。。

それさえクリアできれば自由自在に好みの「検索フォーム」をデザインできて自分のサイトを彩ることができますね!

今回は、見た目だけしかいじりませんでしたが、またそのうち検索機能面や検索結果ページの編集などやってみたいと思います。

トップへ戻る