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

今回は『検索フォーム』をアピールエリアに表示する方法についてご紹介します。

と思っている方のお役に立てる記事となっています。

分析してみた結果、当サイトは検索フォームをアピールエリアに設置してから、サイト内検索を通じてのページの回遊が増えました。

「こんな記事あるかな」と入力することにより、読者が記事を探しやすい、そして複数記事を閲覧してもらうことにもつながるメリットがあります。有名サイトでもファーストビュー（アクセスして最初に目に入るところ）上に検索フォームを置いているサイトは多く見かけますね。

マクリンさんとか、Oteto Blogさんとか…（現在は変更されていますが、以前のテーマSANGOのデザインが大好きでした）

サイドバー設置やモバイルの検索ボタンなどもありますが、

すぐ目に入る位置に検索フォームがある、

これがポイント。

検索フォームを記事内に表示する方法、アピールエリアに表示する方法をそれぞれ順番に書いていきますね。

スタイルを変更するカスタマイズも２パターン記載します。

それではご覧ください！

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

まず始めに、検索フォームを記事内に設置する方法は２つあります。

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

検索フォームを記事の中に表示させたいときは、ブロックメニューの「検索」をクリックするだけで簡単に検索フォームを設置できます。

検索

検索

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

また、ウィジェットを使っても検索フォームを設置できます。

「外観」→「ウィジェット」→「検索」（置く場所）を選択。

記事上、記事中、記事下など、ざっくりとした配置になります。サイドバーに検索フォームを置く場合はこの方法がベスト。

アピールエリアに検索フォームを設置したい

アピールエリアはサイトにアクセスして一番先に目に入る場所。

アピールエリアはすべてのページに表示することも、トップページだけに限定することもできます。

ここに検索フォームがあると動線的に便利そうなので置きたいなと考えたとき…

• ボックスメニューの「検索」
• ウィジェットの「検索」

アピールエリアでブロックエディタは使えなくウィジェットの範囲にもないため、上記で書いた方法はどちらも使えません。

また、テーマ「Cocoon」には便利なショートコードがいくつかあるのですが「検索フォーム」のショートコードは現在設定されていません。

過去のフォーラムを調べても実装予定はないようです。

さて、どうしよう…

アピールエリアに検索フォームを設置するにはHTMLが必要

解決法はひとつ。

直接、HTMLでコードを入力することで設置できます。

以下、検索フォームをアピールエリアに設置する具体的な手順について解説します。

ここから先は有料公開です

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