WordPressでバナーを埋め込む方法は？初心者でもできる設置手順を解説

WordPressにバナーを埋め込みたいものの、どこから設定すればよいのか迷いますよね。

設定方法がわからなければ作業が止まってしまうし、PHPの知識が必要なのではと不安になる気持ちもよくわかります。

できることなら、専門知識がなくても簡単にバナーを設置したいですよね。

実は、WordPressでは画像ブロックやウィジェット、カスタムHTMLなどを使ってバナーを埋め込めます。

設置方法や管理方法がわかれば、バナーを追加するたびに悩む必要はありません。

そこで今回は、「WordPressにバナーを埋め込む方法や設置手順、表示されない場合の原因」をご紹介します。

バナーを自分で管理したい方は、目的や設置場所に合った方法で運用できるようにしましょう。

WordPressにバナーを埋め込む3つの方法

WordPressにバナーを埋め込む方法は複数あり、目的や設置する場所に合った方法を選ぶことが大切です。

適した方法を知っておけば、専門知識が少なくても無理なくバナーを掲載できます。

画像ブロックでバナーを埋め込む

投稿や固定ページにバナーを載せるなら、画像ブロックを使う方法が簡単です。

WordPressの編集画面から画像を追加でき、HTMLを記述する必要がないためです。

たとえば、キャンペーンページへ誘導する画像を記事内に配置し、その画像にリンク先を設定します。

画像ブロックを使えば、普段の記事編集と同じ感覚でバナーを設置できるでしょう。

例）画像ブロックでバナーを埋め込むと、以下のような表示になります。

ウィジェットエリアにバナーを設置する

サイドバーやフッターにバナーを表示したい場合は、ウィジェットエリアを利用する方法が適しています。

ページごとにバナーを追加しなくても、共通の場所に表示しやすいためです。

具体的には、サイドバーにサービス案内のバナーを設置し、複数のページで継続して表示できます。

ウィジェットエリアを活用すれば、サイト内でバナーの露出を増やしながら管理の手間も抑えられるでしょう。

カスタムHTMLで広告コードを埋め込む

広告会社などから発行されたコードを使う場合は、カスタムHTMLで埋め込む方法が適しています。

画像だけでなく、指定されたHTMLコードをそのままWordPress内に設置できるためです。

例として、広告サービスから取得したバナー広告用のコードをカスタムHTMLブロックに貼り付けて表示できます。

正しくコードを埋め込めば、外部サービスのバナー広告を問題なく表示できるでしょう。

バナー画像を投稿・固定ページに埋め込む手順

投稿や固定ページに画像バナーを掲載する場合は、編集画面から順番に設定すれば簡単に設置できます。

基本的な流れを押さえておけば、特別な知識がなくてもスムーズに作業できます。

バナー画像をアップロードする

最初に、使用するバナー画像をWordPressへアップロードしてください。

あらかじめ画像を登録しておくことで、投稿や固定ページの編集画面からすぐに利用できるためです。

管理画面のメディアからバナー画像をアップロードし、メディアライブラリに保存します。

事前に登録しておけば、設置作業をスムーズに進められるでしょう。

画像ブロックを追加する

バナーを表示したい位置には、画像ブロックを追加します。

画像ブロックを使えば、HTMLを入力せずに画像をページ内へ配置できるためです。

具体的には、編集画面で「＋」を押して画像ブロックを選び、登録済みのバナー画像を指定します。

画像ブロックを使うことで、希望する位置へ簡単にバナーを配置できるでしょう。

バナーにリンク先URLを設定する

バナーをクリックして別のページへ誘導する場合は、画像にリンク先URLを設定します。

リンクを設定することで、興味を持った読者を商品やサービスの詳細ページへ直接案内できるためです。

たとえば、キャンペーン用のバナーに申込ページのURLを設定し、画像をクリックすると対象ページへ移動するようにします。

適切なリンク先を設定すれば、バナーから目的のページへ読者をスムーズに誘導できるでしょう。

表示サイズを調整する

バナーを設置した後は、ページに合う表示サイズへ調整します。

画像が大きすぎたり小さすぎたりすると、ページ全体の見やすさが損なわれるためです。

例として、本文の横幅に合わせてバナーの幅を調整し、スマートフォンでも見切れない大きさに設定します。

適切なサイズに整えることで、ページの見やすさを保ちながらバナーを効果的に見せられるでしょう。

サイドバーやフッターにバナーを設置する手順

サイト内の共通部分にバナーを表示したい場合は、WordPressの管理画面から設置場所を設定します。

一度設定しておけば、複数のページで継続してバナーを表示しやすくなります。

ウィジェット画面を開く

まずは、WordPressの管理画面からウィジェットの設定画面を開きます。

サイドバーやフッターに表示する内容は、ウィジェットの設定から編集できる場合が多いためです。

たとえば、管理画面の「外観」から「ウィジェット」を選び、利用できる表示エリアを確認します。

設定画面を開いておけば、バナーを追加する場所や現在の構成を把握しやすくなるでしょう。

設置したいエリアを選ぶ

次に、バナーを表示したいサイドバーやフッターのエリアを選びます。

設置場所によってバナーが表示される位置やページ内での見え方が変わるためです。

具体的には、常に目に入りやすくしたい案内はサイドバー、補助的な案内はフッターに配置します。

目的に合ったエリアを選べば、読者にとって自然な位置でバナーを見せられるでしょう。

画像またはHTMLを追加する

表示エリアを選んだら、バナーの形式に合わせて画像またはHTMLを追加します。

自社で用意した画像と外部サービスの広告コードでは、適した追加方法が異なるためです。

たとえば、自社サービスのバナーは画像として追加し、広告会社から受け取ったコードはHTMLとして設置します。

バナーの形式に合った方法で追加すれば、意図した内容を正しく表示できるでしょう。

バナー広告のHTMLコードを埋め込む手順

バナー広告のコードをWordPressに設置する場合は、編集画面から適切な形式で追加することが大切です。

基本的な流れを押さえれば、専門的な知識が少なくても落ち着いて作業できます。

カスタムHTMLブロックを追加する

まずは、バナー広告を表示したい場所にカスタムHTMLブロックを追加します。

通常の文章用ブロックでは、広告用のHTMLコードを正しく扱えない場合があるためです。

たとえば、投稿の途中に広告を表示したい場合は、その位置で「＋」を押してカスタムHTMLブロックを選択します。

専用のブロックを使うことで、広告コードを適切な形式で埋め込みやすくなるでしょう。

広告コードを貼り付ける

カスタムHTMLブロックを追加したら、発行された広告コードをそのまま貼り付けます。

コードの一部を変更すると、バナーが正しく表示されなくなる可能性があるためです。

具体的には、広告サービスの管理画面で取得したコード全体をコピーし、カスタムHTMLブロック内へそのまま貼り付けてください。

コードを正確に入力すれば、広告サービス側の設定どおりにバナーを表示しやすくなるでしょう。

プレビューで表示を確認する

広告コードを貼り付けた後は、公開前にプレビューで表示を確認します。

編集画面だけでは、実際のページ上での位置やサイズを正確に判断しにくいためです。

パソコンとスマートフォンの両方で確認し、バナーの見切れやレイアウトの崩れがないかをチェックします。

事前に表示を確認しておけば、不具合を修正してから安心してページを公開できるでしょう。

WordPressに埋め込んだバナーが表示されない原因

WordPressにバナーを設置しても、設定やサイトの状態によっては正しく表示されないことがあります。

原因を順番に確認すれば、問題のある箇所を見つけやすくなります。

バナー画像のURLが間違っている

画像バナーが表示されない場合は、最初に画像のURLが正しいか確認します。

URLの入力ミスや画像の移動があると、WordPressが画像を読み込めなくなるためです。

たとえば、HTML内の画像URLを直接開き、目的のバナー画像がブラウザに表示されるか確認します。

正しいURLへ修正すれば、画像を正常に読み込める状態に戻せるでしょう。

HTMLコードが崩れている

HTMLで設置したバナーが表示されない場合は、コードの記述が崩れている可能性があります。

タグの一部が欠けたり不要な文字が入ったりすると、ブラウザが正しく処理できないためです。

広告コードを手作業で編集した後に表示されなくなった場合は、元のコードと見比べて違いを確認します。

正しいコードへ戻すことで、バナーが本来の状態で表示されやすくなるでしょう。

テーマ側の表示領域に問題がある

設定に問題がなくても、WordPressテーマの表示領域が原因でバナーが見えない場合があります。

テーマによって、サイドバーやフッターの有無、表示できる幅などが異なるためです。

たとえば、利用中のテーマにサイドバーがない場合、そのエリアへ設定したバナーは画面上に表示されません。

テーマの仕様を確認すれば、バナーを表示できる適切な場所を判断しやすくなるでしょう。

キャッシュが残っている

設定を変更しても反映されない場合は、古い表示内容がキャッシュに残っている可能性があります。

キャッシュが保存されていると、修正前のページが引き続き表示されることがあるためです。

仮に、バナーを差し替えても以前の画像が表示される場合は、キャッシュを削除してページを再読み込みします。

最新の状態を読み込めるようにすれば、変更後のバナーが正しく反映されるでしょう。

Fine AdserverでWordPressのバナーを管理する

バナーの数が増えて管理が煩雑になった場合は、専用のWordPressプラグインを活用すると運用しやすくなります。

広告管理プラグイン「Fine Adserver」を使えば、日々の更新や差し替えにかかる手間を減らせます。

バナーを管理画面で一元管理する

Fine Adserverを使えば、複数のバナーを管理画面でまとめて管理できます。

バナーごとに設置場所を探して編集する必要がなくなり、更新作業を効率化できるためです。

たとえば、キャンペーン用やサービス案内用のバナーを管理画面に登録し、必要に応じて内容を変更できます。

管理場所を一つにまとめることで、バナーが増えても更新や確認をスムーズに行えるでしょう。

ショートコードで好きな場所にバナーを埋め込む

Fine Adserverでは、ショートコードを使って好きな場所にバナーを埋め込めます。

複雑なHTMLを記述しなくても、指定したショートコードを設置するだけで表示できるためです。

具体的には、投稿や固定ページの任意の位置にショートコードを入力し、登録済みのバナーを表示できます。

ショートコードを活用すれば、専門知識が少なくても必要な場所へ手軽にバナーを設置できるでしょう。

バナーの掲載期間を設定する

Fine Adserverでは、バナーごとに掲載期間を設定できます。

公開開始日と終了日を決めておけば、期間限定の案内を手作業で入れ替える手間を減らせるためです。

例として、期間限定キャンペーンのバナーに終了日を設定し、期限を過ぎた後は自動で掲載を終えられます。

掲載期間を設定しておけば、古いキャンペーンを表示し続けるミスを防ぎやすくなるでしょう。

表示するバナーや掲載場所を管理する

Fine Adserverでは、表示するバナーと掲載場所を分けて管理できます。

用途に応じて表示内容を整理できるため、複数のバナーを運用する場合でも管理しやすくなるためです。

たとえば、記事内にはキャンペーン用、サイドバーにはサービス案内用のバナーを表示するように設定できます。

表示内容と場所を整理して管理することで、目的に合ったバナー運用を続けやすくなるでしょう。

画像以外にテキスト・動画も掲載できる

Fine Adserverでは、画像以外の広告素材もサイトに掲載できます。

テキスト・画像・動画・メールに対応しており、媒体に合わせた広告配信ができるためです。

たとえば、企業サイトなら画像、ランディングページなら動画、メールマガジンならメール広告を配置できます。

設置先を選ばないため、色んな用途に使用できるでしょう。

まとめ

WordPressにバナーを埋め込む方法は、画像ブロック、ウィジェットエリア、カスタムHTMLなど、目的や設置場所に応じて使い分けることが大切です。

投稿や固定ページでは画像ブロックを使い、リンク先URLや表示サイズを設定すれば、専門知識がなくてもバナーを設置できます。

サイドバーやフッターに表示したい場合はウィジェットを活用し、広告コードを使う場合はカスタムHTMLブロックから埋め込みましょう。

バナーが表示されないときは、画像URLやHTMLコード、テーマの表示領域、キャッシュなどを順番に確認すると原因を見つけやすくなります。

また、バナーの数が増えてきた場合は、Fine Adserverを使えば管理画面での一元管理やショートコードによる埋め込み、掲載期間や掲載場所の管理も行えます。

自社サイトの運用に合った方法を選び、更新しやすく効果的なバナー運用につなげていきましょう。