【自分でSANGOをカスタマイズ】サイト内検索ウィジェットをシンプルにする

カスタマイズは自己責任でやろう！

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。

この記事では
サイト内検索の部分をシンプルにカスタマイズした方法を説明。

このサイトの環境

テーマ

子テーマ

プラグイン

Before

After

文字を入力しているとき↓

使うソフトなどはこちら

必須

WordPress

Google Chrome

推奨

File zilla

sublime text

ジャンプマップ

サイト内検索ウィジェットをカスタマイズをする準備

追加方法	難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

ブログのカスタマイズを加速させる「追加CSS」の使い方

夏だし髪を斬りに行こう！

夏だしどっか行こう！

カスタマイズコードを追加

style.cssにコードを追加する

CSSコード（コメントあり）

/*--------------------------------------
サイト内検索ウィジェットを変更
--------------------------------------*/
input#s {/*検索部分全体*/
    background: #f3f3f3;/*背景色（お好みで）*/
    box-shadow: none;/*影を削除*/
    padding: 0 10px 0 50px;/*内側の余白 上0 右10 下0 左50*/
}
#searchsubmit {/*アイコン部分*/
    background-color: #f3f3f3!important;/*背景色（お好みで）*/
    color: #424242;/*アイコンの色（お好みで）*/
    left: 0;/*左側に移動*/
    border-bottom: solid 1px transparent;/*下線を透明に*/
}
input#s:focus {/*検索部分全体（フォーカス時）*/
    box-shadow: none;/*影を削除*/
    border: solid 1px #42424230;/*枠線を追加*/
}
input#s:focus + #searchsubmit.fa {/*アイコン（フォーカス時）*/
    font-size: 22px;/*サイズ小さく（追加はお好きに）*/
}

/*--------------------------------------

サイト内検索ウィジェットを変更

--------------------------------------*/

input#s {/*検索部分全体*/

background: #f3f3f3;/*背景色（お好みで）*/

box-shadow: none;/*影を削除*/

padding: 0 10px 0 50px;/*内側の余白上0 右10 下0 左50*/

}

#searchsubmit {/*アイコン部分*/

background-color: #f3f3f3!important;/*背景色（お好みで）*/

color: #424242;/*アイコンの色（お好みで）*/

left: 0;/*左側に移動*/

border-bottom: solid 1px transparent;/*下線を透明に*/

}

input#s:focus {/*検索部分全体（フォーカス時）*/

box-shadow: none;/*影を削除*/

border: solid 1px #42424230;/*枠線を追加*/

}

input#s:focus + #searchsubmit.fa {/*アイコン（フォーカス時）*/

font-size: 22px;/*サイズ小さく（追加はお好きに）*/

}

CSSコード（コメントなし）

/*--------------------------------------
サイト内検索ウィジェットを変更
--------------------------------------*/
input#s {
    background: #f3f3f3;
    box-shadow: none;
    padding: 0 10px 0 50px;
}
#searchsubmit {
    background-color: #f3f3f3!important;
    color: #424242;
    left: 0;
    border-bottom: solid 1px transparent;
}
input#s:focus {
    box-shadow: none;
    border: solid 1px #42424230;
}
input#s:focus + #searchsubmit .fa {
    font-size: 22px;
}

/*--------------------------------------

サイト内検索ウィジェットを変更

--------------------------------------*/

input#s {

background: #f3f3f3;

box-shadow: none;

padding: 0 10px 0 50px;

}

#searchsubmit {

background-color: #f3f3f3!important;

color: #424242;

left: 0;

border-bottom: solid 1px transparent;

}

input#s:focus {

box-shadow: none;

border: solid 1px #42424230;

}

input#s:focus + #searchsubmit .fa {

font-size: 22px;

}

確認の手順

カスタマイズコードを保存
カスタマイズしたページを開く
cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

検索欄に文字を表示させる

こちらのカスタマイズはマクリンさん（@Maku_ring）のTwitterでの素晴らしい発言を参考にさせていただきました。

１.　子テーマにsearchform.phpファイルを作成

テキストエディタソフトでファイル名「searchform.php」を作成します。

保存先は子テーマのstyle.cssとかがある場所でOKです。

２.　コードを記入

作成したsearchform.phpに下記のコードを記入します。

searchform.php（追加するコード：サイト内検索ウィジェット）

<form role="search" method="get" id="searchform" class="searchform" action="<?php echo home_url( '/' ); ?>">
    <div>
        <input type="search" placeholder="サイト内を調べて見る" id="s" name="s" value="" />
        <button type="submit" id="searchsubmit" ><i class="fa fa-search"></i>
        </button>
    </div>
</form>