WordPressでアフィリエイト広告を設置する方法とリンクが貼れない場合の対処方法

WordPressで広告を設置する方法とリンクが貼れない場合の対処方法WordPressの始め方や使い方まとめ

今回はWordPressの広告を貼る方法や位置調整(中央寄せや左寄せ、余白など)を色々紹介してみたいと思います。

また広告やリンクが貼れない、コードが表示されてしまって上手く表示できないなどの対処方法も紹介していきます。

基本的にアドセンス広告とは少し違う部分があるので、WordPressに「アドセンス広告」を貼る場合はこちらの記事をどうぞ。

スポンサーリンク

WordPressでの広告設置の種類

WordPressで広告を貼る場合のやり方は大きく分けて2種類があります。

  • 投稿記事内で貼る通常のテキスト広告やバナー
  • テンプレートに埋め込む方法(基本全ページで同じ場所に同じ広告が表示される)

上記2種類ですね、場合と状況に応じて使い分けができます。

投稿記事内で貼る通常の広告の設置とリンクが上手く表示されない場合の対処方法

まず、基本的な部分ですが、WordPressで記事を書くときには「ビジュアルエディタ」と「テキストエディタ」が切り替えできるようになってます。

で、初心者の方が間違えやすい部分なんですが、広告リンクなどの「ごちゃごちゃしたコード(HTML)」を貼る時は「テキストエディタ」を使います。

ビジュアルエディタまま広告コードを貼り付けるとごちゃごちゃコードはそのまま表示されて広告が表示されません

試しにビジュアルエディタでコードを貼り付けてプレビューで見るとコードがそのまま表示されてます。

WordPressで広告リンクが貼れない場合の対処方法1

WordPressで広告リンクが貼れない場合の対処方法2

という事で広告のコードなどごちゃごちゃしたコード(HTML)を貼る時は「テキストエディタ」に切り替えて貼り付けて下さい

MEMO

エディタの切り替えが面倒ならビジュアルエディタでHTMLをそのまま入力できるプラグイン「Paste Raw HTML」というプラグインがあるのでそちらを利用して下さい。

広告の位置や余白を調整したい場合

画像広告(バナー)の位置調整(左寄せ、中央寄せや余白の調整)がしたいという場合には広告の設置場所に名前をつけておいて、CSS(スタイルシート)で位置調整をします。

試しに「content-ad」という名前で広告を設置する場合はこんな感じで広告を設置します。

■記事投稿(テキストエディタ)で挿入。

<div class="content-ad">
ここに広告のコード
</div>

という感じで設置をしておけば広告の設置場所に「content-ad」という名前をつけた事になります(英数字の半角で好きな名前でOKです)。

名前をつけた部分はスタイルシートで位置調整する事ができます(バナー設置する場合など)。

■スタイルシート(CSS)に記述(一番下に追加でOK)。

先程「content-ad」というクラス名をつけたので

.content-ad {
  text-align:center;
  margin: 20px 0px 20px 0px;
}

みたいな感じですね。CSSで記述する場合は「.クラス名{ }」って感じで真似して書いてみて下さい。

  • text-align:center(中央寄せ)
  • text-align:left(左寄せ)
  • margin(上、右、下、左に余白)

marginは時計周りに余白を調整できます。上記の例だと上と下に20px余白を作るという位置調整ですね、上下のコンテンツと間が狭い場合にはここの数値を大きくすればOKです。

WordPressの条件分岐を勉強したらデバイス別の位置調整も可能です。

広告を横並びで2つ並べたい場合(レクタングル)

WordPressで広告の横並びダブルレクタングル
↑こんな感じで横並びにしたい場合。

記事中の広告を横並びにする場合もそれぞれの場所にクラス名を付けて位置調整をします(スマホでは縦並びになります)。

広告だけでなくて画像とか別の物でも可能ですが、コンテンツ部分(記事本文)の横幅が十分でないと横並びにはなりませんので注意。

横幅が分からない?とりあえずやってみると良いです。

■記事投稿(テキストエディタ)で挿入。

<div class="ad-box-main">
<div class="ad-box-left">
広告のコード(左)
</div>
<div class="ad-box-right">
広告のコード(右)
</div>
</div>

■スタイルシート(CSS)

/* 横並び広告全体部分 */
.ad-box-main {
  margin-top:20px;  /* 上に余白 */
  margin-bottom:20px;  /* 下に余白(下のコンテンツとの距離) */
}
 
/* 広告左 */
.ad-box-left{
     float:left;  /* 広告を左寄せ */
     margin-right:10px;  /* 右に余白(2つの広告の間の余白) */
}
  
/* 広告右 */
.ad-box-right{
     float:left;  /* これも広告の左寄せ */
}
 
/* 最後に左寄せを解除するための記述 */
.ad-box-main:after {
  content:"";
  display:block;
  clear:both;
}

横幅(余白を含む2つの広告の横幅)が足りない場合は横並びなりません。

それぞれの広告の横幅を小さくするか2つの広告の余白をCSSで調整する必要があります。

広告をテーマテンプレートに埋め込む方法

広告設置はテーマのテンプレート自体に広告を埋め込む方法です(サイドバーなども含みます)。

テーマテンプレート自体に広告コードを埋め込むので、全ページ同じ場所に同じ広告を表示したい場合に便利です。

また、WordPressの条件分岐ができるようになるとカテゴリー毎に違う広告が表示されたり、ページ単位で違う広告を表示させるって事もできます(今回は書きませんが)。

一番の問題はみんな使っているテーマがバラバラなのでそれぞれ設置する場所、phpファイルなどが違うって部分です。

一応公式テーマでのやり方を紹介します。多分応用できる部分はあるかなと思います。

WordPressのサイドバーに広告を設置する場合

まずは簡単なサイドバーから行きます。

サイドバーのサイズは横幅が320pxくらいのテーマがほとんどなので横幅300pxの広告がおすすめ。

WordPressの管理画面から「外観」⇒「ウィジェット」と進み、サイドバーに「テキスト」を追加します。

WordPressにアドセンス広告を設置する方法-8

「テキストエディタ」を選択しておいて以下のように広告のコードを入れます。

後から位置調整できるように「side-ad」という名前を付けてます。

<div class="side-ad">
ここに広告のコード
</div>

WordPressのサイドバー広告を設置する手順

サイドバーの広告は上下の余白と中央寄せだけでOKです。CSSの一番下に追加していきます。

■スタイルシート(CSS)に追加

/* サイドバー広告位置調整 */
.side-ad {
	margin-top: 5px;
	margin-bottom: 5px;
	text-align:center;
}

個別ページの記事下に表示したい場合

ここはテーマによって編集するphpなどが違うのですが、一応公式テーマ「Twenty Seventeen」の場合でやってみます。

content.phpに次のように「エントリーコンテント(記事本文)の閉じタグ」がありました。

</div><!-- .entry-content -->

WordPressの記事下に広告を設置する方法1

要は本文がここで終わりという事ですので、これの直前に広告のコードを入れます。

※もしこのコードがない場合でもそれっぽい位置に「テスト」とテキストを入れて保存し、表示される場所を確認してみると確実です。

広告コードはPCページとスマホ用でサイズ別の広告が良いので条件分岐してます。また、個別ページだけ表示したいのでさらに条件分岐(if single)なのでちょっと複雑なコードになってます

<?php if ( is_single() ) : ?>
<div class="ad-bottom">
<p class="ad-label">スポンサーリンク</p>
<?php if (wp_is_mobile()) :?>

ここにスマートフォン用サイズ(300x250)の広告コード

<?php else: ?>
 
ここにPC用サイズの広告コード

<?php endif; ?>
</div>
<?php endif; ?>

位置調整のためにここにも名前(ad-bottom)を付けてますのでCSSで位置調整できます。

WordPressの記事下に広告を設置する方法

一番需要なありそうな部分だけ紹介してみましたが、さらに別の場所も。。という場合にはコメント下さい。気が向いたら追記します。

広告探しに個人的におすすめのASPはこちらで紹介してます。

初心者におすすめのアフィリエイトASPと選び方

以上WordPressに広告を設置する方法やリンクが貼れない場合の対処方法でした。

コメント

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