ブログ

【AFFINGER5】検索フォームのカスタマイズ方法。PHPとCSSにコピペでOK!

\ シェアしてね! /

この記事の内容

AFFINGER5で検索フォームのカスタマイズをしたので、手順などを解説🌸

PHPとCSSのコピペでOK🙌

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

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

完成した検索フォームはこちらです👇

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

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

ブログの雰囲気に合った、ふわ~っとした検索フォームにしてみました✨可愛くできて満足です!

あまり難しいことはなかったのですが、つまずいた所もあったため、この記事では

私がした「検索フォームのカスタマイズの方法」や「PHP、CSSの記述」

を、備忘録がてら残しておきます。

検索フォームのカスタマイズ

私がした検索フォームのカスタマイズは、以下のような感じです。

完成した検索フォーム(カスタマイズ後)

  • ボタンの色を変更
  • 角を丸く変更
  • 検索フォームの周りに淡い影

検索ボックスのカスタマイズは以下の流れで出来ました。

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

「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;
}


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

CSSをコピペしたら、あとは自分のブログに合った検索フォームにカスタマイズしていきましょう。

カスタマイズの注意点

コピペするだけのカスタマイズでしたが、つまずいた所が3つあったので、備忘録として残しておきます。

親テーマへ上書きが必要?

今回のカスタマイズでは、一部のデザインに「!important」を記述して、強制的に上書きしなければいけない所が出てくるかもしれません。

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

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

そのため、きちんとCSSを記述しているつもりでも、元々あった親テーマの「searchform.php」の内容が反映されて、思い通りにカスタマイズが出来ないことがあります。

その時は「!important」を付与して対象しましょう。

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

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

少し分かりづらいですが、ふわっとさせて角丸を適用させている上に、ハッキリとした実線が上書きされています。これが親テーマのPHP側の枠線です。

私の場合、上記の枠線を消したかったため、親テーマの枠線には「border:none!important;」を記述しています。

PHP名とid名

私はPHPのファイル名を「searchbox.php」にし、id名も「searchbox」にしていましたが、カスタマイズが反映しませんでした。

作成した「PHP名」とphpに記述する「id名」を以下のように修正したら、無事に反映されるようになりました。

  • 作成するphpファイル:searchform.php
  • phpに記述する「form id="~"」:searchform

カスタマイズがうまく反映しない時には、PHP名とid名も確認してみましょう。

Font Awesomeのバージョン

上記のコードに記述されている検索フォームの虫眼鏡アイコンは、Font Awesomeの古いバージョン(v4.7.0)のものです。

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

私は新しい方のコードをPHPに記述していて、虫眼鏡🔎のアイコンがうまく表示されていませんでした。なんとも初歩的な間違いですね…。

Font Awesomeはこちら

まとめ:検索フォームを可愛いデザインに変更しよう

検索フォームを使う人がどのくらいいるのかは疑問ですが、やっぱりブログの雰囲気にあったデザインの検索フォームの方が嬉しいですよね。

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

ちなみに私は検索機能をめちゃくちゃ使います!きっと見てる人は見てる!笑

参考サイト様

参考サイト様、ありがとうございました。

以上、「【AFFINGER5】検索フォームのカスタマイズ方法。PHPとCSSにコピペでOK!」の内容でした。

次に読みたい!

検索フォームという細か~いカスタマイズが好きなら、アドレスバーの色を変更するカスタマイズもオススメ☺ブログのテーマカラーにすると、統一性が出てオシャレになりますよ🙌

【コピペでOK】ブログのアドレスバーを好きな色に変更するカスタマイズ。android、Chrome限定。

Sponsored Link
\ シェアしてね! /

-ブログ

Copyright© 節約帳 , 2020 All Rights Reserved Powered by AFFINGER5.