Blog

【図解で解説!】WordPressでアフィリエイトの貼り方とカスタマイズ方法

2020年12月20日

 

こんにちは、kei(@KeiKei0815blog)です!

 

悩む人
WordPress(ワードプレス)アフィリエイトリンクの貼り方を知りたい。また、記事内以外にもサイドバーや広告を横一列に並べるなど細かい設置方法も知りたいです。

 

こんな悩みに答えます。

 

こんな方におすすめ

  • WordPress(ワードプレス)で広告リンクを貼る方法を知りたい
  • 記事内以外に、サイドバーなどに広告を貼る方法を知りたい
  • 広告リンクをちょっとオシャレに見せたい

 

ブログ開設後は、記事内に広告を貼って収益化したいと考えると思います。

 

ワードプレスに広告リンクを貼るのに、特別な知識は必要なく簡単に設定することができます。

 

そこで、本記事では、前半にアフィリエイトリンク広告の種類と、後半にアフィリエイトリンクの貼り方について、それぞれ詳しく解説します。

 

ワードプレスを始めたばかりで、広告の貼り方を知りたい方向けに、本記事が役立ちましたら幸いです。

 

なお、広告コード(ASP)の登録がお済みでない方は、以下アフィリエイトに登録しておきましょう!

 

 

関連>>【無料】アフィリエイトASPの始め方を紹介【おすすめ5選】

 

それでは、早速始めていきます。

 

 

アフィリエイトリンクを貼る前の前提知識

アフィリエイトリンクを貼る前の前提知識

 

まずは、アフィリエイトリンクの種類について、簡単に紹介します。

 

ワードプレスに貼り付ける広告は、以下2つです。

 

  • 広告リンク(自動型)
  • 商品リンク(手動型)

 

①:広告リンク(自動型)

 

広告リンクは、提供されている広告をコピーして、記事内に貼り付けることで、広告が自動で表示されます。

 

サイトを見ているとページ下や見出しの下など、共通したエリアに表示されているアドセンス広告です!
KEI

 

広告をクリック後のページや、画像サイズ・中のテキストは変更ができません。

 

②:商品リンク(手動型)

 

商品リンク(手動型)は、記事内の好きなエリアに、商品リンクを貼ることができます。

 

そのため、クリック後のページや商品の画像サイズなど、自分好みに設定することができます。

 

例えば、以下のように、ページの途中やページのサイドメニューなどに配置できます。

 

 

商品リンクは、広告リンクと違って自動で広告が表示されるわけではないので、都度手入力して設定します。

 

自動広告と比べると少しメンドウに感じるかもしれませんが、一度ルーティン化できれば、簡単に設定できますよ!(後ほど詳しく解説します!)

 

ワードプレスで広告リンクを貼る方法

ワードプレスで広告リンクを貼る方法

 

それでは、ワードプレスで広告リンクを貼る方法について、解説します。

 

今回は、アイキャッチ画像下に表示させる方法を例に、解説していきます!

 

  1. 表示する広告を選択
  2. コピーしたコードをワードプレスに貼り付ける

 

当ブログで使用しているアフィンガー6で設置方法を紹介します。

※お使いのワードプレステーマによって、機能・操作方法が異なりますので、ご了承ください。

 

参考» AFFINGER6(アフィンガー)を使って見ての感想【メリット・デメリットを紹介】

 

step
1
表示する広告を選択

 

まずは、アドセンスの管理画面にログインします。

 

広告ユニット選択します。

 

 

各種広告ユニット

・ディスプレイ

・インフィード

・記事内広告

 

広告は3つありますが、今回はディスプレイ広告を選択します。

 

すると、以下の画面に切り替わりますので、画面左上の入力ボックスに名前を入れて、「作成」をクリックします。

 

 

 

以下の画面になるので、コードをコピーして「完了」をクリックします。

 

 

step
2
コピーしたコードをワードプレスに貼り付ける

 

続いて、コピーした広告用のコードを貼り付けます。今回は、アイキャッチ画像下に貼り付けます。

 

まずは、ワードプレス「外観 → ウィジェット」をクリックします。

 

 

ウィジェットの画面になりましたら、「カスタムHTML」を押したまま「PCのみ投稿記事上に表示」まで持っていきます。

 

 

カスタマム HTML」内に先ほどコピーした広告コードを貼り付けます。

 

 

最後に「保存」をクリックします。

 

念のため広告が表示されているか確認してみましょう。

※すぐに表示されない時があるので、その場合は1時間くらい置いてから確認してみましょう

 

 

これで広告リンクを貼る方法は、完了になります。

 

ワードプレスで商品リンクを貼る方法

ワードプレスで商品リンクを貼る方法

 

続いて、商品リンクの貼り方について、紹介します。

 

  1. アフィリエイトリンクをコピー
  2. 記事内に広告を貼る

 

今回は「旧エディタ」を使用しての貼り方を解説します。

 

step
1
アフィリエイトリンクをコピー

 

まずは、アフィリエイトサイトで設置したい広告用のURLをコピーします。

 

今回は、A8ネットのアフィリエイトリンクを例に記事内にはりつけをします。

 

A8.net」にログインして、URLをコピーします。

 

 

コピー漏れがあると反映されないので、コピー時はソース漏れがないよう気をつけてください

 

step
2
記事内に広告を貼る

 

続いて、記事ページを表示しコピーした広告を貼ります。

 

 

「ビジュアル」だと反映されませんので、必ず「テキスト」に切り替えて、HTMLコードを貼り付けます。

 

step
3
プレビューで表示確認

 

最後に「プレビュー」をクリックして、貼り付けた広告が問題なく表示されていれば、OKです。

 

 

Amazon・楽天・Yahooショッピングの商品リンクを貼る方法

Amazon・楽天・Yahooショッピングの商品リンクを貼る方法

 

続いて、Amazon・楽天・Yahooショッピングなど物販関連の広告リンクを設定する方法です。

 

 

冒頭でも紹介したように、上記のようにボタンを配置して表示させる方法です。

 

こちらは『カエレバ』という無料ツールを使用することで、みやすいデザインを簡単に作成できます。

 

作成方法は、以下記事に詳しく紹介していますので、参考にしてみてください。

 

関連記事
『カエレバ』『ヨメレバ』『トマレバ』でカッコよくカスタマイズ!【アフィンガー】

続きを見る

 

【おまけ】アフィリエイトリンクの貼り付け位置の調整

【おまけ】アフィリエイトリンクの貼り付け位置の調整

 

最後に、ワードプレステーマ・アフィンガー6を使って、『商品リンクをサイドバーに配置』『広告バナーを横一列に配置』する方法を紹介します。

 

  1. サイドバーに広告を表示させる方法
  2. バナー画像を横一列に設置

 

①:サイドバーに広告を表示させる方法

 

WordPress(ワードプレス)のサイドバー「外観 → ウィジェット」をクリックします。

 

 

「カスタムHTML」を長押しして「サイドバートップ」まで持っていきます。

 

 

「タイトル」は特に入れなくてもOKです。最後に「完了」をクリックします。

 

念のため、表示されているか確認してみましょう。

 

②:横一列にバナー画像を設置

 

先ほど同様に、貼り付けたい広告のURLをコピーします。

 

続いて、ワードプレスから記事ページを開き、エディターの「タグ → レイアウト → PCとTab(959px以上) → 左右50%以上」をクリックします。

 

「タグ → レイアウト → PCとTab(959px以上) → 左右50%以上」

 

テキスト」にして、左右にURLを貼り付けます。

※「このテキストは最後に消して下さい(50%)」は、URLを貼り付け後に削除します。

 

 

ビジュアル」にすると以下のように、バナー広告の画像が横並びに表示されます。

 

 

これで、アフィンガー6を使ってバナー広告の横並び設定は終わりです!
KEI

 

WordPress(ワードプレス)でアフィリエイトリンクの貼り方まとめ

WordPress(ワードプレス)でアフィリエイトリンクの貼り方まとめ

 

いかがでしたか?

 

今回は、ワードプレスで「広告リンク」「商品リンク」を貼る方法について、紹介しました。

 

始めはアフィリエイトリンクを貼る作業がメンドウに感じますが、ルーティーン化できると設定がスムーズになります。

 

本記事を読み、ワードプレスのアフィリエイトリンクの貼り方について、理解できましたら幸いです。

 

オススメのアフィリエイト

 

今回は以上です。

 

ここまで読んでいただき、ありがとうございました。

 

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】アメリカ留学▶︎ 2015年ヨーロッパバックパック▶︎Webディレクター就職(歴6年)(コーディング・SEOが好きです!)▶︎ブログ開設

-Blog