この記事は、モバイル端末とPCからのアクセスで処理を分けたいときに便利なWordpress関数wp_is_mobileとis_mobileの使い方について書いたものです。
Googleの検索アルゴリズムの変更で「モバイルフレンドリー」が実施される（2015年4月21日に導入）という発表があってから、色んなサイトやメールマガジンでこのことについて取り上げられているのを頻繁に見かけるようになりました。
これだけ騒がれているとスマホ対応済みだから大丈夫だと思っていても、何となく不安になります（笑） SEO Japanさんの記事を見ても、なんだか凄そうな感じ。。。
Googleのモバイルフレンドリー・アルゴリズムはパンダやペンギン以上のインパクトを与える
今後、WEBサイトはモバイル対応必須だということで、まだ未対応のWordpressサイトやブログなら、テーマをモバイル対応のものに変更するとか、あるいはプラグインWPtouchなどを導入するといった対応が必要になってきそうですね。
それと同時に、もう一つ知っておくと便利なのが、モバイル端末からのアクセスかどうかで処理を分けられる関数です。この記事では、Wordpressに標準で実装されているwp_is_mobile()と、function.phpにコードを追加することで実装できるis_mobile()関数について解説していきます。
スマホ・タブレットか、PCかで処理を分けるWordpress関数wp_is_mobile()
WordPressに標準で実装されているwp_is_mobile関数は、スマホ・タブレットをひとまとめにモバイル端末と判断します。
返り値がfalse： PCからのアクセス
ということですね。
使い方は、PHPのみでの処理なら以下のように記述します。
<?php if( wp_is_mobile() ) {
// ここにスマホ・タブレットのときのPHP処理
} else {
// ここにPCの時のPHP処理
}
?>
HTMLと組み合わせるときはこんな感じです。
<?php if( wp_is_mobile()) : ?> <!--ここにスマホ・タブレットのときのHTMLコードを記述--> <?php else : ?> <!--ここにPCの時のHTMLコードを記述--> <?php endif; ?>
ただ、このwp_is_mobile()のように、スマホとタブレットを合わせてモバイル端末とみなすより、スマホをモバイル端末、タブレット・PCをそれ以外という風に分けて処理したいときのほうが実は多かったりします。
そこで登場するのが自作関数is_mobile()。
スマホか、それ以外かで処理を分ける自作関数is_mobile()
繰り返しになっちゃいますがis_mobileの場合は返り値が以下のようになります。
返り値がfalse： スマホ以外（タブレット・PC）からのアクセス
実装はとても簡単で、ダッシュボードで外観 > テーマの編集にアクセスし、function.phpを開いて以下のコードを追加するだけです。
//---------------------------------------------------------------------------
//スマホならtrue, タブレット・PCならfalseを返す
//---------------------------------------------------------------------------
function is_mobile(){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android', // 1.5+ Android
'dream', // Pre 1.5 Android
'CUPCAKE', // 1.5+ Android
'blackberry9500', // Storm
'blackberry9530', // Storm
'blackberry9520', // Storm v2
'blackberry9550', // Storm v2
'blackberry9800', // Torch
'webOS', // Palm Pre Experimental
'incognito', // Other iPhone browser
'webmate' // Other iPhone browser
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}
色んな人がいろんなところで同じような関数を作成していらっしゃいますが、いつも参考しているElloraさんのサイトに記述されていたものをコピペさせていただきました。ありがとうございます。
【WP初心者向け】is_homeとis_mobileを使ってカスタマイズの幅を広げよう！
あとはwp_is_mobile()の時と同様に、以下のように処理を分ければOKですね。
PHPのみでの処理の場合
<?php if( is_mobile() ) {
// ここにスマホ・タブレットのときのPHP処理
} else {
// ここにPCの時のPHP処理
}
?>
HTMLと組み合わせるとき
<?php if( wp_is_mobile()) : ?> <!--ここにスマホ・タブレットのときのHTMLコードを記述--> <?php else : ?> <!--ここにPCの時のHTMLコードを記述--> <?php endif; ?>
is_mobile関数がうまく効かないときはキャッシュ系プラグインを疑え
WordPressでキャッシュ系のプラグインを使っている場合、is_mobile関数がちゃんと効かないことがあります。
私も最初is_mobileがちゃんと機能しなくて、PHPのコードがどこかで間違ってるのかと何度も確認したり、それでも結局よく分からずじまいで、ずいぶん困っていましたが、ようやく原因を見つけました。
どうやらサイトの表示を高速化するために使っているキャッシュ系プラグインW3 Total Casheが原因だった模様。
以下の記事に、W3 Total Cacheが原因でスマホ対応化プラグインWPtouchがちゃんと動かないという話とその解決方法が書かれていますが、is_mobile関数も同様の方法でちゃんと機能するようになりました。
WordPress の W3 total cache と WPtouch を併用するには除外設定が必要だ
W3 Total CacheのPage CacheとMinifyの設定画面で、Regected user agentsのところにモバイル端末一覧を追加するだけでよかったんです^^ 一覧は上のサイトからコピーしてくださいね。
最後に、このis_mobile関数はどんなふうに活用できるのか、についてちょっとしたアイデアをシェアしたいと思います。
is_mobile関数の使って広告表示もモバイルフレンドリーにする
is_mobile関数の使い道は色々あると思いますが、私の場合はAdsenseの広告を表示するときに重宝しています。
Adsenseの広告サイズにはレスポンシブというのがあって、端末のサイズに合わせて広告サイズを調整してくれるのですが、これだと大きな余白に小さめの広告サイズで表示されることがあったりと、なかなか調節が難しく、だったら自分でis_mobile関数を使って広告サイズを切り替えてしまおう、ということで以下のように設定しました。
タブレット・PCの場合→ 728 x 90 ビッグバナー
<?php if ( is_mobile() ) : ?> <!--ここにスマホ用広告サイズのAdsenseコード--> <?php else: ?> <!--タブレット・PC用広告サイズのAdsenseコード--> <?php endif; ?>
PCだとビッグバナーのサイズは非常に効果があるのですが、横幅の狭いスマホではビッグバナーだと途中で表示が切れてしまうんです。
分かっていながら、しばらくそのままにしていましたが、スマホで横幅の狭い広告を表示されるようにしたら、モバイル端末での広告クリック数がPCからのクリック以上に増えました。（もっと早くやっておけばよかった・・・）
サイトやブログからの広告収入はアクセス数はもちろん、表示サイズや配置場所がかなりモノをいうということですね。ぜひ試してみてください。
コメント