サイト型トップページの作り方を公開しています!Check

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

アイキャッチ/アピールエリアに検索フォーム Cocoon
Cocoon
記事内に広告が含まれています

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

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

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

\実際に使う検索フォーム/
お知らせ
この記事で分かること
  • アピールエリアに検索フォームを配置する方法
  • 検索フォームの文言をカスタマイズする方法
  • 簡単に使えるショートコードの活用法
スポンサーリンク

この記事を書いた人

はるみです
吹き出し/女性
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • 2020年1月1日ブログ開設
  • ドメインパワー40
  • 2023年~有料記事公開
    • →累計370件(月間約20件)購入いただいています

実装イメージ|Cocoonアピールエリアに検索窓(フォーム)を設置

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

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

  • 背景色を透明にする
  • 背景色の濃さ(透過率)を変更
スポンサーリンク

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

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

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

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

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

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

\実際にブロックで表示した検索フォーム/
メリット
  • 設置が簡単
デメリット
  • デザインがいけていない

デザインはCSSで調整できるとはいえ、デフォルトはイマイチ…

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

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

サイドバーに検索フォームを置く場合はこの方法がベスト。

  1. 管理画面の「外観」→「ウィジェット」にアクセス。
  2. 検索」をドラッグ&ドロップで希望の位置に配置。
\サイドバーに表示した検索フォーム/
メリット
  • 設置が簡単
  • デザインがよい
デメリット
  • 置く場所が限られる(ウィジェットにあるところのみ)

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

スポンサーリンク

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

イメージ画像/pc/html

この検索フォームをアピールエリアに置けないかな?

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

カスタマイズのポイント

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

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

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

Comment コメントはこちらへ

タイトルとURLをコピーしました