bitcoin変動中!初めての口座開設はビットフライヤーがおすすめです

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

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

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

インフィード広告入れたい…

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

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

できました。

マサオカ

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

インフィード広告って?
記事一覧のなかに紛れ込むように表示されるAdsense広告のことです。ユーザーが目線を集めるコンテンツの間に広告が表示されるので、広告が目に入る機会が多くなります。

SANGOにインフィード広告を表示するコードを公開します。

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

SANGOにはレイアウトが2種類あります。横長タイプとカード型の両方に対応しました。

ヨメ

カード型は今追記中だからもう少しまってね

記事一覧レイアウトをカード型/横長のどちらか使いたいタイプに変更しておくこと

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

どちらかす好きなタイプに変更してくださいね。

 

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

マサオカ

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

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

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

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

カード型も使いたい場合は、縦の画像も準備してください。

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

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

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

横型の場合

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

カード型の場合

  • グローバルオプション
    • フォントはArial(ほんとはHelveticaがいいです)
    • パディングはすべて0px
  • イメージ
    • サイズ1.91:1の幅100%
    • パディング下20px
  • 見出し
    • 短い
    • サイズ18pxのボールド
    • パディングは左13px
  • 説明は非表示
  • URL
    • フォント11pxのボールド
    • パディングは上4px・左13px
  • ボタンはそのまま

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

ここで出力されたコードを使って、広告を表示します。このコードは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 infeedasam"
     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 = '3'; //何番目に表示したいか
$ads_infeed_count = '1';
?>
コード②(横型)
<?php
if($ads_infeed_count == $ads_infeed){
?>
<article class="sidelong__article">
<style>
  @media (min-width: 350px) {
    .infeed {
      height: 106px;
    }
 @media (min-width: 500px) {
    .infeed {
      height: 106px;
    }
  }
 @media (min-width: 800px) {
    .infeed {
      height: 116px;
    }
  }
</style>

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

</article>
<?php
}
$ads_infeed_count++;
?>
コード②(カード型)
<?php
if($ads_infeed_count == $ads_infeed){
?>
<article class="cardtype__article">

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


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

カード型にアイコンをつける

カード型にアイコンを付けたい場合は上記のコード②(カード型)の<!-- ここにステップ1で取得したカード型用のインフィード広告のコードを追記-->の下に一行 <p class="dfont cat-name">Promotion</p>を追記してください。

注意
このタグ設置は、「クリック誘導させない」「不自然なアピールをしない」「誤解を招く表示をしない」というAdSense広告配置に関するポリシーの考えには違反していないと考えて作りました。

ですが、AdSenseに問い合わせて確認したわけではありませんので100%大丈夫とも言い切れません。プロモーションアイコンの設置は自己責任で選んでください。

インフィード広告の上に表示させたPromotionがコンテンツだと判断された場合、 「サイトのコンテンツと広告が重なり、ユーザーが両者を区別できなくなるようなケース」に当たる可能性がありそうです。

参考:プルダウン メニューで広告が見づらい|AdSenseへルプ 

コード②(横型)にスマホ表示用サイズ調整コードをコピペ

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

横型はAdSenseコードの上に、カード型はAdSenseコードの下にコピペする項目がありますので忘れずに。

コード②(横型)の完成形
<?php
if($ads_infeed_count == $ads_infeed){
?>
<article class="sidelong__article">
<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 infeedasam"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="自分のコード"
     data-ad-client="自分のコード"
     data-ad-slot="自分のコード"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</article>
<?php
}
$ads_infeed_count++;
?>
コード②(カード型)の完成形
<?php
if($ads_infeed_count == $ads_infeed){
?>
<article class="cardtype__article">

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle infeedasam"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="自分のコード"
     data-ad-client="自分のコード"
     data-ad-slot="自分のコード"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<p class="dfont cat-name">Promotion</p>
</article>
<?php
}
$ads_infeed_count++;
?>

post-grid.phpにコピペする

 post-grid.phpを開いて//(1)横長の場合と//(2)縦長の場合を探します。

それぞれ、//(1)横長の場合=横型・//(2)縦長の場合=カード型に対応します。

<?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 = '3'; //何番目に表示したいか
$ads_infeed_count = '1';
?>
			<?php while (have_posts()) : the_post(); ?>
<?php
if($ads_infeed_count == $ads_infeed){
?>
<article 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 infeedasam"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="自分のコード"
     data-ad-client="自分のコード"
     data-ad-slot="自分のコード"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</article>
<?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
$ads_infeed = '3'; //何番目に表示したいか
$ads_infeed_count = '1';
?>
			<?php while (have_posts()) : the_post(); ?>
<?php
if($ads_infeed_count == $ads_infeed){
?>
<article class="cardtype__article">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle infeedasam"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="自分のコード"
     data-ad-client="自分のコード"
     data-ad-slot="自分のコード"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</article>
<?php
}
$ads_infeed_count++;
?>
				<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');
}
?>

プロモーションアイコンを追加したい方は、「カード型にアイコンをつける」の章を参考に <p class="dfont cat-name">Promotion</p>を追記してください。

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

SANGOのテーマ更新情報

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

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

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

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

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

Step3:広告を確認する

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

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

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

完成した見え方

横型

カード型

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

カード型は、表示される広告の画像サイズが毎回違うため、広告によってズレがでます。

マサオカ

これはしかたがないので、確認して気に入らなかったら消してください。

さいごに

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

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

参考

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

 

SANGOの記事は結構書いてます。ひらめいたら、Twitterでお知らせしていますので確認してやってください。マサオカ(@iMassa07)でした。

マサオカ

コードを修正するよりこの記事を書くほうが時間がかかって驚いたよー。

コメントを残す