2022.4.24｜WordPress

WordPress（ワードプレス）で「wp_is_mobile」関数を使ってスマートフォン・タブレット・PCを判別する条件分岐の実装方法

WordPress（ワードプレス）で「wp_is_mobile」関数を使ってスマートフォン・タブレット・PCを判別する条件分岐の実装方法

Webサイトは、CSSのMedia Queries（メディアクエリ）を利用して、スマートフォン・タブレット・PCを判別して表示するレスポンシブデザインの方法やプラグインを利用して判別する方法がありますが、WordPress（ワードプレス）では、関数を利用してそれぞれを判別する方法があります。

今回は、WordPress（ワードプレス）で「wp_is_mobile」関数を使ってスマートフォン・タブレット・PCを判別する条件分岐の実装方法を解説します。

本記事の内容

「wp_is_mobile」関数を使ってスマートフォン・タブレット・PCを判別する条件分岐の実装方法

WordPress（ワードプレス）で、スマートフォン・タブレット・PCを判別して表示する場合、「wp_is_mobile」の関数を利用して条件分岐を実装することができます。また、iPhoneやAndroidなどスマートフォンの機種毎にコンテンツを切り替えることができます。
「wp_is_mobile」は、テンプレートファイルのそれぞれの切り替えたい個所に記述することで実装ができます。

「wp_is_mobile」関数で条件分岐（スマートフォン+タブレットとPC）

「wp_is_mobile」関数で記述した場合、スマートフォンやタブレットからアクセスあった場合とPCからアクセスあった場合に判別します。

判別する条件分岐コード
<?php if ( wp_is_mobile() ) : ?>
  <!-- スマートフォン・タブレットで表示したい内容 -->
<?php else: ?>
  <!-- PCで表示したい内容 -->
<?php endif; ?>

「wp_is_mobile」関数でそれぞれを条件分岐（スマートフォンとタブレットとPC）

「wp_is_mobile」関数で記述したままだと、スマートフォンとタブレットが同じ認識となるため、スマートフォンとタブレットも別々で判別させるためには、「functions.php」ファイルにそれぞれを判別するためのコードを記述する必要があります。
サーバーにインストールされたWordPressの「テーマ」ファイルから「functions.php」ファイルを探します。
「functions.php」ファイルを開いてそれぞれの端末を判別するコードを記述することでスマートフォン・タブレット・PCを別々で実装ができるようになります。
また、「functions.php」ファイルに判別するコードを記述したら「wp_is_mobile」関数の記述も変更します。

スマートフォン・タブレット・PCを判別するコード
//スマートフォンの判別
function wp_is_phone() {
  $ua = $_SERVER['HTTP_USER_AGENT'];
  if (   strpos($ua, 'iPhone') // iPhone
    || strpos($ua, 'iPod') // iPod touch
    ||(strpos($ua, 'Android') && strpos($ua, 'Mobile'))	// Android搭載スマホ
    ||(strpos($ua, 'Windows') && strpos($ua, 'Mobile')) // Windows Phone
    ||(strpos($ua, 'firefox') && strpos($ua, 'Mobile')) // firefox製ブラウザ
    || strpos($ua, 'Opera Mini') // Androidで人気のブラウザ
    || strpos($ua, 'Opera Mobi') // Androidで人気のブラウザ
    || strpos($ua, 'webmate') // その他の Other iPhone browser
    || strpos($uat,'incognito') // その他の iPhone browser
  ) {
    return true;
  } else {
    return false;
  }
}
//タブレットの判別
function wp_is_tablet() {
  $uat = $_SERVER['HTTP_USER_AGENT'];
  if ( strpos($uat, 'iPad') // iPad
    ||(strpos($uat, 'Android') && strpos($uat, 'Mobile')=== false ) // Android搭載タブレット
    || strpos($uat, 'windows touch') //windows touch
    || strpos($uat, 'Kindle') // Kindle
    || strpos($uat, 'Silk') // Kindle に付属の Amazon 製ブラウザ
    || strpos($uat, 'firefox tablet') //firefox tablet
    || strpos($uat, 'WebOS') // Palm
  ) {
    return true;
  } else {
    return false;
  }
}
「wp_is_mobile」関数コード
<?php if(wp_is_phone()): ?>
  <!-- スマートフォンで表示したい内容 -->
<?php elseif(wp_is_tablet()): ?>	
  <!-- タブレットで表示したい内容 -->
<?php else: ?>
  <!-- PCで表示したい内容 -->
<?php endif; ?>

まとめ

Media Queries（メディアクエリ）を利用してレスポンシブデザイン対応をすることが多いですが、「wp_is_mobile」関数を利用して端末を分岐させて方法も知っておくと良いですね。
Media Queries（メディアクエリ）を利用してCSSで対応することもできますが、手間や時間がかかってしまったら中々難しくて対応ができない時などにこのような条件分岐を知っておくと手段のひとつとなります。

«
»

関連記事