くるみ
- Cocoonの検索窓がちょっと地味に感じる
- もっと目を引く感じの検索フォームにしたい
という方に向けて「Cocoonの検索フォームをカスタマイズする方法」をまとめました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
お品書き
検索窓の完成イメージ
カスタマイズ後の検索窓は上の様になります。
「お前のサイトまんまやん」と思われるかもしれませんが…そう、ご察しの通りSANGOの検索フォームを意識したカスタマイズになります。
マテリアルで可愛いめなデザインが好きな方には気に入っていただけるものかと思います。
カスタマイズ手順
方法はいたってシンプルかつ簡単です。「上の完成イメージとは違う色合いにしたい…」という場合はstep2で色を変更し、「フォームの文言を変えたい」という方はstep3まで行う必要があります。
くるみ
バックアップを忘れずに
早速カスタマイズしていきたいところですが万が一の事態を考え、事前にバックアップを取っておくことをオススメします。
「バックアップするの初めて…」という方は以下の記事を参考にしてみてください。
【カスタマイズ時に必須】WordPressでCSSのバックアップをとる方法ファイルをいつでも元の状態に戻せるようにしたら、さっそく本題のカスタマイズに移っていきましょう。
Cocoonの検索窓のカスタマイズ方法
CSSコードをコピペする
- 「追加CSS」に追加
- 「テーマエディター」を使って追加
- FTPソフトを使って追加
以上のどれかの方法でカスタマイズコードをコピペします。
くるみ
「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。
【初心者向け】WordPressでCSSを編集する方法を徹底解説CSSコード
input.search-edit{
border: none;
border-bottom: solid 1px #efefef;
box-shadow: 0 4px 4px rgb(0 0 0 / 2%), 0 2px 3px -2px rgb(0 0 0 / 5%);
}
input.search-edit::placeholder {
color:#ddd;
}
.search-submit{
border-bottom: solid 1px rgba(0,0,0,.1);
border-radius: 0 3px 3px 0;
color: #fff;
background-color: #f8c678;/*お好みの色に*/
width: 50px;
height: 50px;
top: 0;
right: 0;
}input.search-edit{
border: none;
border-bottom: solid 1px #efefef;
box-shadow: 0 4px 4px rgb(0 0 0 / 2%), 0 2px 3px -2px rgb(0 0 0 / 5%);
}
input.search-edit::placeholder {
color:#ddd;
}
.search-submit{
border-bottom: solid 1px rgba(0,0,0,.1);
border-radius: 0 3px 3px 0;
color: #fff;
background-color: #f8c678;
width: 50px;
height: 50px;
top: 0;
right: 0;
}ボタンをお好みの色にカスタマイズする
ここは「上の完成イメージとは違う色合いにしたい」という方向け。
background-color: #f8c678;/*お好みの色に*/コピペしたCSSの「お好みの色に」とコメントがあるところのカラーコードを変更してあげれば、フォーム右にあるボタンの色を変更できます。
フォームの文言を変更する
検索窓の「サイト内を検索」という文言を変更したい場合は、cocoon-master>serchform.phpの
<?php _e( 'サイト内を検索', THEME_NAME ) ?>" name="s" class="search-edit" aria-label="input" value="<?php echo esc_attr($s); ?>">の「’サイト内を検索’」の所の文字列を好きなものに書き換えればOKです。
ここまで終わればカスタマイズは終了。お疲れ様です！
くるみ
CSSの変更が反映されない場合
「あれ…?CSSが反映されないぞ…」となった場合は、キャッシュが原因であることが多いので以下の2つの方法を試してみてください。キャッシュ系プラグイン
「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。
プラウザのキャッシュを削除
Chromeをお使いの場合は以下のショートカットキーで削除できます。
| Windows | ［Shift］＋［Ctrl］＋［Delete］キー |
| Mac | ［shift］＋［command］＋［delete」キー |
まとめ
「もっとド派手にカスタマイズしたい」という方は、以下の記事で今までのCocoonカスタマイズをまとめているので参考にしてみてください。
Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】参考になれば幸いです！では⸝⸝- ̫ -⸝⸝
