WordPress 検索フォームのカスタマイズ方法を教えてください。

質問

WordPress 検索フォームのカスタマイズ方法を教えてください。

ウィジェットから検索フォームを設定すると<label>が挿入されますが「検索：」の表示が邪魔です。表示しないようにするにはどうしたらいいですか？もし<label>が必要ないものなら挿入されないようにしたいです。コードは以下のようになっています。

<h2>タイトル</h2>
<form role="search" method="get" id="searchform" action="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>

回答No.2

outbrave · ベストアンサー

visibility:hidden;で非表示にしてもレイアウトは変化無しなので、display:none;を使うか

2010ですと、次のようになっていますので参考に
.screen-reader-text {
position: absolute;
left: -9000px;
}

<label>が挿入されないようにするのは、私も考えたことがないので不確かですが
Grepの付いたエディタなどで、そのタグを検索して削除することになると思います
ただ、そのタグがテーマにあるのか、WordPress本体にあるのかは知りません。

プラグインが不具合に関係する場合は多々あります、ただウィジェットに関連するプラグインを使われているかはわかりませんので。

ANO.1の参考URLで質問されると詳しい返答が期待できると思います。

お礼

ご回答ありがとうございます。
たいへん参考になりました。

回答No.1

outbrave

テーマ2010では、そのようなソースがありますが、cssで制御されているので、「検索：」は表示されません。

使用されているテーマのstyle.cssで、screen-reader-textを表示しないようにするのが良いと思います。

質問の際は、Wordpressのバージョンや使用しているテーマとテーマのバージョンの明記、確認したブラウザ名
また、プラグインを全て停止して試したか、特異なサーバーを使用していないかなどの情報が大切です。

ここで解決できなければ、参考URLの方が詳しい情報があると思います。

参考URL：

http://ja.wordpress.org/

お礼

ご回答ありがとうございます。
なにか他に良い解決方法があれば引き続きお願いします。

補足

CSSで以下のように指定してみました。

.screen-reader-text { visibility: hidden; }

「検索：」は表示されなくなりましたが、スペースがそのまま開いています。marginやpaddingを0にしても同じです。もし問題なければ<label>が挿入されないようにしたいです。

使用テーマは自作でバージョンは3.01です。WordPressを使い始めたのは3.0以降ですが、テーマは「WordPressレッスンブック 2.8対応」という初心者向けの書籍を参考して作りました。

ウィジェットを使用できるようにする方法は、本に書かれてなかったのでネットで調べて使えるように設定しました。特別な設定や変更は行っていません。

確認したブラウザはIE8で、サーバはロリポップでオリジナルドメインを使用しています。

「プラグインを全て停止して試したか」とありますが、質問の件と関係あるのでしょうか？最近使い始めたので、まだあまり理解していません。

数年前からHTMLとCSSでホームページを作っていますが、PHPは本を少し読んだことがある程度の知識しかありません。