[Stinger5] リード文下のAdSense広告をPC・スマホ用サイズに分岐して表示する

Tweet

Pocket

こんにちは、okutani(@okutani_t)です。AdSenseの広告サイズは、PC・スマートフォン用の「336×280」と「300×250」がそれぞれ用意してあります。

今回はAdSenseの広告を、WordPressのテーマ「Stinger5」のリード文下に、PC・スマホ用サイズでそれぞれ表示させます。

設置の際、投稿ページに切り替え用コード(PHP)を書くとエラーを起こすので、本記事の設定で広告サイズを自動で切り替えるようにしていきましょう。

スポンサーリンク

PC・スマホで別サイズの広告を読み込む

Stinger5では下記のコードを使うことで、PCとスマホで表示したいコンテンツを分けることができます。

<?php if(is_mobile()) { ?>
  //ここにスマホ用の内容
<?php } else { ?>
  //ここにPC用の内容
<?php } ?>

上記のコードにそれぞれ「PC用の広告」と「スマホ用の広告」を設置していけば設置できそうですね。

しかし、残念ながら投稿ページ内ではPHPを利用することができません。

上記のコードはsingle.php等のPHPファイル内でしか扱えないのです。どうすればPC用・スマホ用の広告を使い分けることができるでしょうか。

この問題を解決するには、「広告用PHPファイル」を用意、「ショートコード」からPHPファイルを読み込むことで解決できます。

というわけで広告用PHPファイルを作成していきましょう。

広告用PHPファイルを作成

先ほどのPC・スマホのコンテンツ切り替え用コードを、広告用のPHPファイルに記述していきます。

広告用のPHPファイルは「functions.php」と同じ階層に設置します。

今回は「in-adsense.php」という名前でPHPファイルを作成し、下記コードを記述しました。

<div class="ad-center">
  <p class="ad-sponsored">スポンサーリンク</p>
  <?php if(is_mobile()) { ?>
    //ここにスマホ用の広告コード
  <?php } else { ?>
    //ここにPC用の広告コード
  <?php } ?>
</div>

適宜、AdSenseで取得したコードを記述してください。

レイアウト用のdivとpタグも一緒に設置しておきました。in-adsense.phpの設定は以上です。

ショートコードを作成

ショートコードの詳細を知りたい方は、こちらの記事を読むとより理解が深まります。

WordPress投稿ページにPHP利用→ショートコードを使おう！

こんにちは、okutani(@okutani_t)です。WordPressではPHPを使って動的なサイトを...

2015-04-16 22:08

では、PHPファイルを呼び出すショートコードを「functions.php」に記述しましょう。

<?php
function short_php($params = array()) {
  extract(shortcode_atts(array(
    'file' => 'default'
  ), $params));
  ob_start();
  include(get_theme_root() . '/' . get_template() . "/$file.php");
  return ob_get_clean();
}

add_shortcode('myphp1', 'short_php');

子テーマを使っている場合は、7行目を下記のように書き換えておきましょう。

include(get_theme_root() . '/' . get_template() . "/$file.php");
 
↓
 
include(STYLESHEETPATH . "/$file.php");

投稿ページに下記コードを記述することで、作成したPHPファイルを読み込むことができます。

[myphp1 file='in-adsense']

設定は以上です。記事を投稿してみてください。

PCでは「336×280」、スマホでは「300×250」の広告が表示されていれば正しく設定されています。

[おまけ] 広告レイアウトを整える

お使いのstyle.cssに下記を記述しましょう。中央寄せ、スポンサーリンク文字を調整しています。

.ad-center{
    margin:0 auto 24px;
    text-align:center;
}
.ad-sponsored {
    margin-bottom: 5px;
    font-size: 14px;
}

参考になれば幸いです。

まとめ

もし、PCでも「300×250」の広告サイズで大丈夫だという方は、スマホ用サイズの広告を記事内に貼り付けるだけでOKです。

少しでも広告のクリック数をあげたいのであれば、本記事の方法でPC用とスマホ用広告を分けて表示すれば効果的ですね。

Tweet

Pocket

okutani (@okutani_t) のヒトコト

今回の「外部PHPファイル+ショートコード」の組み合わせ、何か便利なことに使えそうですね。...ぱっとは思いつきませんが(´･ω･`)