Cocoonアピールエリアに検索窓を設置する方法【ショートコードで簡単対応】

Cocoonテーマの「アピールエリア」、うまく活用できていますか？

「もっと目立たせたい要素がある」
「回遊率を上げたい」――

そんなときに便利なのが、検索フォームの設置です。

この記事では、Cocoonのアピールエリアに検索フォームを簡単に表示させる方法を初心者向けにやさしく解説します。

実際に、当サイトのトップページでもこの方法を使っており、ユーザーの利便性アップに効果あり。ショートコードで簡単に呼び出す方法や、文言のカスタマイズ、コピペで使えるHTMLコードも紹介しているので、すぐに実装できます。

• デザインを少し差別化したい
• 読者が目的の記事にたどり着きやすくしたい

そんな方はぜひ参考にしてみてください！

実装イメージ｜Cocoonアピールエリアに検索フォームを設置するとこうなる

まずは仕上がりイメージから。アピールエリア内に検索フォームを配置すると次のように表示されます。

白枠部分の背景色はCSSで自由にカスタマイズ可能です。

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

WordPress記事内に検索フォームを設置する方法【基本編】

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

方法①：ブロックエディタで「検索」ブロックを使う（投稿・固定ページ）

最も手軽に検索フォームを設置したいなら、「検索」ブロックを使いましょう。この方法はシンプルで特別なHTMLの知識は不要です。

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

設置手順

1. 投稿または固定ページを開く。
2. 「＋ブロック追加」→「検索」を選択。

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

検索

検索

方法②：ウィジェットで検索フォームを追加（サイドバー・フッター）

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

サイドバーやフッターに検索窓を設置したい場合は、ウィジェットの「検索」を使います。

設置手順

1. 管理画面 →「外観」→「ウィジェット」へ。
2. 「検索」ウィジェットを希望のエリアにドラッグ＆ドロップ。

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

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

できます！しかも、HTMLを1回入力すればパターン化して使い回しもOK。

CocoonのアピールエリアはHTML直入力でカスタマイズ

アピールエリアでは、ウィジェットやブロックではなく、HTMLを直接入力して編集します。自由度が高い分少し手順がありますが、慣れればとても便利です。

アピールエリアに検索フォームを置くポイント

• パターン機能でHTMLコードをショートコード化
  • WordPressの「パターン」機能を使うと、一度作成した検索フォームHTMLをショートコードとして保存可能。再利用も簡単です。
• HTMLでどこでも使える汎用フォームを作成
  • アピールエリアに限らず、HTMLが使える場所（記事中・カスタムブロックなど）なら、どこでも設置可能なコードにしておくと便利です。
• 表示文言も自由にカスタマイズ
  • 「サイト内検索」「記事を探す」「目的の記事を見つけよう」など、表示文言は自由に変更できます。

アピールエリアに最適化した検索フォームのHTMLコードは、有料記事内で配布中です。