WORDPRESS

【2021年】WordPressにおける広告リンクの貼り方を「3つのパターン」で初心者向けに1から解説【アフィリエイト広告コードの挿入方法/タグ(ショートコード)管理が最強におすすめ】

WordPressにおける広告リンクの貼り方
 

あずきです🐥

WordPressで「ブログ収益化」するための…

各種広告リンク(広告コード)の貼り方

について、ブログ初心者さん向けに1から解説していきます

 

まず!

おすすめしたい商品やサービスの「アフィリエイト広告」をブログに貼って収益化していくためには…

  1. ブロガーと広告主の提携を仲介する「ASP(アフィリエイトサービス)」に登録する!
  2. そのASP経由で、ブログでおすすめしたい商品・サービスの「広告主」と提携する!
  3. 広告主と提携することで、ブログに貼りたい広告のリンクを取得できるようになる!

といったステップが基本です

 

補足

「Googleアドセンス」のようにユーザーの興味に沿った広告内容が自動で表示されるASPや、もしくは「Amazonアソシエイト」「楽天アフィリエイト」のような物販系ASPの場合、上記「2」のステップは省かれます

 

ただ!

仮に上記の流れで「広告リンクの取得」までは無事できたとしても、そのあとの…

広告リンク(広告コード)の具体的な挿入方法

の解説って、意外と少ない印象なんですね

1番肝心なとこ
 

関連

「そもそもASPってなに…?」「アフィリエイト広告ってどんな仕組みなの…?」という場合は、こちらをどうぞ ↓

WordPressでアフィリエイト広告を貼って収益化しよう
【2021年】WordPressでアフィリエイト広告を貼って収益化しよう【あずきのワードプレスブログ「完全初心者」ガイド/第8章】

続きを見る

 

これからブログで収益化するならまず押さえておきたい「定番ASP」については、こちらから ↓

ブログ収益化で超定番&おすすめなASP8選
【2021年】ブログ収益化で超定番&おすすめなASP8選【アフィリエイトサービスごとのブログ審査の有無から、実際に受けてみた難易度比較まで】

続きを見る

 

で!

そんな「広告リンクをWordPressに挿入する手順」ですが、これからブログで収益化するなら必ず押さえておきたい【3つのパターン】にわけて解説していきます

  1. 手作業にて広告リンクを挿入し、「個別」に管理する
  2. ウィジェットやテーマごとの機能にて挿入し、「一括」で管理する
  3. タグ(ショートコード)管理機能にて挿入し、「一括」で管理する

このなかで「1」と「2」については基本中の基本ですが、最後の「3」タグ管理機能については…

 

これを使うかどうかで、生産性が(大げさじゃなく)100倍変わってきます

 
その理由も1から解説していくよ!
 

ちなみに!

「広告」と聞くと、「バナー」つまり「画像」タイプの広告をイメージしがちですが、ここで言う「広告」というのは…

  • バナーリンク(画像)
  • テキストリンク(文字)

のどちらも該当します

 

ということで、さっそく見ていきましょー🐥

 

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

 

ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

【2021年】WordPressにおける広告リンクの貼り方を「3つのパターン」で初心者向けに1から解説【アフィリエイト広告コードの挿入方法/タグ(ショートコード)管理が最強におすすめ】

【WordPress/広告コードの貼り方】パターン1:手作業にて広告リンクを挿入し、「個別」で管理する【超基礎】

WordPress ヘッダー c-01

 

はじめに

ここでは「クラシックエディタ」の場合を例に解説していきます。 もう1つの編集エディタ「グーテンベルグ(ブロックエディタ)」をお使いの方は、悪しからずご了承ください

 

「クラシックエディタとグーテンベルグってなに…?」という場合は、こちらをどうぞ ↓

WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで
【2021年】WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで1から解説

続きを見る

 

WordPressブログにおける広告リンクの貼り方、そのまず1つ目のパターンは…

手作業で「個別」に貼る

です

 

実際の画面をもとに、わかりやすく解説していきますね

まずはバナー広告から!
 

手作業で広告リンクを「個別」に貼ってみる:バナー広告編

 

「投稿」もしくは「固定ページ」の編集画面を開いたら、ここでは一例として…

WordPressブログにおける広告リンク(コード)の貼り方「3パターン」 1-1-1-01

↑ こちらのサンプルテキストの「2行目と3行目の間」に、バナー広告を貼ってみたいと思います

 

まずは画面右上の編集エディタを…

WordPressブログにおける広告リンク(コード)の貼り方「3パターン」 1-1-1-02

↑「ビジュアル」から「テキスト」に切り替えて、この「テキスト」モードの状態で…

WordPressブログにおける広告リンク(コード)の貼り方「3パターン」 1-1-1-03

↑ 広告を挿し込みたい任意の箇所を、画像のように「Enter」キーで1行空け、その空いた行に…

WordPressブログにおける広告リンク(コード)の貼り方「3パターン」 1-1-1-04

↑ 用意しておいた広告コードをそのまま貼り付けるだけ

 

実際の公開画面で確認してみると…

WordPressブログにおける広告リンク(コード)の貼り方「3パターン」 1-1-1-05

↑ このように、コンテンツ内に「バナー広告」が挿しこまれます

 

広告コードは挿入したのに、実際の画面に反映されない場合は…

「Googleアドセンス」などの場合、コードを挿入してから実際の反映までに多少のラグが生じる可能性があるので、「少し時間を置いてから再度チェックしてみる」ことをおすすめします

 
つづいて「テキスト広告」の場合も見ていこう!
 

手作業で広告リンクを「個別」に貼ってみる:テキスト広告編

 

「テキスト広告」の場合も「バナー広告」と要領は一緒ですが、ただ「テキスト広告」の場合は…

WordPressブログにおける広告リンク(コード)の貼り方「3パターン」 1-1-2-01

↑ こういった形で、「その行の途中に挿入したい!」というケースもあるかと思います

超使う
 

その場合は、まず…

WordPressブログにおける広告リンク(コード)の貼り方「3パターン」 1-1-2-02

↑ このように、前後のテキストを前もって入力しておきましょう

 

つづいて、さきほどの「バナー広告」と同様に、右上の編集モードを「テキスト」モードに切り替えてから…

WordPressブログにおける広告リンク(コード)の貼り方「3パターン」 1-1-2-03

↑ テキスト広告を挿し込みたい任意の箇所(上の画像例では「」のなか!)で…

WordPressブログにおける広告リンク(コード)の貼り方「3パターン」 1-1-2-04

↑ 用意しておいた広告コードを貼り付ければ、実際の画面上では…

WordPressブログにおける広告リンク(コード)の貼り方「3パターン」 1-1-2-01

↑ このような形に反映されます

 

テキストリンク広告の表示内容って、自由に変更していいの?

テキストリンク型の広告は、実際にリンクとして表示されるそのテキストを…

  • 任意の内容に自分で変更しても「OK」な案件
  • デフォルトの内容から変更は「NG」な案件

の両パターンがあるので、提携した各プログラムの注意事項を事前に必ずチェックしておくことをおすすめします

 

ここまでが、1つ目の「手動で個別に挿入していく」という最も基礎となるパターンです

 

ただ!

このアナログな方法だけだと、広告リンクを「貼る」ときはもちろん…

差し替えたり外したりするときも、1つ1つ手作業になる

といった点で、あまり現実的ではありません

特に100記事や200記事と増えていった場合、メンテナンスがちょー大変…
 

なので実際には、上記の「手動挿入」という方法に加えて、ここからご紹介していく…

一括挿入

という方法も使い分けるのが一般的になります🐥

 

【WordPress/広告コードの貼り方】パターン2:ウィジェットやテーマごとの機能にて広告リンクを挿入し、「一括」で管理する【記事下や見出し前におすすめ】

WordPress ヘッダー c-02

 

WordPressブログにおける広告リンクの貼り方、その2つ目のパターンは…

ウィジェットやテーマごとの機能を使って挿入し、「一括」で管理する

です

 

広告リンクを「一括」で挿入することで…

  • すべての記事の同じエリア(例:見出しの直前)に、1つ1つ手動で貼りつける
  • 「広告を差し替えたり外したり」といったメンテナンスも、1つ1つ手動で行う

といった手間が省けて、生産性がぐーんと上がります

特に「Googleアドセンス」の貼りつけは、この方法が定石だよ!
 

ということで、また実際の画面をもとに見ていきましょう

 

まずは、「ウィジェット」機能を使った広告挿入の代表例である…

アドセンス広告を、全記事の記事下(末尾)エリアにまとめて挿入する

という方法から解説していきますね🐣

 

ウィジェット機能で、Googleアドセンス広告を「全記事の記事下(末尾)」エリアに一括で挿入してみる【ACTION AFFINGER6を例に解説】

 

WordPress管理画面から 外観 > ウィジェット を開いたら、画面の左側にある…

WordPressブログにおける広告リンク(コード)の貼り方「3パターン」 1-2-1-01

↑ こちらの…

カスタム HTML

というタブを開き、そのなかの「広告・Googleアドセンス用336px(A)」という項目を選択します

 

注意

ここで選択できる具体的なウィジェット内容は、使用しているWordPressテーマによって異なります

 

上の画像例は、当ブログでも使用中の「ACTION AFFINGER6」における手順です

 

選択したら、「ウィジェットを追加」ボタンをクリックです

 

すると、画面「右側」の一覧にある…

WordPressブログにおける広告リンク(コード)の貼り方「3パターン」 1-2-1-02

↑「広告・Googleアドセンス用336px(A)」というタブが開き、画像例のように…

カスタム HTML

のウィジェットが追加されるので、このフォーム内にアドセンスコードを貼りつけて、「保存」ボタンをクリックするだけ

これで、全記事の末尾にアドセンスが「一括」で入れられるよ!
 

補足

ACTION AFFINGER6」の場合、上記の…

広告・Googleアドセンス用336px(A)

と同じ手順で…

広告・Googleアドセンス用336px(B)

にもアドセンスコードを挿入することで、PC閲覧時に2枚のアドセンス広告を「並列」で表示させることが可能です

 

※並列表示させるには、 WordPress管理画面 > AFFINGER 管理 > 「投稿・固定記事」タブ で「PC閲覧時に記事下のアドセンス広告を横並びにする」にチェックを入れておく必要があります

 

しかも!

このように「一括」で挿入しておいた広告リンクであれば、広告を差し替えたり外したりするときにも、「ウィジェット」側の内容を変更するだけで…

 

すべての記事に一括反映

 

させることができます

 

ということで、今度は「ウィジェット」ではなく…

「テーマごと」の機能を使った一括挿入の方法

について見ていきますね🐣

具体的には、アドセンス広告をすべての記事の「H2見出し直前」エリアに一括で入れてみるよ!
 

テーマごとの機能で、Googleアドセンス広告を「全記事のH2見出し前」エリアに一括で挿入してみる【ACTION AFFINGER6を例に解説】

 

まず!

「テーマごとの機能」を使った広告挿入についても、使用中のWordPressテーマによって…

  • 可能な内容
  • 実際の設定画面

などは当然異なってきます

 

なのでここでは、またWordPressテーマ「ACTION AFFINGER6」の場合における…

アドセンス広告を全記事の「H2見出し前」エリアに一括で挿入する方法

を例に解説していきます

これもめっちゃ使う
 

WordPress管理画面から AFFINGER 管理 > 「Google・広告 / AMP」タブ を開き…

WordPressブログにおける広告リンク(コード)の貼り方「3パターン」 1-2-2-01

↑「見出し前に広告挿入」というフォームに、アドセンスコードをそのまま貼り付けて…

WordPressブログにおける広告リンク(コード)の貼り方「3パターン」 1-2-2-02

↑ その下のチェックボックスで、アドセンスの「表示条件」を自由に選択すればOK

 

この「表示条件」については、例えば上の画像の場合だと…

すべての「投稿」ページにおける、「1番目~3番目」までの各H2見出し前

に、アドセンス広告が自動挿入されるということですね

超簡単!
 

ここまでが、2つ目のパターンである「ウィジェット」や「テーマごと」の機能を使って「一括」で挿入・管理する方法です

 

ただ!

この方法だけだと、まだ対象となるエリアとしては…

  • H2見出し前
  • 記事下(末尾)

といった、ごく一部のエリアに限られています(これはこれでもちろん使えますが)

 
しかもぜんぶの記事に「一括挿入」されるから、例えば「カテゴリーごと」で広告を使い分けたりはできないね
 

ということで、最も重要な3つ目の方法です🐥

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

 

ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

 

【WordPress/広告コードの貼り方】パターン3:タグ(ショートコード)管理機能にて広告リンクを挿入し、「一括」で管理する【最強に便利】

WordPress ヘッダー c-03

 

WordPressブログにおける広告リンクの貼り方、その3つ目のパターンは…

タグ(ショートコード)管理機能を使って広告を挿入し、「一括」で管理する

です

 

冒頭でもお伝えした通り、この「タグ管理」という機能を使うかどうかで…

 

時間と手間は100倍変わってきます

 
そのくらい超重要
 

まず!

ここで言う「タグ管理」機能とは、よく使うテキストや画像、広告などの「ひとまとまり」を…

テンプレート登録

して使い回せる機能のこと

 

いまいちピンと来ないと思うので、実際の画面をもとに見ていきましょう

 

このブログでも愛用している、タグ管理&データ計測プラグイン「AFFINGERタグ管理マネージャー4」を例に解説していきます

AFFINGER系専用のプラグインだよ!
 

※「STINGERタグ管理プラグイン4」の場合も使い方はまったく同じです。「STINGERタグ管理プラグイン4」に「データ計測」の機能を追加したのが「AFFINGERタグ管理マネージャー4」になります

 

WordPress管理画面から…

WordPressブログにおける広告リンク(コード)の貼り方「3パターン」 1-3-01

↑ AFFINGERタグ > 新規追加 をクリックして、タグの作成画面を開いたら…

WordPressブログにおける広告リンク(コード)の貼り方「3パターン」 1-3-02

↑ 使い回したいテキストや画像、広告などの「テンプレート内容」を、通常の編集画面と同じ要領で作っていきます

 

任意のテンプレート内容が作れたら…

WordPressブログにおける広告リンク(コード)の貼り方「3パターン」 1-3-03

↑ 同じ画面に表示されている「ショートコード」をコピーしておくだけ

これでもう準備はOK!
 

あとはこのテンプレート内容を挿し込みたい、お好きな記事の編集画面を開いて…

WordPressブログにおける広告リンク(コード)の貼り方「3パターン」 1-3-04

↑ そのなかのお好きな箇所に「ショートコード」を貼り付ければ、実際の画面上では…

WordPressブログにおける広告リンク(コード)の貼り方「3パターン」 1-3-05

↑ 登録しておいたテンプレート内容が「自動で反映される」という仕組みですね

やり方はいたって簡単!
 

すべての記事に一括挿入されてしまう「ウィジェット」機能と違って…

 

好きな記事の好きなエリアに入れられて、かつ修正は元データ側で「一括」で行える

 

という圧倒的な柔軟性が、この「タグ管理」という機能の大きな特徴になります

 

特に、ブログで広告を貼っているときにありがちなのが…

  • 広告内容の差し替え(種類を差し替えたり、そもそも別の案件に変えたり)
  • 広告とセットで記載しておいた、各種キャンペーン情報などの更新

といった、「広告のメンテナンス作業」なんですね

 

例えば!

「100記事」に同じ広告とキャンペーン情報を載せているとして、キャンペーンの内容が更新されたときの対応というのは…

広告を手動で挿入していた場合

「1記事=1分」をノンストップで進めても、「計100分」かかる

のが…

タグ(ショートコード)管理で挿入していた場合

元データ側の内容を修正するだけで、「100記事」に一括反映される

ということ

つまり、タグ管理なら「1分」でおわる
 

ちなみに!

自分の場合はWordPressを始めて数年経ってから「タグ管理」という存在を知ったので、当時は…

手作業で貼ってある広告の大半を「タグ管理」に差し替える

という作業が大変でしたが、それでも今になって振り返ると…

 

あのとき「タグ管理」に差し替えてよかった

 

と、心の底から思っています

300%正解だった
 

でも!

「これからまさにWordPressで広告を貼っていく」という方であれば…

 

最初から「タグ管理」という方法も取り入れてしまった方が、長期的な生産性で考えると遥かにおすすめ

 

です

自分みたいに、あとから「タグ管理に差しかえる」という苦労をしないためにも…
 

上記の解説で使用している「テーマ」と「タグ管理プラグイン」

 
 

今回の記事はこちらの章に属しています

 第8章 収益化 編           

次の章はこちらからどうぞ

 第9章 ブログの豆知識 編       

全9章のTOPページです

あずきのワードプレスブログ「完全初心者」ガイド

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

 

   ✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性!

   ✔ 時間のかかる面倒なカスタマイズも「クリック1つ」でさくさく実現!

   ✔ 本気で戦うためのSEO対策と、「稼ぐ」に特化したアフィリエイト機能!

今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで
【2021年】WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで1から解説

続きを見る

 

-WORDPRESS