WordPress アフィリエイト

WordPress:記事一覧ページにアドセンス広告を設置する方法

当サイトはアフィリエイト広告を利用しています。

eye_wp

Google AdSenseは「インプレッション収益」という、クリックされなくても表示されるだけで発生する収益がありますよね。
クリック単価に比べれば安いもんですが、表示されるだけで良いならハードルも低いです。

当ブログでは今まで記事ページにだけアドセンス広告を貼っていました。
でもアクセス解析を見るとトップページへのアクセスも結構多いんですよね。

せっかくアクセスがあるので、アドセンスを貼っておけばいくらかの「インプレッション収益」は期待できそう。
塵も積もれば山となる!
ということで今回はトップページも含めた「記事一覧ページ」へアドセンス広告を表示する方法です。

「STINGER7」でのカスタマイズ方法をご紹介していますが、他のテーマでもやり方は一緒なので参考にしてください♪

子テーマの使用方法

テーマファイルをカスタマイズする時は子テーマを使うことが推奨されています。
子テーマを使用すると、テーマ本体をアップデートしてもカスタマイズ内容が消えないというメリットがあります。

STINGER7での子テーマの使用方法はこちら↓
STINGER7:テーマのインストールと子テーマの使用方法

特にSTINGER7の場合は「header.php」を編集する際には注意が必要です。
こちらの記事を参考にしてください↓
STINGER7:親テーマの任意のファイルを子テーマで編集する方法

テンプレートファイルを編集

まずは記事一覧を表示するテンプレートファイルを編集します。
STINGER7の場合は「itiran-thumbnail-on.php」です。

「itiran-thumbnail-on.php」の2行目にあるこのコードを↓

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

このように変更します↓

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); $loop_count++; ?>

次はアドセンス広告を表示させる部分です。
ループ処理が終わる前にコードを挿入します。

「itiran-thumbnail-on.php」の一番下の方にあるこのコードを↓

</dl>
	<?php endwhile;
	else: ?>
		<p>記事がありません</p>
	<?php endif; ?>
</div>

このように修正します↓

</dl>
<?php if ( $loop_count == 1 || $loop_count == 4 || $loop_count == 7 ) : ?>
<div class="itiran-ad">
<p>スポンサーリンク</p>
ここにアドセンスコードを挿入
</div>
<?php endif; ?>
	<?php endwhile;
	else: ?>
		<p>記事がありません</p>
	<?php endif; ?>
</div>

ここにアドセンスコードを挿入」と書いてある部分を、アドセンスのコードに置き換えてください。
ちなみに僕はスマホでもPCでも対応できるように「レスポンシブ」の広告にしました。

$loop_count == 1 || $loop_count == 4 || $loop_count == 7」という部分が広告の挿入場所の指定です。
「1番目の記事の後、4番目の記事の後、7番目の記事の後」の3箇所という意味ですね。

例えば「3番目の記事の後、6番目の記事の後」の2箇所の場合はこのようになります↓

<?php if ( $loop_count == 3 || $loop_count == 6 ) : ?>

アドセンスは基本的に1ページに3つまでとなっているので、サイドバーにも表示している場合は2箇所にするなど調整してくださいませ。

CSSで見た目を調整

そのままだと少し不格好になると思うので、CSSで見た目を調整しましょう。
僕の場合はこんな感じにしています↓

.itiran-ad { /* 広告用のボックス */
	text-align: center;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #50C1A5;
}
.itiran-ad p { /* スポンサーリンクの文字 */
	font-size: 14px;
	line-height: 1em;
	color: #999;
	margin-bottom: 10px;
}

ボーダーや余白などサイトに合わせて変えてくださいね♪

記事一覧をタイル状に並べている場合は注意

前回の記事で、STINGER7の記事一覧をタイル状に並べるカスタマイズをご紹介しましたが、実はこれをやると今回の広告を挿入するカスタマイズはできません(^^;)

その前にご紹介した「カード型」にするだけならオッケーなので、STINGER7で記事一覧のデザインをカスタマイズする場合はこちらの記事を参考にしてください↓

STINGER7:記事一覧をカード型にカスタマイズ【その2】
...

まとめ

ということで無事に記事一覧ページにアドセンス広告を貼ることができたので、しばらくこれで様子を見たいと思います!
今月の収益に影響はあるのでしょうか!?

来月の報告をお楽しみに〜!笑

comment

  1. クン より:

    DICEさん
    お久しぶりです。

    以前アドセンスの横並びについてうかがったんですけど、今回はスマホの表示についてご存知でしたら教えて下さい。

    ウジェットで表示すると、スマホの時に同じページに表示されてしまうんですけど、DICEさんはちゃんと関連記事とコメントをはさんで表示されていますよね。

    その方法を教えていただけたら嬉しいです。
    よろしくお願いします。

  2. DICEDICE より:

    クン様

    コメントありがとうございます!
    PCとスマホの表示分けは、以前に書いた「記事下にアドセンスを横並びで設置する方法【ダブルレクタングル】」という記事の通りにやって頂くとできると思いますので確認してみてくださいね!

  3. 「いたちのおうち」はなこ より:

    初めまして、こんにちは。

    この度、インフィード広告の入れ方が分からず困っていたら
    こちらの記事を参考にすると良いと教えて頂きました。

    参考にさせて頂き、無事に出来ましたので
    ご報告させて頂きます。

    本当にありがとうございました。

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