WordPressブログトップの記事一覧にインフィード広告を溶け込ませて表示する方法

      2017/11/02

こんばんは!りょうへいです♪
書きたいネタがたくさんあるのに体がついてこない今日この頃。
秋の夜長は夜更かし気味になって寝不足がちなので
早寝の日と夜更かしの日を交互に繰り返してたりします(^^;

実はりょうへいには、あこがれの広告表示のイメージがあったんです。
しかし難しそう….と、詳しく調べてもなかったのですが
リサーチしてみると、りょうへいにもできそう。。。

→そして、やってみたら簡単にできたのでご報告しちゃいます!

というわけで、今回のお題は ↓こちら!

スマートニュースみたいなニュースサイトのように記事の間に広告表示させたい

そうそう、まさに↑こんな感じの表示を実現したかったんですよ。

手順的には、記事一覧のphp(使用しているWordPressテーマによる)にアドセンスで生成したインフィード広告のコードを貼り付けるだけ!

STINGER5系のテーマの場合の設定方法を行いました♪

りょうへいの場合は、今まで触れたりしていなかったんですが
アフィリエイトをはじめるにあたって、いろいろなブログとか
メルマガをリサーチしていたんですが、胡散臭かったりw
ドイヒーだったりするメディアが非常に多いですよね…
もー そういうブログやメルマガの見るのも気分的にしんどくてw
嫌気が差し出しそうな頃に出会えたブログがありました。

それが ブログマーケッターJUNICHIさんという方が運営するブログでした。
とても実用的で判りやすく色々と解説されていて
りょうへいはかなり勉強させていただいき尊敬している方なんです♪

そんなJUNICHIさんが公開している無料テーマをわしわし利用させていただいております♪
(勝手にリンク貼っちゃった ドキドキ(^^; )

というわけで、当ブログはJUNICHIさんがSTINGER5という
有名テーマをカスタマイズして作ったという
「Giraffe」 なるテーマを使わせていただいているのです。
※JUNICHIさん や テーマ「Giraffe」が気になった方は上記のサイトを訪問してみてください♪

STINGER5ベースということなので
STINGER5テーマを使ったWordPressブログに
記事一覧にインフィード広告を出す方法を調べてみたら
ドンピシャ! だったので簡単でした(^^;

itiran.phpを編集する

とりあえず、記事一覧について記載されているphpを編集します。
当ブログの環境では、上述の理由で、下記のphpを編集しました。

(WordPressインストールディレクトリのルート)/wp-content/themes/(使用しているテーマのディレクトリ)/itiran.php

itiran.php 編集箇所

基本的に赤文字の部分を追記しました。

青マーキング部分は何番目の記事にインフィード広告を表示するかの判定です♪

緑マーキング部分にはGoogle Adsenseでインフィード広告のコードを作成したものを貼り付けるだけ♪

※下記の例だと3箇所ですが、どれも同じものを貼り付ければOKです。

<div id=”topnews”>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); $count++; ?>
<?php if ($count == 2): ?>
<!– 記事2番目位置に表示する広告コード1 –>
<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=”-e3-a+9s-gb+ub”
data-ad-client=”ca-pub-XXXXXXXXXX”
data-ad-slot=”XXXXXXXXXX”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<?php elseif ($count == 6): ?>
<!– 記事6番目位置に表示する広告コード2 –>
<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=”-e3-a+9s-gb+ub”
data-ad-client=”ca-pub-XXXXXXXXXX”
data-ad-slot=”XXXXXXXXXX”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<?php elseif ($count == 8): ?>
<!– 記事8番目位置に表示する広告コード3 –>
<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=”-e3-a+9s-gb+ub”
data-ad-client=”ca-pub-XXXXXXXXXX”
data-ad-slot=”XXXXXXXXXX”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<?php endif; ?>
<dl class=”clearfix” data-href=”<?php the_permalink();?>”>
<script>
(function($){
$(function(){
$(‘#topnews dl.clearfix’).click(function(){
window.location = $(this).data(‘href’);
});
});
})(jQuery);
</script>
<dt> <a href=”<?php the_permalink() ?>” >
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php the_post_thumbnail( ‘thumb240’ ); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
<img src=”<?php echo get_template_directory_uri(); ?>/images/no-img.png” alt=”no image” title=”no image” width=”240″ height=”160″ />
<?php endif; ?>
</a> </dt>

おっと、普通にインフィード広告のコードを貼り付けていましたが、平行してコード作成を行っていました。

とりあえず、広告コードを作成して、サイトに反映させてみると
どのくらいサイズの調整を行うべきか判りやすかったです。
作ったインフィード広告のサイズ変更もあとからできて
再度コードを取得してコピペしなおせばOKです。

WordPressブログに反映させてチェック

Google Adsenseでサイズ等再度調整して修正後コード取得

上記の広告コードを itiran.php に再度コピペし直す。

といった感じで、最終調整を行いました。

 

インフィード広告のコード作成の作業は↓こんな感じでした。

Google Adsense で インフィード広告を作ってコードを取得する

インフィード広告の新しい広告ユニットを作成します。

作成してみて、判ったのですが、インフィード広告のサイズなどを調整して作成することができます。
掲載するサイトの色や見た目を設定して、溶け込めるように調整を行いましょう♪

「イメージ」の設定

当ブログの場合は、何回か試した結果
幅のパーセンテージを 35%に設定しました。
(寸分たがわぬほど記事と同じサイズ!という感じではありませんが)

「見出し」の設定

当ブログの記事一覧に近づけるためフォントを大きくして、ボールド表示を設定しました。

サイズ調整を行ってコードをゲット!

無事にコードをゲットできたら、上述の itiran.phpにコピペしましょう♪

 

そんなこんなで、記事一覧にインフィード広告が表示された!

主に アドセンスでコードを生成して
itiran.php に追記して保存するだけで
インフィード広告が表示されるようになりました!

 

インフィード広告がちゃんと表示されるのには時間を要する場合があるらしい

というわけで、だいたい設定できたのでしばらく様子を見てようと思います♪

すっかり忘れていましたが、スマホ表示するとどうなるのかな….
と見てみたら↓まだこんな感じでした…. どでかバナーが表示されてる(^^;

スマホ表示用のインフィード広告もあるんでしょうけど
まだちゃんと表示されていないっぽく。

スマホ表示についても、様子見継続ですね。
ちゃんと表示されるかな~!

というわけで、今夜はここまで。

日々、いろいろとできる事が増えてWordPress楽しいです(^^)v

ブロトピ:今日のブログ更新

 - Tips, WordPress, アフィリエイト, アフィリエイトASP, レンタルサーバ, 設定 , , ,

%d人のブロガーが「いいね」をつけました。