HOME  /WordPress(応用)
 /表示デバイスを取得する方法
2020年03月22日

表示デバイスを取得する方法

WordPressで用意されている関数、is_mobilewp_is_mobileを利用すると、アクセスしてきたデバイスの種類をPHPプログラム側で取得する事ができます。

下記に設定方法と使い方を解説します。

1.is_mobile関数

この関数はアクセスしてきたデバイスがスマホの場合はtrueを返す関数です。

但し、この関数を使う場合はfunctions.phpに下記を登録する必要があります。

<?php
function is_mobile() {
 $useragents = array(
   'iPhone',             // iPhone
   'iPod',               // iPod touch
   'Android.*Mobile',    // 1.5+ Android *** Only mobile
   'Windows.*Phone',     // *** Windows Phone
   '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']);
}
?>

※1.上記関数は登録したデバイスからのアクセスにtrueを返します。

※2.関数名はis_mobile()でなく他の関数名でも構いませんが一般的にはこの名前が使われます。

<使い方>

<?php
  if(is_mobile()){echo 'このデバイスはスマホです'}
  else{echo 'このデバイスはスマホではありません'}
?>

2.wp_is_mobile関数

この関数はWordPressのVer3.4から導入された関数で、アクセスしてきたデバイスがスマホ、iPad、タブレットの場合、trueを返します。

<使い方>

<?php
  if(wp_is_mobile()){echo 'このデバイスはスマホまたはタブレットです'}
  else{echo 'このデバイスはPCです'}
?>

3.デバイスの判定方法と問題点

各デバイスの判断は下記で行います。

  判定値 スマホの判定 タブレットの判定 PCの判定
is_mobile関数 true    
false    
wp_is_mobile関数 true    
false    

上記関数の問題点は下記になります。

新しいタイプのデバイスが出てきた場合、更新が必要
この関数はデバイス種類を判断している為新しいデバイス名が登場した場合は、関数の更新が必要になります。
但し、wp_is_mobileはWordPress側で更新してくれます。

プログラムのデバッグ環境で利用できない。
プログラム開発は通常PCで行い、タブレット画面やスマホ画面の確認はWindowsサイズの縮小で行います。
しかしこれらの関数はデバイス種類を返しているだけなのでこの機能が使えません。

4.関連記事

画面サイズを取得する方法は下記URLを参照してください。

画面サイズを取得する方法

この関数と画面サイズの判断関数の両方を使う判断は下記URLを参照してください。

表示デバイスと画面サイズの両方を使った判断方法

 メモ

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「WordPress(応用)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

このコンテンツはこのサイトのフッタページのデザインを解説した物です。

ここでは整形済みテキストの設定と使い方を解説します。整形済みテキストのポイントは見やすいソーステキストの提供です。

子テーマの作り方には色々な方法があります。ここで紹介している方法は親と子を明確に分離する方法なので、子テーマのCSSが親テーマのCSSと完全に分離するので見やすくすることができます。

Bootstrapはグリッドデザインやボタン及びナビゲーション等の色々な機能を持っており、これを利用するとかなり自由なデザインが可能になるツールです。このBootstrapをダウンロードし、HTTP画面やビジュアルエディタで使う方法を解説しています。

Bootstrapのモーダルウィンドウの機能をビジュアルエディタで使うとどうしてもBootstrapの仕様の制限を受けます。
そこでこの投稿では自作のモーダルウィンドウの作り方を解説します。ここでは背景色の変更やコンテンツエリア幅の変更を可能としています。

ここではビジュアルエディタでタブ切替のコンテンツを作成する方法を解説しています。しかしタブの単純な作り方ではスマホ表示でタブが複数行になる!等の問題が発生します。そこでflexboxの機能を使ってスマホでも使えるタブを実現しました。

このドキュメントではビジュアルエディタ(TinyMCE)の見出し、本文、URLの設定を解説しています。

PHPプログラムで表示するデバイスの種類が判ればプログラミングが簡単になります。そこでここではデバイス種類を取得する関数とデバイスの画面サイズを取得する方法を併用して、実使用上問題ない方法を解説しています。

PC画面ではサイドバーがあっても良いが、幅が狭いスマホではこのエリアが確保できない。そこでスマホの場合は自動的にBootstrapのドロップダウンメニュに置き変えるサイドーバーの作り方を解説しています。

2018年末にリリースされたWordPress5.0から標準エディタは「ブロックエディタ(Gutenberg)」に変更になりました。しかし「ビジュアルエディタ(TinyMCE)」を使い続ける方法を解説しています。