ガイドメニュー

wordpress

STINGER7でモバイルバナー広告の設置方法

ここ最近STINGER7を使用しております
まえまではSTINGER3を使用していたのですが(そもそも更新されてるかもの知らなかった)、機能が大幅向上しており使い勝手がいいのでSTINGER7にしています

さて、冒頭で話していた通りSTINGER3を使ってモバイルバナー広告を使用していたのですが、STINGER7ではコードなど一部違ったり、条件分岐の記載の仕方が違っていたのでSTINGER7でのヘッダー付近にモバイルバナー広告の貼り方のやり方を紹介したいと思う

ヘッダー下にモバイルバナー広告を設置

モバイルバナー広告はあまりクリックされないんですが、しっくり来るのでわしは採用しています
スマホで記事閲覧していてもPC閲覧みたくサイドバーがなく下のほうにあるのでユーザーはあまり見ないと思います(わしがそうです)
なのでモバイルバナー広告がしっくり来ると感じております

※話はGoogle AdSenseで進めていきます

STINGER7の親テーマには直接コードを打たないで、STINGER7の子テーマにコードを打ちます
それに伴い、親テーマから子テーマにファイルである「header.php」をコピーします

スマホ用広告なので、スマホ閲覧時のみモバイルバナー広告を表示させるように条件分岐させます
※バックアップ推奨

条件分岐をさせるということなので以下のショートコードをコピーする

<?php if(st_is_mobile()) { ?>
ここにAdSenseコードを貼り付ける
<?php } else { ?>
<?php } ?>

ほかのテーマではわかりませんが

一般で使われているコードは
・「<?php if(is_mobile()) { ?>」
STINGER7では
・「<?php if(st_is_mobile()) { ?>」
※STINGER6でもこのコード

違いは「st_」が付いてるか付いていないかです

header.phpにモバイルバナーのコードを貼り付ける

テーマ編集からSTINGER7の子テーマのheader.phpに行きコードを貼り付けていきます
一番したに</header>があるのでその直前に先ほどコピーしたショートコードを使います
Baidu IME_2016-5-6_14-25-27

<?php if(st_is_mobile()) { ?>
<div class="hoge">
ここにAdSenseコード
</div>
<?php } else { ?>
<?php } ?>

こんな感じ

モバイルバナーは2種類あって

  • モバイルバナー
  • ラージモバイルバナー

の2種類あります

iPhone5S以下だと広告がはみでるのでCSSで幅修正する

画面が大きい「iPhone6~6Splus」だとモバイルバナーは、はみ出ませんが「iPhone5S」だと画面が小さくはみ出ちゃいます
そこで「CSS」で調整してあげます

.hoge {
  position: relative;
  left: -10px;
  width: 320px;
}

まとめ

モバイルバナーはクリック率こそ少ないが記事閲覧時に最初に目が入るのでいいかと思います

関連記事

配信はTwitch(ツイッチ)で行っています。フォローよろしくお願いします

サイト管理者のプロフィール

ReinyaN

ストリーマー活動してる「ReinyaN」です ゲーム配信しながら雑談をしています。 ブログでは配信に関する情報の記事を上げており、参考になる記事がたくさんあると思いますので探してみてください。

関連記事とスポンサーリンク

  • この記事を書いた人
  • 最新記事

ReinyaN

ストリーマー活動してる「ReinyaN」です ゲーム配信しながら雑談をしています。 ブログでは配信に関する情報の記事を上げており、参考になる記事がたくさんあると思いますので探してみてください。

-wordpress
-, , , , , , , , ,