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

完成イメージ

Before

After

SANGOのマテリアルデザインを意識した、可愛らしいデザインにしてみました。

※ 周りの影が薄いため、サイドバーの背景が白の場合は検索フォーム自体が埋もれているように見えてしまいます。なのでその際は後述するコードのドロップシャドウの値を濃くしてあげてください。

カスタマイズ方法

0. バックアップを忘れずに

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

その方法について詳しくは下記記事にまとめているでぜひ参考にしてください。

WordPressでCSSのバックアップをとる方法【カスタマイズ時に必須】2020-10-30

1. 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 {
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  color: #fff;
  background-color: #f8c678; /* ボタンの背景色 */
  border-bottom: solid 1px rgb(0 0 0 / 10%);
  border-radius: 0 3px 3px 0;
}

上記コードを、テーマで読み込んでいるCSSファイルにコピペします。

CSSを編集する方法について、詳しくは下記記事にまとめているでぜひ参考にしてください。

【初心者向け】WordPressでCSSを編集・追加する方法2020-10-24 【WordPress】CSSの変更が反映されない場合の原因・対処法2022-05-13

もしボタンの色を変更したい場合は、コピペしたCSSの/* ボタンの背景色 */とコメントしている箇所をお好みの色にしてください。

2. フォームの文言を変更（任意）

検索窓の「サイト内を検索」というプレースホルダーの文言を変更したい場合。

<?php _e( '<任意の文言>', THEME_NAME ) ?>" name="s" class="search-edit" aria-label="input" value="<?php echo esc_attr($s); ?>">

cocoon-master>serchform.phpの上記箇所の'<任意の文言>'を書き換えてください。

以上でカスタマイズは完了です 🎉

他のCocoonカスタマイズも全て下記記事にまとめているので、ぜひ参考にしてください。 Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】2021-01-19