Cocoonの「アピールエリア」に検索フォームを設置すると、ユーザーが知りたい情報へ一瞬でたどり着ける案内板のように機能し、回遊率アップにも効果的です。
しかも、検索フォームはちょっとしたHTMLとショートコードだけで設置でき、作業時間は10 分ほど。初心者の方でもすぐに実装できます。
この記事では、アピールエリアに検索フォームを表示する方法をコピペで使えるテンプレート付きで解説します。
当サイトでも実際に導入しており、検索履歴の増加など効果を実感しています。
- Cocoonアピールエリアに検索フォームを表示する手順
→ HTMLテンプレートのコピペで実装 - 入力欄の文言変更・デザイン調整
- テンプレート化して使い回す方法
実装イメージ｜アピールエリアに検索フォームを配置するとこうなる
まずは完成イメージをご覧ください。
ファーストビューに検索窓が表示されることで、ユーザーは迷わず目的の記事へアクセスできる構成になります。
背景の白枠は初期状態のスタイルで、CSSで色・透明度・枠の濃さを自由に調整可能です。
例：
- 背景色を透明にする
- 背景色の濃さ（透過率）を調整する
アピールエリア内に検索フォームを設置するポイント
設置にあたって、アピールエリア特有の仕様を理解しておくことが重要です。
Cocoonのアピールエリアは、通常の「ブロック」や「ウィジェット」ではなくHTMLコードを直接入力して編集する仕組みになっています。ブロックの検索フォームをそのままは使えませんが、逆にカスタムデザインの自由度が高いエリアです。
WordPressの「パターン」機能を使うことで、作成した検索フォームHTMLをテンプレート化でき汎用性がぐんとアップします。
実装手順｜アピールエリアに検索フォームを設置する流れ
ここからは、実際にCocoonのアピールエリアへ検索フォームを設置する手順を紹介します。HTMLを貼り付けてパターン登録するだけの簡単ステップです。
アピールエリアで表示できる完成版HTMLは、有料記事内で配布しています。
アピールエリアに検索フォームを設置したい方は、ぜひ利用してみてください。
以下は有料コンテンツのご案内および特定商取引法に基づく表記です。
■ サイト名
Turicco
■ サイトURL
https://turicco.com/
■ 運営者情報
運営責任者：はるみ
お問い合わせ先：https://turicco.com/contact/
■ 購入方法
コンテンツ販売サービス「codoc（コードク）」を利用しています。
詳しくは codoc購入者向けFAQ をご覧ください。
■ 納品方法
購入完了後、対象の記事が閲覧可能になります。
■ お支払い方法
・クレジットカード ・デビットカード ・プリペイド型クレジットカード ・Apple Pay ・Google Pay ・コンビニ決済
※決済はStripeを利用（SSL暗号化）。運営者はカード情報を保持しません。
■ 返金・キャンセルについて
codoc株式会社の利用規約第10条（返金）に基づき、原則としてご購入後のキャンセル・返金はできません。あらかじめご了承ください。
■ 販売価格
200円（税込）
Comment 記事の感想を書き込んでいただけると幸いです