Web筋トレも使っているサーバー!ロリポップを使ってみない?

【コピペOK】STINGER8カスタマイズ◇インフィード広告をJavaScriptで上から3番目に表示◇第4回

Sponser Link

Google AdSenseのディスプレイ広告(バナー)の貼り方について

3回解説してきました。

Google AdSenseの始め方を解説◇第1回 【コピペOK】Google AdSenseの広告コード取得とSTINGER8での広告の貼り方を解説◇第2回 Advanced Adsで記事中のh2の上に自動でGoogle AdSense広告を出す方法◇第3回

Google AdSenseのインフィード広告の貼り方について

3回解説してきました。

【コピペOK】図解◇実例◇インフィード広告の貼り方解説◇STINGER8◇第1回 【コピペOK】図解◇インフィード広告に罫線をCSSで追加する方法◇STINGER8◇第2回 【コピペOK】図解◇実例◇インフィード広告を下にも追加◇STINGER8◇第3回

 

今回はインフィード広告の貼り方4回目です。

JavaScriptを使って記事一覧の

上から◯番目に広告を表示させる方法です。

ついでに、記事の表示件数が少なかったので、

記事10件に変更して、

インフィード広告を4件(一番上、上から3番目、最下部に2つ)

合計14件の表示にしたいと思います。

Sponser Link

実例◇プリスクールパークのインフィード広告

プリスクールパークは無料テーマの『STINGER8』を使って作られているサイトになります。

全国のプリスクール(英語の幼稚園)を紹介しており、

市区町村ごとに一覧でプリスクールを見ることができます。

例として世田谷区を見てみましょう。

1番上、上から3番目、下部2つがインフィード広告になっています。

10件のプリスクールと4件のインフィード広告が一覧になっているわけです。

Sponser Link

インフィード広告の作り方の流れ

①Google AdSenseでインフィード広告を作る

②WordPressのプラグインAdvanced Adsでテーマ機能(ショートコード)にする。

③STINGER8のitiran.phpに追加する。

第一回で①と②は説明しているので、

分からない方は第一回目の記事をご確認ください。

【コピペOK】図解◇実例◇インフィード広告の貼り方解説◇STINGER8◇第1回

今回は③のitiran.phpの編集方法を解説していきます。

Sponser Link

STINGER8のitiran.phpに追加します

プリスクールパークはSTINGER8を使っているので、

STINGER8で説明していきます。

STINGER8は一覧ページはitiran.phpです。

他テーマだとcategory.phpやarchive.phpが

一覧ページではないかと思います。

他のテーマの方も参考にしてくださいね。

Sponser Link

前回までに完成したPHP(itiran.php)

feed_上、feed_下01、feed_下02の3つのインフィード広告が入りました。

Sponser Link

今回の最終完成形

●上から3番目にインフィード広告を挟み込む

●表示記事件数を10件に変更する

ほむほむ

JavaScriptをitiran.phpに書いていきま〜す

Sponser Link

(itiran.php)

これをループの前に、、、。

3を5にすれば、5番目に広告が表示されますよ。

これをループの中に、、、となります。

ほむほむ

jsを解説しますと、

初期値1に設定するね。

これが3になったら広告を表示してね。

ループの中なので、++で加算してね。

ざっくりですが。。。

Sponser Link

完成したPHP(itiran.php)

feed_上、feed_3番目、feed_下01、feed_下02の4つのインフィード広告が入りました。

記事の表示件数を変更

設定>表示設定 から『1ページに表示する最大投稿数』を

変更します。今回は10投稿にします。

これで記事10件、インフィード4件が表示されるようになったと思います。

プレビューしてみましょう!

ほむほむ

記事10件、インフィード4件が表示されています!

罫線も綺麗に入っていて違和感がありません。

これはなかなかの馴染み具合ではないでしょうか(笑)

ここまで4回に渡ってインフィード広告の貼り方を解説してきました。

綺麗に仕上がりましたでしょうか?

Advanced Adsのテーマ機能を使っているので、

itiran.phpもスッキリしてますよね。

Advanced Adsを使って広告を管理するのが

キモだと思います。

 

ほむほむ

phpやcssを修正するときは大元ではなく。

childにしてくださいね。

そして、バックアップをとっていつでも戻せるようにしてください!

ここまでお付き合いありがとうございました!

【コピペOK】SANGOカスタマイズ◇インフィード広告をJavaScriptで表示◇第5回

 

Sponser Link

コメントを残す

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

CAPTCHA