[Stinger5] リード文下のAdSense広告をPC・スマホ用サイズに分岐して表示する
2017/01/31
おすすめ記事個人開発のWebアプリがツイッター世界トレンド1位になったけどいろいろ辛かった話 #チョコボックス裏話 | vdeep
こんにちは、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の設定は以上です。
ショートコードを作成
ショートコードの詳細を知りたい方は、こちらの記事を読むとより理解が深まります。
では、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用とスマホ用広告を分けて表示すれば効果的ですね。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
