ワードプレスにカスタムバナーを貼る方法（貼り方）

WordPressを使って何かを販売したり、メールリストを増やしたりしているなら、ページ上部に表示されるバナーは非常に価値があります。多くの場合、人々が最初に目にするものなので、季節のセールを告知したり、新商品を紹介したり、無料ダウンロードと引き換えにメールアドレスを獲得したりするのに最適な場所です。 

WordPressにはバナーを作成するためのネイティブな方法も用意されており、Gutenbergでカスタムバナーを作る場合は、通常カバーブロックに見出しとボタンを組み合わせることになります。専用のバナーブロックが存在しないためです。リンク付きのシンプルな告知であれば、これらの選択肢で十分です。しかし、バナーをページに溶け込んでスクロールで流されてしまうのではなく、クリックを獲得するものにしたいなら、少し違ったものが必要になるかもしれません。

これらのブロックはインタラクティブな機能を一切持てません。セール用のカウントダウンタイマーもなければ、バナー内にメール取得フィールドもないからです。そういった要素を含むバナーを（HTMLやCSSを書かずに）作成するには、2つのアプローチのいずれかを取ります。専用のバナープラグインをインストールするか、無料のホスト型ウィジェットを使ってその埋め込みコードをカスタムHTMLブロックに貼り付けるかのどちらかです。

カウントダウンや登録フォーム付きのカスタムバナーをWordPressに追加したいブロガー、パブリッシャー、WooCommerceの事業者の方は、ぜひ読み進めてください。このガイドでは、ワードプレスのバナーの貼り方について、まずはプラグインから、次にウィジェットの順で解説します。

Watch on youtube

How to Add a Custom Banner to WordPress

オプション1：専用のWordPressバナープラグインをインストールする

標準的なWordPressのやり方は、リポジトリからプラグインをインストールすることです。数多くのバナーや通知バーのプラグインが利用可能で、一度有効化すれば、ブロックエディタではなくダッシュボードからキャンペーンを設定できます。

プラグインを使ったワードプレスのバナーの貼り方は以下のとおりです。

1. WordPressのダッシュボードからプラグインに移動し、バナーまたは通知バーのプラグインを検索して、今すぐインストールして有効化をクリックします。

2. 左側のサイドバーにプラグインの新しいメニュー項目が表示されるか確認します。すぐに表示されない場合は、ダッシュボードを更新してください。バナーを有効にし、テキスト、画像、色、リンク先のURLを追加します。
3. バナーを表示するページや投稿を選択し、スケジュール設定やターゲティングルールを設定して変更を保存し、公開中のサイトを表示して正しく表示されているか確認します。

無料版に含まれる内容は大きく異なり、バナーを価値あるものにするプレミアム機能（カウントダウンタイマー、ターゲティングルール、プロモーションから他社のロゴを削除する機能など）は、多くの場合有料です。

例えば、Hello Barの無料プランでは、バーを1つしか利用できず、アップグレードしない限りHello Barのブランドが表示されます。有料プランは年間契約で月額29ドルからとなっています。OptinMonsterには無料プランがありますが、キャンペーンの種類やトラフィックの上限は月額7ドルから49ドルの有料プランに応じて拡大します。そしてIcegramのプレミアムプランは年間129ドルからとなっています。 

これらのいくつかは、プラグイン独自のサービスへのアカウント登録も必要です。プラグインはコネクターの役割を果たし、キャンペーンはその会社のクラウドダッシュボードで編集されるためです。自分のサイト内だけで作業したい場合は、知っておくとよいでしょう。

オプション2：無料のインタラクティブなバナーウィジェットを追加する（おすすめ）

カウントダウンやクーポンコード、メールフィールド付きのバナーが欲しいけれど、そのためにプレミアムプラグインにお金を払いたくないという場合は、WordPress用の無料バナーウィジェットがニーズに応えてくれます。ビジュアルビルダーでバナーを設定し、埋め込みコードをコピーして、GutenbergのカスタムHTMLブロックに貼り付けます。

Jotformバナーウィジェットは、Gutenbergのブロックでは実現できない要素を扱えます。背景には、単色、グラデーション、画像、またはYouTubeやVimeoの動画を使用でき、さらにCTAボタン、テキストリンク、クーポンコード、カウントダウンタイマー、メール取得フォームを追加できます。また、必要に応じてバナー全体をクリック可能にすることもできます。

ウィジェットを使ったワードプレスのバナーの貼り方は以下のとおりです。

1. Jotformワークスペースのページで作成をクリックし、ウェブサイトウィジェットを選択して「Banner」を検索し、ウィジェットを使用をクリックします。

2. バナーのスタイルを選び、カウントダウン、クーポン、登録フォーム、ボタンなど、キャンペーンに必要な要素を追加します。

3. 背景、色、レイアウトを設定し、横並びまたは縦並びのビューを選択します。幅、余白、角の丸みを調整し、バナーをすべてのデバイスに表示するか、デスクトップまたはモバイルのみに表示するかを決定します。

4. 公開をクリックし、次に埋め込みセクションでコードをコピーをクリックします。プラットフォームメニューには、WordPress専用の埋め込み手順も用意されています。

5. Gutenbergエディタで+アイコンをクリックしてブロックを追加し、カスタムHTMLを検索して選択します。HTMLを編集をクリックして埋め込みコードを貼り付け、更新と保存をクリックします。

後からバナーを編集する際は、機能を解除するためにプランをアップグレードするのではなく、ウィジェットを開くだけで済みます。より細かく制御したい場合はカスタムCSSも利用でき、Jotformはそれらのセレクターをウィジェットに限定するため、スタイル設定がページ上の他の要素に影響することはありません。

スマートでサーバーレスなウィジェットでWordPressサイトを強化する

バナーは、別のプレミアムプラグインのサブスクリプションなしでWordPressサイトに追加できるいくつかの要素のうちの1つです。Jotformの無料のウェブサイトウィジェットディレクトリには、150以上の選択肢があり、以下のようなものが含まれます。

• お知らせバーウィジェット：WordPressのお知らせバーの代替として機能し、プラグインを一切使わずに、ページ上部に表示される細い通知ストリップに対応します
• ポップアップウィジェット：通常はプレミアムのコンバージョンプラグインにバンドルされている離脱意図や登録オファーに対応します
• 料金表ウィジェット：ページビルダーのアドオンなしでプランをレイアウトします

各ウィジェットは、バナーウィジェットと同じようにカスタムHTMLブロックを通じて埋め込まれるため、ページにもう1つ要素を追加したいたびに、プラグイン、アカウント、年間更新を追加する必要はありません。

クリエイター、パブリッシャー、またはWooCommerceの事業者として、予算はビジネスの成長や宣伝する価値のあるものを作ることに充てるべきであり、一時的なバナーを表示するための年会費に充てるべきではありません。Jotformのバナーウィジェットなら、そういった手間なく、カウントダウン、クーポン、登録フィールドを利用できます。また、WordPressフォームも同じように機能するので、プロモーションやイベントを告知するのではなく情報を収集したい場合に役立ちます。