« Autumnal sky | Home | Google PageSpeed Insights »

Dec 102013

Movable type5.1でPHPインクルードを使ったスマホサイト切り分け

CSSなどのPC/スマフォの切り分けはCSS内で対応したのですが、GoogleのAdsense、AmazonのアフェリエイトバナーなどはJSなどで切り分けるとNGのようなので、サーバ側での切り替えを行うことに。
WordPressには"wp_is_mobile()"などという便利な関数があるらしいのですが、MTにはそれらしいものが見当たらず。MTIncludeなどを調べてみましたが、どーも対応できないっぽい。ダイナミックパブリッシングに関しての記述は多々あったのだけど、結構トラブル多いみたいなのでスタティックのまま、PHPインクルードで対応する方法を模索。
Googleさんで検索しても、マッチする情報が無かったので一応メモしておく。

まずはhtml拡張子で、phpが動作するように.htaccessを設定。
hetemlの場合はヘテムルレンタルサーバー|よくある質問:拡張子 .html で PHP を動作させたい。ということで、以下のみを設定してアップ。(他のBlogではgzip解除とか記述がありましたが、こちらは以下のみで稼働した)

AddHandler php5-script .html

次にブログ側の設定。
MT管理画面内対象ブログの「全般設定/モジュール設定」内

  • 「サーバーサイドインクルード」を「PHPのインクルード」に設定。
  • 「モジュールのキャッシュ:再構築の速度向上のために、テンプレートモジュール毎のキャッシュ設定を有効にする」はとりあえずOFF。(このへんはまた後日最適化)

これでブログの設定は完了。

次にテンプレートモジュールに、ADの切り分けを行うモジュールを仮に"_Adsense"として追加。
AdsenseでPC用、SP用の貼付けコードを取得し、次のように設定。

<?php
echo <<< EOF
<div id="_adsense" class="comments">
EOF;
    $user_agent = $_ENV["HTTP_USER_AGENT"];
    if(stripos($user_agent,'Android') || stripos($user_agent,'iPhone')){
echo <<< SP
<!-- Adsense AD for smartphone -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-xxxxx" data-ad-slot="xxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
SP;
    }else{
echo <<< PC
<!-- Adsense AD for PC -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-xxxxx" data-ad-slot="xxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
PC;
    }
    echo "</div>";
?>

モジュールの設定「テンプレート設定」項目は

  • 「ファイルリンク」は特に指定せず、MTのモジュール管理にお任せ。
  • 「サーバーサイドインクルード:PHPのインクルードとして処理する」もOFF(何故これがOFFで動作するのかちょっと良くわからないけれど)

これでモジュールの設定は終了。
あとは挿入したいページテンプレートに以下のインクルード文を挿入。

<$mt:Include module="_adSense"$>

これでPC、スマホの切り分け完了。(多分)

Leave a comment

Search and Archives