Cocoonの「アピールエリア」に検索フォームを設置すると、ユーザーが知りたい記事をすぐに探せるようになり、サイトの回遊率アップにもつながります。
しかも設置はとても簡単。ショートコードを設定するだけなので作業時間は10分ほどです。
この記事では、Cocoonのアピールエリアに検索フォームを表示する方法を、コピペで使えるテンプレート付きで分かりやすく解説します。
- Cocoonアピールエリアに検索フォームを表示する手順
- 入力欄の文言変更・デザイン調整
- 検索フォームをテンプレート化して再利用する方法
実装イメージ｜アピールエリアに検索フォームを配置する
まずは完成イメージをご覧ください。
Cocoon標準の検索ブロックとの違い
Cocoonでは、検索フォームを表示する方法がいくつかあります。
| 設置場所 | 設置方法 | 特徴 |
|---|---|---|
| 記事内・固定ページ | 検索ブロック | シンプルな検索フォーム |
| サイドバー・フッター | ウィジェット検索 | 入力欄とボタンが整った使いやすいデザイン |
| アピールエリア | HTMLで作成 | 構造・デザインはウィジェットと同じ |
検索ブロック
「検索ブロック」を使えば、記事や固定ページに検索フォームを表示できます。
手軽に設置できるのがメリットですが、シンプルなデザインです。
ウィジェット
サイドバーやフッターなどのウィジェットエリアに表示できます。
こちらは入力欄とボタンが整った、使いやすいデザインになっています。
このように、設置場所によって検索フォームの表示スタイルが異なります。
検索フォームはCSSを追加することで、デザインを自由にカスタマイズすることもできます。
ウィジェット版のボタン分離・角丸・下線など、コピペで使えるデザイン例をまとめた記事はこちらで紹介しています。
▶ Cocoon検索フォームのデザインをCSSで変更する方法
アピールエリア内に検索フォームを設置するポイント
アピールエリアに検索フォームを設置する場合は、通常の検索ブロックとは少し仕組みが異なります。
CocoonのアピールエリアはHTMLを直接入力します。
通常の「ブロック」や「ウィジェット」では設置できませんが、HTMLで自由にカスタマイズできるのが特徴です。
WordPressの「パターン」機能を使うことで、作成した検索フォームHTMLをテンプレート化し汎用性がぐんとアップします。
実装手順｜アピールエリアに検索フォームを設置する流れ
ここからは、実際にCocoonのアピールエリアへ検索フォームを設置する手順を紹介します。HTMLを貼り付けてパターン登録するだけの簡単ステップです。
アピールエリアで表示できる完成版HTML（CSS付）は、有料記事内で配布しています。
アピールエリアに検索フォームを設置したい方は、ぜひ利用してみてください。
以下は有料コンテンツのご案内および特定商取引法に基づく表記です。
■ サイト名
Turicco
■ サイトURL
https://turicco.com/
■ 運営者情報
運営責任者：はるみ
お問い合わせ先：https://turicco.com/contact/
■ 購入方法
コンテンツ販売サービス「codoc（コードク）」を利用しています。
詳しくは codoc購入者向けFAQ をご覧ください。
■ 納品方法
購入完了後、対象の記事が閲覧可能になります。
■ お支払い方法
・クレジットカード ・デビットカード ・プリペイド型クレジットカード ・Apple Pay ・Google Pay ・コンビニ決済
※決済はStripeを利用（SSL暗号化）。運営者はカード情報を保持しません。
■ 返金・キャンセルについて
codoc株式会社の利用規約第10条（返金）に基づき、原則としてご購入後のキャンセル・返金はできません。あらかじめご了承ください。
■ 販売価格
200円（税込）
Comment 記事の感想を書き込んでいただけると幸いです