WordPressの検索フォームをカスタマイズする

WordPressの検索フォームをカスタマイズする

わたしはWordPressでこのブログを立ち上げるとともに、Webを本格的に勉強しはじめました。当時はフォームが全然分からなくて、検索フォームも「わかんないけどとりあえず動いたからこれで!」って感じでしたw やっと分かるようになって整理したのでまとめてみます。


デフォルトの形を見てみる

WordPressでは検索フォームを出力してくれるテンプレートタグが存在していて、

<?php get_search_form(); ?>

このように書けば、テーマに searchform.php がある場合はそちらを、そうでない場合はこのように出力されます。(このブログでは searchform.php は作っていません。)

デフォルト

<form role="search" method="get" id="searchform" class="searchform" action="<?php echo home_url('/'); ?>">
	<div>
		<label class="screen-reader-text" for="s">検索:</label>
		<input type="text" value="" name="s" id="s" />
		<input type="submit" id="searchsubmit" value="検索" />
	</div>
</form>

既に id や class がたくさんついていますね。最初はこのあたりが全ッ然わからなくて、いろんなブログのソースを拝見して、見よう見まねでツギハギ状態でした…。。

このコードを元にCSSを書いてカスタマイズしていましたが、せっかくの自作テーマなんだし、もっとシンプルな記述にしても良さそうだな、と思ってやってみました。

カスタム

<form method="get" action="<?php echo home_url('/'); ?>">
	<div>
		<label>検索:</label>
		<input type="text" name="s" />
		<input type="submit" value="検索" />
	</div>
</form>

必要なのは、GET変数で http://xxx.com/?s=検索ワード という形にすること。

1行目のform method="get"と、4行目のinput type="text"の名前をname="s"としておきます。

検索フォームは、ブログのホームページに GET を投げることに注意してください。入力テキストフィールドの名前は s にして、上述の例のように label を必ず含めてください。

(出典:関数リファレンス/get search form

Codexにこのように書いてありましたのでラベルも入れておきます。また、

form要素には、インライン要素であるinput要素を直接記述できません。必ずdiv要素などのブロック要素で内包するようにしましょう。

(出典:入力部品を定義するinput要素>フォーム

そうだったのか…!今まで結構直接書いた経験が(;゚д゚)

141021-1

上記の記述で、このような形になります。(このブログで記述したキャプチャです。テキストボックスやsubmitボタンにはデフォルトのCSSが適用されています。)

使用例

141021-2

現在このブログで使っている検索フォームです。テキストボックスとsubmitボタンの両方を画像で置き換えています。ヘッダーとフッターの2箇所に使用しています。

<form method="get" class="searchform" action="<?php echo home_url('/'); ?>">
	<div>
		<label>検索:</label>
		<input type="text" name="s" />
		<input type="submit" value="" />
	</div>
</form>

先述のコードをベースに、formにクラスを付け、submitボタンの中身を空にしています。(空にしないと画像の上に文字が出てしまうので)

.searchform label{display: none;}
.searchform input[type="text"]{
	float: left;
	width: 100px;
	height: 26px;
	padding: 0 30px 0 10px;
	background: url(images/searchtext.png) no-repeat;
	border: none; /* デフォルトCSSリセット */
	}
.searchform input[type="submit"]{
	float: left;
	width: 19px;
	height: 22px;
	margin: 1px 0 0 -28px;
	padding: 0;
	background: url(images/searchicon.png) no-repeat;
	border: none; /* デフォルトCSSリセット */
	box-shadow: none; /* デフォルトCSSリセット */
	}
.searchform input[type="submit"]:hover{
	filter: alpha(opacity=80); /* マウスホバーでちょっと薄くする */
	-moz-opacity: 0.80;
	opacity: 0.80;
	}

CSSはこんな感じ。それぞれ画像の大きさに合わせて縦横の幅を指定して、ボタン画像の左マージンをマイナスにすることで、重ねています。元々のformのCSSをリセットするための記述がありますが、ここはテーマによって違うと思います。

以上です!どこか変なところがありましたらご指摘いただけたら嬉しいですー!

「検索結果:○件」のように表示する方法をこちらの記事の「アーカイブページのカスタマイズ」という部分で書いています。
公開日:2014/10/21

1件のピンバック


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)