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

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番目の記事の後、6番目の記事の後」の２箇所の場合はこのようになります↓

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

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

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：記事一覧をカード型にカスタマイズ【その２】

...

web-ashibi.net

2016.05.05

まとめ

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

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