Cocoonの使い方やカスタマイズとオリジナルスキン

Cocoonの検索フォームをデザインカスタマイズ

Cocoon・カスタマイズ
この記事は約2分で読めます。

サイドバーなどに表示すると便利な自サイト内の検索フォームのデザインをカスタマイズしてみます。

WordPressの標準ウィジェット「検索」のカスタマイズです。

 

カスタマイズサンプル

Before

Cocoonのデフォルトは以下です。

サイト内検索フォーム

After

まるっこいデザインにし、サーチボタンに色を付けました。

サイト内検索フォーム:カスタマイズ

オンマウス時のサーチボタン

サイト内検索フォーム:カスタマイズ

 

カスタマイズ方法

簡単なCSS追記のみです。

CSS追記は以下のいずれかから行って下さい。

外観→カスタマイズ追加CSS

外観→テーマエディターstyle.css

 

CSS

以下のCSSを追記します。

/*検索フォーム*/
.search-edit {
height:50px;
padding:0 10px; 
border-radius:25px !important;
outline:0;
background:#eee;
}
[type="submit"].search-submit {
height:50px;
width:50px;
top:0;
right:0;
background:#839b5c;
color:#fff;
border:none;
border-radius:0 25px 25px 0;
}
[type="submit"].search-submit:hover{
color:#839b5c;
background:#ddd;
}

 

その他のカスタマイズ方法

検索フォームの設定内容を変更してしまう事でも可能です。

検索フォーム設定内容を変える場合は、親テーマ内直下にある「searchform.php」を子テーマにコピーして編集する方法で可能。

PHPファイルを編集するのは抵抗がある場合は、ウィジェットを使わずに自身で作成したフォームを使えばもっと自由なデザインが可能です。

詳細は以下にまとめています。

 

カラーの変更

お好きなカラー設定には以下もご利用下さい。

マカロンビビッドパステル伝統色和色セーフ色名

 

 

コメント

  1. たろきち より:

    こんにちは。
    いつもありがたいカスタマイズの記事を参考にさせて頂いております。
    サイドバーの検索窓については綾系さんの本記事を参考にカスタマイズしましたが、検索をかけた後に、虫眼鏡の”〇〇”の下に、「メインのところに現れる検索窓を消す方法」はあるのでしょうか?
    サイドバーにあってメインにもあると、2つはいらないなと思ってしまって…
    もしカスタマイズの方法をご存知でしたら教えて頂けると嬉しいです。
    宜しくお願い致します。

    • 綾糸綾糸 より:

      たろきちさま 初めまして。
      検索フォームの表示位置は、ご自身で設定されているウィジェットによると思うので
      不要な箇所のウィジェットから削除すればよいかと思います。

      • たろきち より:

        綾糸さん、教えて下ってありがとうございました。
        ウィジェットに設定した検索フォームではなく、サイト内の検索結果ページの上に、入力済みワード付き現れる検索ボックスのことなんです。これを削除したいと思っていましてw

        • 綾糸綾糸 より:

          たろきちさま
          なるほど、勘違いの回答、失礼しました。
          ですが、これは検索ウィジェットの仕様だと思うので非表示は難しいと思います。

タイトルとURLをコピーしました