レンサバ比較とWordPress

レンタルサーバー比較とWordPressのたブログ 初心者におすすめのレンタルサーバーの選び方

テンプレート

ワードプレスの標準の検索フォームに絶対に必要なCSSがあるんです

投稿日:

このブログのテンプレートは、SEOテンプレートのSTINGER PLUS2なんです。だから、検索フォームを変更しているってことは少ないと思います。しかも、ワードプレスの標準の検索フォームにするってことは、ほとんどないと思います。どうして、ワードプレスの標準の検索フォームにしたかというと、STINGER PLUS2の検索フォームの小さな画像が表示されないことがあるからです。

標準の検索フォームでは画像を使ってない

どうしてなんですかね?STINGER PLUS2の検索フォームの画像って、とっても小さいんです。それなのに、表示されないことがあるんです。いろいろカスタマイズしているので、もう元に戻せないんです。それで、画像を使っていないワードプレスの標準の検索フォームにしたんです。

ワードプレスの標準の検索フォームってたくさんはないと思うんだけど、バージョンとかあるかもしれないんだけど、下記を使っています。

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

上記をコピペすると、このブログの検索フォームとだいたい同じに表示されます。

日本語だから、検索って文字が大きくなっちゃうのかな?

このブログでは、子テーマのstyle.cssに下記を追記しているんです。なので、下記のCSSを追記すれば、全く同じ検索フォームになります。検索フォームの右側の「検索」って文字が大きかったので少し小さくしています。文字サイズを14pxに変更していますが、14pxというのは個人的な好みなので変更してください。

.searchform input[type="submit"]{
	font-size:14px;}

STINGER PLUS2の場合、検索フォームのテンプレートはsearchform.phpなんだけど、ワードプレスであればsearchform.phpってことなのかな?

詳細は →

WordPressテーマ「ハミングバード」


-テンプレート

Copyright© レンサバ比較とWordPress , 2019 All Rights Reserved.