カスタマイズは自己責任で!
ワードプレステーマ

子テーマ

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

After

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

使うソフトなどはこちら
必須
WordPress
Google Chrome
推奨
File zilla
sublime text
見たい場所へジャンプ
サイト内検索ウィジェットをカスタマイズをする準備
追加CSSの手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く
追加CSSの使い方はこちら
カスタマイズコードを追加
style.cssにコードを追加する
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/*-------------------------------------- サイト内検索ウィジェットを変更 --------------------------------------*/ 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;/*サイズ小さく(追加はお好きに)*/ } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/*-------------------------------------- サイト内検索ウィジェットを変更 --------------------------------------*/ 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; } |
確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新
検索欄に文字を表示させる
こちらのカスタマイズはマクリンさん(@Maku_ring)のTwitterでの素晴らしい発言を参考にさせていただきました。 1. 子テーマにsearchform.phpファイルを作成 テキストエディタソフトでファイル名「searchform.php」を作成します。 保存先は子テーマのstyle.cssとかがある場所でOKです。
2. コードを記入 作成したsearchform.phpに下記のコードを記入します。
searchform.php(追加するコード:サイト内検索ウィジェット)
このコードはぼくもよくわかりませんが、これを追加すればOKです。 表示させる文字は「サイト内を調べてみる」の部分を好きな文字に変更してください。
1 2 3 4 5 6 7 |
<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> |
3. アップロードして完了 コードを記入して、保存したらFTPソフトなどでアップロード>ブラウザのキャッシュ削除・更新すれば表示されます。

素晴らしいカスタムをありがとうございます!
まとめ:サイト内検索部分をシンプルにするカスタマイズ
手順をザクッと説明
変更手順
- FTPソフトとテキストエディタを開いて準備OK。
- 追加のコードを書き込んで、保存。アップロード。
- 更新して確認。
- 文字を追加する場合は、searchform.phpを作成
- 追加のコードを書き込んで、保存。アップロード。
- 更新して確認。
ちょっとした部分を変えるだけでも違いがでますね!