WELCOME
当ブログを紹介いただいたサイトを掲載します受付中

Cocoon検索ボックスをアピールエリアに表示する方法/テンプレート(ショートコード)利用

アイキャッチ/検索ボックス カスタマイズ
カスタマイズ
記事内に広告が含まれています
スポンサーリンク

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

  • アピールアリアに検索ボックスを置きたい
  • 好きなところに自由に検索ボックスを置きたい

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

\当サイトのトップページにも設置/

当記事では、検索ボックスを作成するHTMLコード(コピペOK)と解説を有料公開しています。

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

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

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

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

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

これがポイント。

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

それではご覧ください!

スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー35
  • ワードプレスで2サイトを運営しています
はっちゃん
です
プロフィール

検索ボックスを記事内に設置する方法

まず始めに、検索ボックスを記事内に設置する方法は2つあります。

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

\実際に表示した検索ボックス/
メリット
  • 設置が簡単
デメリット
  • デザインがいけていない

デザインはCSSで調整できるけど、デフォルトはイマイチ…

また、ウィジェットを使っても検索ボックスを設置できます。

\サイドバーに表示した検索ボックス/

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

メリット
  • 設置が簡単
  • デザインがよい
デメリット
  • 置く場所が限られる(ウィジェットにあるところのみ)

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

スポンサーリンク

検索ボックスをアピールエリアに設置したい

この検索ボックスをアピールエリアに置けないかな?

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

アピールエリア

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

ここに検索ボックスがあると動線的に便利そうなので置きたいなと考えたとき…

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

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

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

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

さて、どうしよう…

実は、けっこう悩みました

スポンサーリンク

検索ボックスをアピールエリアに設置するにはHTML直接入力が必要

解決法はひとつ。

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

\こんな感じの検索ボックスです/
POINT
  • Cocoonのテンプレート機能を使うことで入力を簡略化 簡単
  • アピールエリアに限定せず、実質どこにでも置ける検索ボックスを作ることができる 汎用性

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

スポンサーリンク

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

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

COMMENT

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