こんにちは。ECプロデュース部の岡本です。
SEOやサイト更新の手間を考えるとレスポンシブウェブデザインが一番なのですが、
やはり状況によっては端末ごとに出力するタグを切り替える方が良い場合もあります。
今回はWordPressで端末ごとにタグを出し分ける方法についてご紹介します。
PHP で、ユーザーエージェント(iPhone・Android・タブレット・携帯・PC)によってページを振り分ける | モノリオ
パターン1:テンプレートタグを利用する
デバイス毎にテンプレートファイルを作成し、UA判定後に読み込ませるタイプです。
デバイスの数だけphpファイルを作る必要があるので、「メニュー」や「ウィジェット」を活用するなど「保守の負担にならない方法」を考える必要がありそうです。
<?php $ua = $_SERVER['HTTP_USER_AGENT']; if ( (strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) || (strpos($ua, 'iPod') !== false) || (strpos($ua, 'iPhone') !== false) || (strpos($ua, 'Windows Phone') !== false)){ get_template_part( 'content', 'sp' ); } elseif ( (strpos($ua, 'DoCoMo') !== false) || (strpos($ua, 'KDDI') !== false) || (strpos($ua, 'SoftBank') !== false) || (strpos($ua, 'Vodafone') !== false) || (strpos($ua, 'J-PHONE') !== false)) { get_template_part( 'content', 'ketai' ); } elseif ( (strpos($ua, 'Android') !== false) || (strpos($ua, 'iPad') !== false)){ get_template_part( 'content', 'tablet' ); } else { get_template_part( 'content', 'other' ); } ?>
パターン2:htmlタグのみの場合
phpコードが入っていない場合、「ヒアドキュメント」を使うことで比較的簡単に記述できます。
ヒアドキュメント – Wikipedia
言語によって記述法が異なりますが、WordPressで使用するPHPの場合
<<<EOD <文字列> EOD;
となります。
そしてこちらが実装例です。
<?php $ua = $_SERVER['HTTP_USER_AGENT']; if ( (strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) || (strpos($ua, 'iPod') !== false) || (strpos($ua, 'iPhone') !== false) || (strpos($ua, 'Windows Phone') !== false)){ echo <<<EOD <p>スマートフォンから閲覧中</p> EOD; } elseif ( (strpos($ua, 'DoCoMo') !== false) || (strpos($ua, 'KDDI') !== false) || (strpos($ua, 'SoftBank') !== false) || (strpos($ua, 'Vodafone') !== false) || (strpos($ua, 'J-PHONE') !== false)) { echo <<<EOD <p>携帯から閲覧中</p> EOD; } elseif ( (strpos($ua, 'Android') !== false) || (strpos($ua, 'iPad') !== false)){ echo <<<EOD <p>タブレットから閲覧中</p> EOD; } else { echo <<<EOD <p>PCその他のデバイスから閲覧中</p> EOD; } ?>
パターン3:CSSファイルを出し分けたい場合
htmlタグとphpが混在している場合、phpを分割してしまうことが効率的かもしれません。
<?php $ua = $_SERVER['HTTP_USER_AGENT']; if ( (strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) || (strpos($ua, 'iPod') !== false) || (strpos($ua, 'iPhone') !== false) || (strpos($ua, 'Windows Phone') !== false)){ ?> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mobile.css" type="text/css" media="all" /> <?php } elseif ( (strpos($ua, 'DoCoMo') !== false) || (strpos($ua, 'KDDI') !== false) || (strpos($ua, 'SoftBank') !== false) || (strpos($ua, 'Vodafone') !== false) || (strpos($ua, 'J-PHONE') !== false)) { ?> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/ketai.css" type="text/css" media="all" /> <?php } elseif ( (strpos($ua, 'Android') !== false) || (strpos($ua, 'iPad') !== false)){ ?> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" /> <?php } else { ?> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" /> <?php }?>
もっと手軽な方法
いちいちUAを記述しなければならないことや、タグ・テンプレートファイルを個別に作成しないといけないなどどれもなかなか保守性に難ありです。
身も蓋もない話ですが、「そもそも使わないか、最小限に抑える」ということが最も保守性を高めるのではないかと思います。
例えばパターン3のCSS振り分けなどは、「WPtouchプラグイン」や「Stingerテーマ」などで使用されている手法です。
しかしCSSの振り分けをしたいだけであれば、「メディアクエリ」を利用した記述法のほうが圧倒的に行数が少なくなります。
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" media="screen and (max-width: 480px)" href="mobile.css"> <link rel="stylesheet" media="screen and (min-width: 481px)" href="other.css"> <!--[if lt IE 8]> <link rel="stylesheet" href="other.css"> <![endif]-->
WordPressはPHPさえ使いこなせば何でもできるCMSですが、
その分「本当にそうすべきなのか?」をしっかりと考えて制作をする必要がありそうです。
さらに手軽な切替方法[PR]
aishipRでは、デバイス別の表示切り替えを1クリックでできるようになってます。
スマートフォンやフィーチャーフォンでは、画像リサイズ・不要なhtmlタグの削除などがサーバー側で実施され、かなり気軽に表示切り替えができるようになってます。