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

どうもおはようポテト(@ohayoupoteto22)です。

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

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

検索窓の完成イメージ

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

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

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

検索窓のカスタマイズ手順

方法はいたってシンプルかつ簡単です。

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

バックアップを忘れずに

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

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

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

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

CSSコードをコピペする

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

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

【初心者向け】WordPressでCSSを編集する3つの方法

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をお使いの場合は以下のショートカットキーで削除できます。

まとめ

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

【SANGOカスタマイズ総まとめ】サイトをもっと魅力的に!

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