コスメ水槽waterTank

30代・乾燥肌の管理人の年齢肌対策。スキンケアコスメの紹介と、時々メイク。綺麗なおばさん目指します。

[Stinger5]サイドバーの検索フォームにあらかじめうっすらテキストを表示させるよ(プレースホルダ)

 

目標

これが




こうなる

フォームの入力欄(テキストボックス)に、うっすら文字が表示されていることがありますよね。「プレースホルダ」と呼びます。かつてはJavascriptやjQueryで実装していましたが、HTML5 では placeholder属性によって簡単に設定できるようになりました。

修正するソースファイル

ここで使用しているStinger5はver20150505です。

  • searchform.php

検索フォームがサイドバーに設置されているので、修正するのは sidebar.php かな? と思ったのですが、sidebar.php では get_search_form()関数を呼び出しているだけでした。この関数が searchform.php を使用して検索フォームを返却しています。

<input>タグにplaceholder属性を追加 - searchform.php

修正前

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

修正後

    <input type="text" value="<?php the_search_query(); ?>"  name="s" id="s" placeholder="ブログ内検索" />

ソースが横に長いので右端までスクロールして見て下さい。

placeholder属性に指定した文字列が、画面に表示されます。

参考にしたサイト

 - ブログひっこし ,