の まとめ

デジタルガジェットレビュー、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」のSNS用ボタンをフラット …

【WordPress】サイトマップ作成のプラグイン「Google XML Sitemaps」の使い方

WordPressで構築したサイトの「サイトマップ」を簡単に作成して、Googl …

【WordPress】テーマ「stinger3」をスマホで表示したときに画面上部に広告を表示する方法

WordPressのテーマ「stinger3」をスマホなどのモバイル端末で表示し …

【WordPress】テーマをStinger5にしました

右メニューの2カラム構成が好きなので、Stinger3を使ってきました。 その進 …

【WordPress】テーマ「Stinger5」のSNSシェアボタンをフラットにしてシェア数を表示する方法

Stinger5のSNSシェアボタンを変更して、フラットにしてシェア数を表示する …