WordPressでGoogle Adsenseのインフィード広告を挿入する方法

2017年7月24日adsense, php, wordpress, インフィード広告, デザイン

インフィード広告例

こんばんは、ゆきです!

ようやく最近アドセンスの承認が下りました。しかし現実は非情なのである。

PVが稼げないと広告収入なんてあらへんのやで(0w0)!

adsenseさえ通れば、サーバー代くらい稼げる。そう思っていた時期もありました。やっぱりPVないとあかんね。そしてPV増えんね、Wordpressブログは。ドメインパワーないしね…

WordPressとはてブの比較が良くなされていますが、Wordpressから始めてしまった身としては中々訪問者が増えないところが悩ましいのです。ただ、長期的に見ればそう変わらなくなるとのことで、何とかサーバー代が稼げるまでめげずに頑張っていきたいと思います。

さて、はてなブログだとインフィード広告の挿入もなかなか大変なようですが、Wordpressではそんなことはありません。ちょちょっとやれば簡単にインフィード広告を挿入する事ができます。

今回はそんなインフィード広告をWordpressに挿入する方法について纏めました。

そもそもインフィード広告ってなんなのさ!

インフィード広告とは、記事と記事の間に記事っぽく挿入される広告の事です。例えばYahoo!Japanでは、スマートフォン版において以下のような形で記事と記事の間に広告が挿入されています。

インフィード広告の一例
インフィード広告の一例 by Yahoo!Japan

これは近年バナータイプの広告がクリック率の低下が生じており、それに替わる新たな広告手法として定着しました。Yahoo!Japanがトップページをタイムライン化したことにより一気に広まったんだとか。

ゆきの野望でもトップページの記事一覧のうち、5番目の所にインフィード広告を表示するようにしています。

クリックされているかどうかは聞かないでね(; ・`д・´)

PV全然ないんだからクリックされるはずもなし

WordPressでどうやってインフィード広告を挿入するか

ここではGoogle Adsenseで導入されたインフィード広告を対象に説明したいと思います。Wordpressのテーマはtwentyseventeenですが、他のテーマでもそう変わらないと思います。

まず用意するのは、Google Adsenseのインフィード広告。Google Adsenseのメニューからコンテンツ->広告ユニットを選択します。

広告ユニットの選択画面

上記からインフィード広告を選択します。

次に広告のデザインを選択します。ここはあなたのトップページでの記事一覧の表記方法に合わせて選択しましょう。私の場合は「横の画像」が最もサイトレイアウトに近かったので、こちらを選びました。

インフィード広告の基本デザインを選ぶ
インフィード広告の基本デザインを選ぶ

スマホ版は「上部の画像」が本当は適切なのですが、まだそこまで調整できておりません。画面サイズを取得してそれに応じて広告を変えるだけでよいはずですが、実施したらまたやり方を記載したいと思います。

デザインを選択すると詳細なデザインがカスタマイズできるようになります。読者を騙すわけではないのですが、広告はなるべく自分のデザインに溶け込むように色合いを調整しましょう。

広告のクリック率は広告のデザインがサイトデザインと異なるほど悪くなります

インフィード広告は自分のサイトデザインに溶け込むようにしよう
インフィード広告のカスタマイズ画面。
インフィード広告のカスタマイズ画面。なるべく自分のサイトに似せよう。

デザインが完成したら、「保存してコードを取得」を選択し、広告のコードを獲得します。

次にWordpressのカスタマイズです。

インフィード広告を挿入するためのWordpressのカスタマイズの方法

以下はデフォルトのtwentyseventeenのindexページです。
指定の数の記事のあとにインフィード広告を挿入するようにしています。

12行目と26-30行目を追加のうえ、27行目に広告のコードを張ればインフィード広告の挿入ができます。

<?php get_header(); ?>

<div class="wrap">
		<header class="page-header">
			<h1 class="page-title">新着記事</h1>
		</header>
	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

			<?php
			if ( have_posts() ) :
				$count = 1;

				/* Start the Loop */
				while ( have_posts() ) : the_post();

					/*
					 * Include the Post-Format-specific template for the content.
					 * If you want to override this in a child theme, then include a file
					 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
					 */
					get_template_part( 'template-parts/post/content', 'excerpt');
					
					
					/* 指定した番号の記事の下にinfeed広告を挿入*/
					if($count==4){
						[ここにインフィード広告のコードを張る]
					}
					
					$count = $count + 1;

				endwhile;

				the_posts_pagination( array(
					'prev_text' => twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '<span class="screen-reader-text">' . __( 'Previous page', 'twentyseventeen' ) . '</span>',
					'next_text' => '<span class="screen-reader-text">' . __( 'Next page', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ),
					'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyseventeen' ) . ' </span>',
				) );

			else :

				get_template_part( 'template-parts/post/content', 'none' );

			endif;
			?>

		</main><!-- #main -->
	</div><!-- #primary -->
	<?php get_sidebar(); ?>
</div><!-- .wrap -->

<?php get_footer();


とっても簡単ですね。

あなたの広告のクリック率改善に繋がれば幸いです。

以上!

ブログ運営

Posted by