テーマカスタマイズ

mobiledetectが手軽にユーザーエージェント判定ができて便利すぎた

2017.08.29

2017.09.03

各デバイス

レスポンシブデザインはワンソースで!とは言うもののパフォーマンス観点や、ちょっとした融通を効かせたいときにユーザーエージェント判定で読み込みを変更したい場合があると思います。そんな時はmobiledetectが簡単でおすすめです。

ちなみにmobiledetectは公式によるとユーザーエージェントで各デバイスを判定してくれる軽量PHPクラスとのことなのでWordPressにはうってつけです。

mobiledetectの導入方法

mobiledetectは本体ファイルを読み込んで、条件分岐を書くだけです。

mobiledetectの読み込み

mobiledetect本体を読み込みます。Wordpressで使用する場合は使用テーマディレクトリに格納します。

<?php
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
?>

ちなみにfunctions.phpで呼び出しを行っていればテーマ内のどこでも呼び出せます。

よく使う分岐例

実際の制作でよく使いそうな分岐例を記しておきます。

スマホの場合

<?php if( $detect->isMobile() && !$detect->isTablet()): ?>
//処理
<?php endif; ?>

スマホ&タブレットの場合

<?php if($detect->isMobile()): ?>
//処理
<?php endif; ?>

PCの場合

<?php if(!$detect->isMobile()): ?>
//処理
<?php endif; ?>

PC&タブレット場合

<?php if(!$detect->isMobile() || $detect->isTablet()): ?>
//処理
<?php endif; ?>

タブレットの場合

<?php if($detect->isTablet()): ?>
//処理
<?php endif; ?>

WordPressでの使い所

WordPressのシェアを考えるとmobiledetectの需要が一番多いのもWordPressと思われますので使い所を紹介します。

メイン画像などの大きな画像

当サイトの記事詳細ページやトップページは大きくアイキャッチ画像を取り扱っています。スマホではそこまで大きな画像は必要ありませんので、そのまま使うのはパフォーマンス的に疑問です。そんな時はfunctions.phpで新たな画像サイズを作り、mobiledetectで分岐します。

//functions.php
<?php
//PCサイズ
add_image_size( 'ent-pc', 1060, 655,true);
//スマホサイズ
add_image_size( 'ent-sp', 640, 396,true);
?>
//出力するページ
<?php
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
?>
<?php if( $detect->isMobile() && !$detect->isTablet()): ?>
<?php echo get_the_post_thumbnail( $id,'ent-sp'); ?>
<?php else: ?>
<?php echo get_the_post_thumbnail( $id,'ent-pc'); ?>
<?php endif; ?>

一覧ページはRetina対応のことを考えると案外使う必要はないのかなぁ〜と個人的には思います。

レスポンシブデザインのパフォーマンス改善に

mobiledetectうまく利用すれば、かなり柔軟にレスポンシブ対応できるのではないでしょうか。冒頭でも触れたようにレスポンシブはワンソース!とはいうものの、投稿画像の呼び出しサイズをデバイス毎に変更するだけでもパフォーマンスの改善が期待できたりもしますので、今の制作の風潮を考えると選択肢の一つとして持っておいて損はないかと思います。

デバイス判定だけではない

mobiledetectのできる事はデバイスの判定だけではなくOSやOSのバージョン、ブラウザの判定もできるようです。詳しくは公式サイトを参照ください。

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する