Cocoonアピールエリアに検索窓（フォーム）を設置する方法／ショートコード利用

Cocoonテーマの「アピールエリア」は、注目させたい要素を目立たせるのに便利な機能です。

この記事では、このアピールエリアに 検索フォームを設置する方法 を解説します。設置例やショートコード、カスタマイズ方法についてもご紹介しますので、初心者の方でも簡単に実装可能です！

当サイトのトップページでも同じ形式を採用していますので、ぜひご覧ください。

実装イメージ｜Cocoonアピールエリアに検索窓（フォーム）を設置

アピールエリア内に検索フォームを配置すると、以下のような仕上がりになります。

白枠部分の背景色はCSSを使って調整可能です。

• 背景色を透明にする
• 背景色の濃さ（透過率）を変更

記事内に検索フォームを設置する方法

まず始めに、テーマの機能を使って検索フォームを設置する方法は２つあります。

ブロックメニューの「検索」を使う

表示できる場所：投稿ページ・固定ページ

検索フォームを投稿や固定ページに表示する場合は、「検索」ブロックを利用します。この方法はシンプルで特別なHTMLの知識は不要です。

1. 投稿または固定ページを開く。
2. ブロック追加メニューで「検索」をクリック。

これだけで簡単に検索フォームを設置できます。

検索

検索

ウィジェットの「検索」を使う

表示できる場所：サイドバーやフッター等

検索フォームをサイドバーやフッターに表示する場合は、ウィジェットの「検索」を利用します。

1. 管理画面の「外観」→「ウィジェット」にアクセス。
2. 「検索」をドラッグ＆ドロップで希望の位置に配置。

ウィジェットにある場所から選ぶことになるため、記事上、記事中、記事下、サイドバーなど、ざっくりとした配置になります。

アピールエリア内に検索フォームを設置する方法

アピールエリアはウィジェットやブロックと異なり、HTMLコードを直接入力してカスタマイズする仕様です。以下のポイントを押さえながら設置を進めましょう。

カスタマイズのポイント

• ワードプレスのパターン機能を活用
  • HTMLコードをパターン化（ショートコード化）することで、入力作業を簡略化できます。
• 他の場所でも活用可能
  • アピールエリアに限定せず、HTMLが使える場所ならどこにでも設置できる汎用的な検索フォームを作成できます。
• カスタマイズ可能な文言
  • 「サイト内検索」などの表示テキストを自由に変更できます。

以下、具体的な手順について解説します。

特定商取引法に基づく表記
サイト名	Turicco
サイトURL	https://turicco.com/
お問い合わせ	https://turicco.com/contact/
購入方法	コンテンツ販売サービス、codoc(コードク)を利用しています。 詳しくは購入者向けFAQをご覧ください。
納品方法	記事公開
販売価格	200円
お支払い 方法	クレジットカード、デビットカード、プリペイド型クレジットカード、Apple Pay、Google Pay、コンビニ決済
	※クレジットカード情報はSSLで暗号化され、決済システムサービスを提供するStripe社に直接送信されます。管理人が知ることはありませんのでご安心ください。
返金・キャンセルについて	codoc株式会社利用規約 第10条（返金）に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。