ブログ

【コピペでできる】AFFINGER5で検索ボックスをかわいくカスタマイズしてみた。PHPとCSSにコピペでカンタン。

更新日:

この記事の内容

検索ボックスをカスタマイズしたのでソースコードを紹介。

ブログ内を検索できる超有能アイテム「検索フォーム」。

デフォルトのものでもまったく問題はないのですが、できればもっとかわいくならないかな~という欲に駆られ、検索フォームをちょっとかわいくカスタマイズしてみました。

【ブログ】検索フォームのカスタマイズーafter

できた検索フォームがこちら!

いろいろつまずいたところもあったため、この記事ではわたしがブログの検索フォームカスタマイズするにあたってしたことを残しておきます。

検索ボックスは子テーマにsearchform.phpを作成してカスタマイズしよう

検索ボックスのカスタマイズはどんな感じになったの?

ふわっとさせてみたよ~!

【ブログ】検索フォームのカスタマイズーafter

検索するときのボタンを淡い色にして、ボックスの周りをぼんやりさせてみました💕

とりあえずやたら影をつけたがるわたしは検索ボックスをふわっとさせてみました。笑

検索ボックスのカスタマイズは3ステップでできてわりとカンタンです。

検索ボックスのカスタマイズの手順

  • 子テーマに「searchform.php」を作成
  • PHPに以下の記述をコピペ
  • CSSをコピペしてカスタマイズ

PHPの記述内容

 PHPの記述内容はこちら

<form id="searchform" action="<?php echo esc_url( home_url('/') ); ?>" method="get"><input id="searchboxin" id="s" name="s" type="text" placeholder="ブログ内を検索"/><button type="submit" id="searchbtn"><i class="fa fa-search" aria-hidden="true"></i></form>

CSSの記述内容

 CSSの記述内容はこちら

/*-----検索フォーム----*/

#searchform{
 position:relative;
 max-width:300px;	
 margin-bottom:20px;
 text-align:left;
 margin:0px auto;
 border:none!important;/*親テーマに上書き*/
}

#searchboxin{
 height:50px;
 padding:0 10px; 
 outline:0;
 background:#fff;
 border:1px solid #eee;
 border-radius:5px;
 box-shadow:0 2px 3px rgba(0, 0, 0, 0.2);
}

#searchbtn{
 height:50px;
 position:absolute; 
 left:255px;/*アイコン左右の位置調整*/
 top:0;
 background:none;
 color:#b3cedd;
 border:none;
 font-size:20px;/*アイコンサイズ*/
}

#searchbtn:hover{
 color:#95bfdd;
}


/*-----検索フォームここまで-----*/

カスタマイズの説明

検索フォームのカスタマイズをするにあたり、以下のサイト様を参考にさせていただきました。

参考サイト様

コピペでなんとか乗り切れました!ありがとうございます!

大体はコピペでいけたのですが、いくつかつまずいた所があったので残しておきます。

つまずいた点

  • 親テーマのsearchform.phpに上書きしていることをお忘れなく
  • Font Awesomeのアイコンは適宜変更を!

親テーマのsearchform.phpに上書きしていることをお忘れなく

AFFINGER5(というかワードプレス自体?)はもともと親テーマに「searchform.php」があります。

今回のカスタマイズでは子テーマに同じ名前の「searchform.php」というファイルを作成し、親テーマのsearchform.phpに上書きすることで成り立っています。

なのでどこかで親テーマの「searchform.php」の内容が反映されている可能性がありますので、一部のデザインはもしかすると「!important」を記述して強制的に上書きしないといけないかもしれません。

わたしは検索ボックスの周りをふわっとさせたかったのですが、もともと記述されていた枠線(border: #ccc 1px solid;)が上書きされてしまい、ふわっと感が出ませんでした。

【ブログ】検索フォームのカスタマイズはふわっと感が線で上書きされてます。

少し分かりづらいですが、ふわっとさせて角丸を適用させている上に線が上書きされています。

なのでもともとあった枠線は「border:none!important;」を記述して消しています。

また、なぜかカスタマイズが反映しない場合は

  • 作成するphpファイルが「searchform.php」となっているか
  • phpに記述する「form id="~"」は"searchform"になっているか

も確認してみてください。

わたしは名前を変えたらうまくいきませんでしたが、こちらに修正するとうまくいきました。

アイコンが表示されないときはFont Awesomeのバージョンの確認を!

上記のコードで使用している検索フォームのアイコンはFont Awesomeの古いバージョン(v4.7.0)です。

アイコンが表示されないときはPHPに記述したFont Awesomeのコードがブログに合っているバージョンのものかを確認してみてください。

Font Awesomeはこちら

まとめ:検索フォームもかわいくカスタマイズしよう!

検索フォームを使う人が多いかは疑問ですが、やっぱりブログの雰囲気にあった検索フォームの方がうれしいですよね。

コピペでできてあまり難しいカスタマイズではありませんので、気になる方はぜひやってみましょう。

ちなみにわたしは検索機能めちゃくちゃ使う人です!笑

Sponsored Link

 おすすめ 

貯金

貯金へ

節約

節約へ

家計簿

家計簿へ

ブログ

ブログへ

公的制度

公的制度へ

TOP

TOPへ

-ブログ

Copyright© OLあさとさんの節約帳 , 2019 All Rights Reserved Powered by AFFINGER5.