このブログを書いてるのはこんな人

SANGOにAdsenseインフィード広告を設置する

だいたい 10 分で読めます。

少し前にWordPressテーマをSANGOに変更したマサオカ(@iMassa07)です。

関連WordPressテーマをSTORK→SANGOに変更した人柱の所感

STORKにできたんだから、SANGOでもできるだろ。

記事一覧にインフィード広告が表示された

できました。

WordPressテーマSANGOにAdSenseインフィード広告を設置しました。

ソースコードを公開します。

このコードを「post-grid.php」ファイルにコピペすれば、インフィード広告が表示できます。

今回紹介するのはレイアウトが横長タイプの場合ですが、カスタマイズすれば通常カード型にも使えますよ。

記事一覧レイアウトを横長表示に変更しておくこと

WordPressのカスタマイズから、記事一覧のデザインを横長表示に変更が可能です。

この設定を使うなら、横長タイプに変更しておいてくださいね。

 

コードは、元々STORKで使っていたものをカスタマイズして利用しました。

マサオカ

「SANGOユーザー」×「アドセンサー」って超ニッチな内容やけど、気まぐれで公開するさかい!
参考程度によろしゅうな!動かんなってもワイは責任もたへんで!
注意
動作保証はしかねます。自己責任でお楽しみください。

Step1:AdSenseインフィード広告を発行

AdSenseから新しい広告ユニットを作成してください。インフィード広告を設定していきます。

2つだけ設定を変更する必要があります。今回は以下のような表示結果にしたいので「横の画像」を選択します。

修正1:インフィード広告設定条件を修正

記事一覧の画面で表示される記事とインフィード広告を馴染ませるために行う設定です。

この設定を変えることで、表示される広告の見た目が大きく変わります。ぜひいろいろと編集してみてください。
現在、私が一番最適じゃないかと思っている設定を紹介します。

  • 画像の縦横比は1:1
  • 幅は100pxにする(%表示にしたらモバイルとPCをで大きくサイズがかわってしまう)
  • 見出しのフォントサイズを16pxにする
  • グローバルオプションのパディングを8pxにする

広告コードをコピペしておく

ここで出力されたコードを使って、広告を表示します。このコードはSTEP2で使いますので、テキストファイルにコピペして保存しておいてください。

修正2:高さを調整するコードを追記する

PCを版での広告サイズを調整するコードを追記します。

先程コピペしたコードに、黄色の部分を追記しましょう。

修正前のコード
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="自分のコード"
     data-ad-client="自分のコード"
     data-ad-slot="自分のコード"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
追記するコード
<style>
  @media (min-width: 350px) {
    .infeed {
      height: 106px;
    }
 @media (min-width: 500px) {
    .infeed {
      height: 106px;
    }
  }
 @media (min-width: 800px) {
    .infeed {
      height: 116px;
    }
  }

</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle infeed"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="自分のコード"
     data-ad-client="自分のコード"
     data-ad-slot="自分のコード"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

こちらの記事を参考にさせていただきました。

参考

インフィード広告の高さを設定するAdSenseヘルプ

Twitterであずさん(@yuuki_azusa)にもご協力頂きました。ありがとうございます。

Step2:テーマファイルのカスタマイズ

今回は子テーマを導入していることを前提に解説を行っています。WordPressテーマを編集するときは子テーマを修正するのが安全なので、入れておいた方がいいですよ。SANGOの小テーマはコチラで公開されています。

参考

WordPressで子テーマを活用して安全にカスタマイズを行う方法サルワカ

編集するファイルの保存先

編集するテーマファイルは、「post-grid.php」です。テーマフォルダの中に格納されているので、FTPでアクセスしてpost-grid.phpを取り出しましょう。下のリンクに保存されています。

phpファイルの保存先
/wp-content/themes/sango-theme/parts/post-grid.php

このファイルをデスクトップにコピーして保存します。

コードを確認する

書き換えるコードをこちらに公開します。このあと解説する場所にコピペします。

コード①
<?php
$ads_infeed = '4'; //何番目に表示したいか
$ads_infeed_count = '1';
?>
コード②
<?php
if($ads_infeed_count == $ads_infeed){
?>
<div class="sidelong__article">

<!-- ここにステップ1で取得後、修正したインフィード広告のコードを追記-->

</div>
<?php
}
$ads_infeed_count++;
?>

コード②にAdSenseコードスニペットを貼り付ける

上記コード②をコピーしてメモ帳などで開き、<!-- ここにステップ1で取得したインフィード広告のコードをいれる -->の部分にステップ1で準備した以下のAdSenseコードをコピペしてください。

コード②に追記するコード
<style>
  @media (min-width: 350px) {
    .infeed {
      height: 106px;
    }
 @media (min-width: 500px) {
    .infeed {
      height: 106px;
    }
  }
 @media (min-width: 800px) {
    .infeed {
      height: 116px;
    }
  }

</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle infeed"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="自分のコード"
     data-ad-client="自分のコード"
     data-ad-slot="自分のコード"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

post-grid.phpにコピペする

post-grid.phpを開いて<?php while (have_posts()) : the_post(); ?>のコードを探します。

<?php while (have_posts()) : the_post(); ?>をみつけたら、このコードを挟むように①と②のコードを貼り付けましょう。

 

完成形のコード

全てが終わると、こういう状態になります。

以下にpost-grid.phpの全文を公開しておきます。追記した文は黄色くしています。確認してみてください。

面倒な方は全文コピペでOK。赤字の、自分のコードを入れるのをわすれないでくださいね。

元のデータはバックアップを取っておきましょう。

完成形のコード全文
<?php if (have_posts()){ //記事あり
/*記事一覧表示は以下の2種類(カスタマイザーから設定)
  1)横長のタイプ
  2) 縦長のカードタイプ
*/
 	//(1)横長の場合
	if( (!wp_is_mobile() && get_option('sidelong_layout') && is_home() && is_front_page() )/*PCトップ*/
	|| (wp_is_mobile() && get_option('mb_sidelong_layout') && is_home() )/*モバイルトップ*/
	|| (!wp_is_mobile() && get_option('archive_sidelong_layout') && is_archive() )/*PCアーカイブ*/
	|| (wp_is_mobile() && get_option('mb_archive_sidelong_layout') && is_archive() ) ):/*モバイルアーカイブ*/ ?>
		<div class="sidelong cf">
<?php
$ads_infeed = '4'; //何番目に表示したいか
$ads_infeed_count = '1';
?>
			<?php while (have_posts()) : the_post(); ?>
<?php
if($ads_infeed_count == $ads_infeed){
?>
<div class="sidelong__article">
<style>
  @media (min-width: 350px) {
    .infeed {
      height: 100px;
    }
 @media (min-width: 500px) {
    .infeed {
      height: 106px;
    }
  }
 @media (min-width: 800px) {
    .infeed {
      height: 116px;
    }
  }

</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle infeed"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="自分のコード"
     data-ad-client="自分のコード"
     data-ad-slot="自分のコード"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<?php
}
$ads_infeed_count++;
?>
					<article class="sidelong__article">
							<a class="sidelong__link" href="<?php the_permalink() ?>">
								<p class="sidelong__img">
									<img src="<?php echo featured_image_src('thumb-160'); ?>" alt="<?php the_title(); ?>">
								</p>
								<div class="sidelong__article-info">
									<?php if(!get_option('remove_pubdate')):?>
									<time class="updated entry-time dfont" datetime="<?php the_time('Y-m-d'); ?>"><?php echo get_post_time('Y.m.d D');?></time>
									<?php endif; ?>
									<h2><?php the_title(); ?></h2>
								</div>
							</a>
							<?php newmark();//newマーク ?>
					</article>
			<?php endwhile; ?>
		</div>
		<?php sng_page_navi(); ?>
  	<?php else : //(2)カードタイプの場合?>
		<div class="cardtype cf">
			<?php while (have_posts()) : the_post(); ?>
				<article class="cardtype__article">
						<a class="cardtype__link" href="<?php the_permalink() ?>">
							<p class="cardtype__img">
								<img src="<?php echo featured_image_src('thumb-520'); ?>" alt="<?php the_title(); ?>">
							</p>
							<div class="cardtype__article-info">
								<?php if(!get_option('remove_pubdate')):?>
								<time class="updated entry-time dfont" datetime="<?php the_time('Y-m-d'); ?>"><?php echo get_post_time('Y.m.d D');?></time>
								<?php endif; ?>
								<h2><?php the_title(); ?></h2>
							</div>
						</a>
						<?php 
						if(!is_archive()) output_catogry_link();//カテゴリーを出力
						newmark();//newマーク
						?>
				</article>
			<?php endwhile; ?>
		</div>
		<?php sng_page_navi(); ?>
	<?php endif; //ENDカードタイプ

} else {//記事なし
	get_template_part('content', 'not-found');
}
?>

注意
SANGOバージョン1.1.3より前のバージョンをお使いの方へ
この記事はSANGOの最新バージョン(ver1.2以降)を対象に作成しています。
以下の記事に修正の案内がされていますので、「修正前」のコードに置き換えて使ってください。

SANGOのテーマ更新情報

これで、phpの編集は完了しました。デスクトップに保存しましょう。ファイル名は「post-grid.php」です。

テーマフォルダにアップロードする

FTPを開いて、SANGOの子テーマにアップロードします。子テーマファイルにそのままアップロードしてはいけません。

MEMO
「parts」という名前の空フォルダを作り、その中にpost-grid.phpを入れます。
そのフォルダごと子テーマファイルにアップロードしましょう。

これは子テーマの構造上必要な行程です。

Step3:広告を確認する

アップロードが完了したら、記事一覧ページを確認しましょう。

上手く行っていれば、記事の中にインフィード広告が現れます。初めて設置する方は、実際にみえるようになるまで30分くらい時間がかかるようです。

表示されない場合は、この部分が空白になります。

スマホでもきれいに表示されました。

さいごに

本日は、GoogleAdSenseのインフィード広告をWordPressテーマ「SANGO」に導入する方法を紹介しました。

インフィード広告のコードついては、以下OpenCage様の記事のカード型広告を参考にさせていただきました。

参考

AdSense-インフィード広告を記事一覧の間に表示する方法OpenCage

スマホ版のカードの縦の長さが調整できていません。今後の課題です。

ひらめいたら、この記事に追記してTwitterでお知らせします。

マサオカ(@iMassa07)でした。

マサオカ

コードを修正するよりこの記事を書くほうが時間がかかって驚いたよー。
関連WordPressテーマをSTORK→SANGOに変更した人柱の所感

コメントを残す