WordPressを使ったレスポンシブデザインなサイトで、「スマートフォン」と「PC&タブレット」でコンテンツやアドセンス等の広告を出し分ける話。キャッシュ系プラグインの設定とセットで行う必要があります。
何故 出し分けたいの？
同一サイトでもスマートフォン経由とPC経由では求められてる情報が違ったりする場合も多いですが、CSSやjavaScript等で隠すでは無く、スマホ用に全然違う物を表示したいとか無いですか？
ブログでは広告くらいしか思いつきませんが、お店や企業ではきっと色々あると思うんですよね。ちょっとした画像やテキストならCSSとかで縮めたり隠しちゃえば見た目としてはOKですが、「広告や全く違うコンテンツを出し分けたい」だとこれでは対応できません。
タイトルは「広告」ってなっていますが、「スマートフォン」と「PC&タブレット」で何か出し分ける的な話です。
wp_is_mobile関数使うの？
WordPressにはモバイル判定できるwp_is_mobileって関数があってその辺を使えばよろしくやってくれそう… な気がするのですが、この関数はタブレットも「モバイル」って判断されちゃうんですよね。タブレットはPCと言うことにしたければ、独自関数を作る必要があります。
- wp_is_mobile – WordPress Codex
https://codex.wordpress.org/Function_Reference/wp_is_mobile - wp_is_mobileをカスタマイズ!タブレット端末にPC用コンテンツを表示させる関数を作った
http://webshufu.com/wp-is-mobile/
スマートフォンとそれ以外を判別する関数を作る
検索すると出てくるのが端末のユーザーエージェントを使った判別方法。
モバイル端末のユーザーエージェント一覧は無いかと調べてみると…。良い感じの正規表現で書かれたApache / ASP / ASP.NET / ColdFusion / C# / IIS / JSP / JavaScript / jQuery / Lasso / nginx / node.js / PHP / Perl / Python / Rails それぞれで使えるモバイル判断スクリプト集みたいなのがあったので、これのPHP版を使うことに。ありがたや。
- Detect Mobile Browsers
http://detectmobilebrowsers.com/
ただ、これをそのまま使うと日本では殆どあれなモトローラや、聞いたこともない古い端末の一覧が沢山入っており、このチェックを使われる毎にするのはちょっとなぁと思い、アクセスログを見てて来てそうな物だけ（日本のガラケーは無視）にしてみたのがコレ。
preg_match('/android.+mobile|iemobile|ip(hone|od)|opera m(ob|in)i|psp|windows (ce|phone)|mobile.+firefox/i',$_SERVER['HTTP_USER_AGENT']))
これをWordPressの関数として使うために、functions.phpに↓の感じで書きました。一覧に引っかかった端末（スマートフォン）だとtrueが返ります。
/**
* あなたはスマートフォンなの？
*/
function isMobilePhone() {
if(preg_match('/android.+mobile|iemobile|ip(hone|od)|opera m(ob|in)i|psp|windows (ce|phone)|mobile.+firefox/i',$_SERVER['HTTP_USER_AGENT']))
return true;
}
どうやって使うのか？
これを使うような人なら説明は要らないかもしれませんが、テンプレートの中でこんな感じで使います。
<?php if(isMobilePhone()) { //スマートフォンからのアクセス ?>
スマートフォン用にやりたいことをここに書く
<?php } else { //その他PC,タブレットからのアクセス ?>
PC用にやりたいことをここに書く
<?php } //endif ?>
具体的にgoogle adsenseならこんな感じ。
<?php if(isMobilePhone()) { //スマートフォンからのアクセス ?>
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:50px
data-ad-client="XXXXXXXXXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXXXXX">
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<?php } else { //その他PC,タブレットからのアクセス ?>
<ins class="adsbygoogle"
style="display:inline-block;width:468px;height:60px
data-ad-client="XXXXXXXXXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXXXXX">
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<?php } //endif ?>
キャッシュ系プラグイン入れてますか？
上記で表示の出し分けは出来たけど、皆さんキャッシュ系プラグインって使ってないですか？
「WordPressを爆速にする○の方法」とかに載ってる「Quick Cache」「WP Super Cache」「W3 Total Cache」とかその辺。変更の多いページだとこれのせいで（制作者は）イライラすることもありますが、色んな負荷が下がってやっぱり便利です。
しかし、特に何も考えずにこの辺を使っていると「先に来たスマートフォンのユーザー」のコンテンツがキャッシュされ、「後に来たPC」の人にスマートフォン用のキャッシュが表示されてしまうなど、意図しない動きとなってしまいます。
キャッシュ系プラグインの設定説明ページなどを見ていると、モバイル系は「キャッシュしない」って設定している事も多いので それでも回避もできますが、レスポンシブサイトの場合、送られるコンテンツはモバイル/PCで一緒なのでそんな設定はしてない（＝全部キャッシュする）かもしれません。
あと、一般的なブログの場合はスマートフォンの割合って結構高くないですか？ 私のブログの場合約40%位がスマートフォン。流石に無視できる数字では無いので、「スマートフォン＝キャッシュしない」って設定はちょっとあれです。
このブログのスマートフォン割合は緑
スマートフォンとその他でキャッシュを出し分ける
出し分けの設定はキャッシュプラグインによって違うので、ここでは私が使ってるQuickCacheだけ。他のプラグインの場合でもきっとできると思いますので良い感じに検索してみてください。
QuickCacheでキャッシュの出し分けをする設定
最新の無料バージョンではこの機能は無くなり（旧版と呼ばれる物をインストールすれば設定可能）、残念ながらPro版だけしか入ってません。
- 設定方法や旧版のインストール方法など
Quick Cache新旧版の選び方とその設定
http://www.hirok-k.com/blog/796.html
QuickCacheプラグインの設定欄「MD5 Version Salt」のMD5 Version Saltに下記をペーストします。
((preg_match("/android.+mobile|iemobile|ip(hone|od)|opera m(ob|in)i|psp|windows (ce|phone)|mobile.+firefox/i", $_SERVER["HTTP_USER_AGENT"])) ? "qc_mobile" : "")
判定基準は上記の独自関数と全く一緒。functions.phpやwp-config.phpあたりに、変数として登録してあげたらどっちでも使えて便利そうな気はしましたが今回はやめときました。
確認方法
上記の設定でモバイルはOKとして、これに引っかからない場合はどうなるのかがドキュメントを見てもいまいち分からなかったのですが、見ている感じではちゃんと動いているように思います。
キャッシュファイルが できすぎてない？などありましたら教えてください。
iphoneなんかのユーザーエージェントでアクセスした場合のhtmlソースのフッタ
<!-- This Quick Cache file was built for ( qc_mobile www.moyashi-koubou.com/blog/miso/ ) in 0.41081 seconds, on Apr 16th, 2014 at 8:53 am UTC. --> <!-- This Quick Cache file will automatically expire ( and be re-built automatically ) on Apr 16th, 2014 at 9:53 am UTC -->
PC版のieやchromeなどでアクセスした場合のhtmlソースのフッタ
<!-- This Quick Cache file was built for ( www.moyashi-koubou.com/blog/miso/ ) in 0.45524 seconds, on Apr 16th, 2014 at 8:52 am UTC. --> <!-- This Quick Cache file will automatically expire ( and be re-built automatically ) on Apr 16th, 2014 at 9:52 am UTC -->
スマートフォンでアクセスしたときだけMD5 Version Salt欄で設定した「qc_mobile」が入っています。
念のため、wp-content/cache/に同じ記事で３つ以上できて無いか＆中身が違うかを確認。
….まぁ大丈夫そうな気がする。
結論
ホントWordPressは楽だなぁ。
コメント
[…] WordPressでスマホ / それ以外の広告を出し分ける話 | もやし工房 […]