【Cocoon】コピペで一発！検索窓を可愛くするカスタマイズ

という方に向けて「Cocoonの検索フォームをカスタマイズする方法」をまとめました。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

検索窓の完成イメージ

カスタマイズ後の検索窓は上の様になります。

「お前のサイトまんまやん」と思われるかもしれませんが…そう、ご察しの通りSANGOの検索フォームを意識したカスタマイズになります。

マテリアルで可愛いめなデザインが好きな方には気に入っていただけるものかと思います。

カスタマイズ手順

「上の完成イメージとは違う色合いにしたい…」という場合はstep2で色を変更し、「フォームの文言を変えたい」という方はstep3まで行う必要があります。

バックアップを忘れずに

早速カスタマイズしていきたいところですが万が一の事態を考え、事前にバックアップを取っておくことをオススメします。

「バックアップするの初めて…」という方は以下の記事を参考にしてみてください。

【WordPress】CSSをカスタマイズする際のバックアップの取り方

Cocoonの検索窓のカスタマイズ方法

CSSコードをコピペする

以上のどれかの方法でカスタマイズコードをコピペします。

「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。

【初心者向け】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の変更が反映されない場合

キャッシュ系プラグイン

「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。

プラウザのキャッシュを削除

お使いのブラウザのキャッシュを削除してみてください。

Chromeをお使いの場合は以下のショートカットキーで削除できます。

まとめ

「もっとド派手にカスタマイズしたい」という方は、以下の記事で今までのCocoonカスタマイズをまとめているので参考にしてみてください。

【初心者でも簡単】Cocoonのおしゃれなカスタマイズ総まとめ

参考になれば幸いです！では⸝⸝- ̫ -⸝⸝