CrystalSnowman.com

あなたの時間節約につながる情報を提供します

WordPress 検索ボタンをFont Awesomeのアイコンに変える方法

Font Awsome

WordPressの記事検索ボタンをFont Awesomeのアイコンにしてみました。またサイドバーからヘッダー部分に移動しました。簡単に見た目が良くなるので紹介します。

方法

変更前の検索フォーム

WordPressの記事の検索(サイト内検索)をウィジェットでサイドバーに追加すると、このような検索項目が追加されます。

search button image

これでも別に問題ないのですが、ボタンではなくアイコンクリックで検索できるようにしたいと思いました。
特にこのサイトで使用しているFont Awesomeのアイコンで統一したいと思いました。ボタンだと古いUIのイメージがあったので格好よくしたかったのです。

検索フォームの別ファイル化

検索フォームのデザインしやすくするためと、サイドバー以外にも配置できるようにするために検索フォームを別ファイルにしました。
テーマフォルダーの配下にsearchform.phpというファイルを作成します。

フォーム全体のクラス名を”searchform”、フィールドを”searchfield”、ボタンを”searchsubmit”としました。

2行目のactionでhome_url(‘/’)を出力しますが、esc_url()という関数で変換した形で出力しました。
これはURLを出力する際に、URLの文字列を無害化する関数です。
例えばアンド記号 (&) と(<)記号はそれぞれ (&#038, &lt) という形に変換してくれます。XSS(クロスサイト・スクリプティング)対策のためです。

3行目の検索入力欄はhtml5に対応するためinput要素のtype属性を”search”にしました。

検索フォームの移動

検索フォームをヘッダーに移動させます。header.phpを修正します。

10行目にget_search_form()を追加して、作成したテーマ内のsearchform.phpを読み込むようにします。

修正したらウィジェットのサイドバーから検索フォームを外します。

検索フォームのデザイン

cssでボタンをアイコンにします。

11行目でfont-familyとしてFontAwesomeを指定しています。これによりネット上に公開されているFontAwesome用サーバからフォントを取得します。

FontAwesomeを使うには以下をhead要素に記述します。

13行目でborder:noneを指定します。ボタンの外枠が見えなくなります。

14行目でbackground: transparentを指定します。ボタンの灰色が透明になります。これによりアイコンだけが表示されているように見えます。

完成

このページのTopにも表示されていますが、このようになります。

search icon

アイコンもFontAwesome用サーバから取得しているため、拡大してもボケたりしません。いい感じです。

まとめ

searchform.phpとcssとFontAwesomeで検索フォームのデザインを変えてみました。簡単にできるのであなたもチャレンジしてみてはいかがでしょうか。


Top