の まとめ

デジタルガジェットレビュー、Mac ・ iPhone・ WordPressのコード、食レポなどをまとめて比較してお届けします。

WordPressテーマStinger5の検索欄にテキストを表示しておく方法

             

      2015/03/26

HTML5で導入されたplaceholder属性によって、フォームのテキスト入力欄にあらかじめテキストを入れておけるようになりました。

ここでは、WordPressテーマ「Stinger5」の検索フォームで実現する方法を紹介します。

サーチフォーム

方法

1.WordPressにログインして「外観」から「テーマの編集」をクリックします。

2.右のメニューから「検索フォーム(searchform.php)」をクリックします。

3.「text」のコードを次のように修正します。

修正前

<input type="text" value="<?php the_search_query(); ?>"  name="s" id="s" />

修正後

<input type="text" placeholder="キーワードを入力して検索" value="<?php the_search_query(); ?>"  name="s" id="s" />

まとめ

placeholder属性を使うことで、フォームにテキストを入れておきフォーカスされると消すようにすることができます。

検索フォームをカスタマイズしたい人はぜひ。

 - WordPress , ,

336-280

  関連記事

【WordPress】テーマ「Stinger3」の記事内広告をダブルレクタングルにする方法

WordPressのテーマ「Stinger3」における本文中の広告を2つ並べて表 …

【WordPress】コピペでOK!「WordPress Popular Post 」でカテゴリー別ランキングを表示する方法

「WordPress Popular Post」はデフォルトでもランキングを作成 …

tag
WordPressテーマStinger5でアイコンフォントを使ってシェアボタンを作成する方法【初心者向け】

SNSのシェアボタンに、もう一工夫欲しい!ということでアイコンフォントを使ってみ …

【WordPress】テーマ「Stinger5」をカスタマイズして記事の幅を広げてタイトルと左揃にする方法

WordPressのテーマ「Stinger5」ではタイトルと「本文の始まり位置( …

【WordPress】テーマ「Stinger3」の本文widthを修正する方法

WordPressテーマ「Stinger3」の本文が少し狭く感じたので修正してみ …