かわたま.net

Enjoy Creative! かわたまのwebメモ

【wordpress】スマートフォン端末別に条件分岐してコンテンツを切り替える記述方法

2014 October 05

Tag:

PCとスマートフォンで表示を切り替えるだけでなく、スマートフォン端末別に条件分岐して表示を切り替える場合の記述方法をメモ。
端末ごとにcssや広告などを切り替える際などに便利です。

PC・タブレットとスマートフォンで表示を切り替え

PC・タブレット端末(iPad・Kindleなど)とスマートフォンで表示を切り替える場合の記述方法

・functions.phpに下記を記述

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']);
}

・テンプレートファイル内で表示を切り替えたい箇所に下記を記述して表示切り替え

<?php if (is_mobile()) : ?>
  // スマートフォン用コンテンツ
<?php else: ?>
  // PC・タブレット用コンテンツ
<?php endif; ?>

iPadへ条件分岐して表示切り替え

・functions.phpに下記を記述

function is_ipad() {
  $is_ipad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
  if ($is_ipad) {
    return true;
  } else {
    return false;
  }
}

・テンプレートファイル内で表示を切り替えたい箇所に下記を記述して表示切り替え

<?php if (is_ipad()) : ?>
  // iPad用コンテンツ
<?php else: ?>
  // その他用コンテンツ
<?php endif; ?>

iPhoneへ条件分岐して表示切り替え

WordPressで用意されている変数’$is_iphone’を使うと、iPhoneへ条件分岐することが可能です。

<?php if ($is_iphone) : ?>
  // iPhone用コンテンツ
<?php else: ?>
  // その他用コンテンツ
<?php endif; ?>

Androidへ条件分岐して表示切り替え

・functions.phpに下記を記述

function is_Android() {
  $is_Kindle = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'Android');
  if ($is_Android) {
    return true;
  } else {
    return false;
  }
}

・テンプレートファイル内で表示を切り替えたい箇所に下記を記述して表示切り替え

<?php if (is_Android()) : ?>
  // Android用コンテンツ
<?php else: ?>
  // その他用コンテンツ
<?php endif; ?>

Kindleへ条件分岐して表示切り替え

・functions.phpに下記を記述

function is_Kindle() {
  $is_Kindle = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'Kindle');
  if ($is_Kindle) {
    return true;
  } else {
    return false;
  }
}

・テンプレートファイル内で表示を切り替えたい箇所に下記を記述して表示切り替え

<?php if (is_Kindle()) : ?>
  // Kindle用コンテンツ
<?php else: ?>
  // その他用コンテンツ
<?php endif; ?>

参考にした記事:millkeyweb.com