の まとめ

デジタルガジェットレビュー、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」の自動追尾するSNSボタンを非表示にする方法

WordPressのテーマ「stinger3」では、画面のスクロールに追尾するフ …

【WordPress】stinger3の見出し(h2,h3,h4タグ)のデザインを変更する方法

WordPressのテーマ「Stinger3」の見出し(h2、h3、h4)を変更 …

【WordPress】テーマ「Stinger5」の新着記事NEW POSTを削除して非表示にする方法

WordPressのテーマ「Stinger5」のサイドバーにある新着記事の削除方 …

リンクの例
【WordPress】アイキャッチ付きサイト内記事へのリンクを作成する方法

アイキャッチ付きのサイト内記事リンクを作るプラグインを紹介します。 functi …

【WordPress】テーマ「Stinger5」の広告の位置を変更してみました

WordPressのテーマ「Stinger5」の広告の位置を変更してみました。 …