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

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

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

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

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

 

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

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

手順的には、記事一覧の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

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

 

2 COMMENTS

サキ

りょうへいさん
はじめまして!
サキと申します。

インフィード広告の貼り方、とても参考になりました。
ジュンイチさんのジラフを使っているので、りょうへいさんの記事にたどり着けて
ほっと、しています。
ありがとうございます!

早速、設定しました!

そこで、質問なのですが
スマホの方は、キレイにインフィード広告が表示されるのですが
PCで見ると、一覧の、2つめに広告を入れる指示を入れた部分が
記事と広告が重なり合っていました。(5と7も同様)

もしも、何かヒントがありましたら、教えて頂けないでしょうか?

当方、ワードプレスを使いこなすのが、精一杯の初心者ブロガーですので
あまり、PCが得意ではなく
ざっくりとした質問になってしまい、申し訳ありません(‘Д’)

お忙しいと思いますが、返信をお待ちしています!
自分でも、頑張って色々やってみます!

ありがとうございます!
サキ

返信する
signal

りょうへい様

初めてコメントさせて頂きますsignalと申します。
「ジラフ」「インフィード広告」で検索したところ
本記事にたどり着き、アドセンスのインフィード広告を
設置してみたのですが、1コメントで残されているサキ様
同様、記事とインフィード広告が重なってしまいます。
何か解決策があるのか、それともテーマの仕様上、
インフィード広告が重なってしまうのかわからず困っています。
お手隙の際にでもコメント頂ければ幸いです。
また、有益な記事を公開していただき大変参考にさせて頂きました。
ありがとうございます。

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください