【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

[WordPress]端末ごとにタグを切り替える方法3つ

[WordPress]端末ごとにタグを切り替える方法3つ

typing_code

こんにちは。ECプロデュース部の岡本です。

SEOやサイト更新の手間を考えるとレスポンシブウェブデザインが一番なのですが、
やはり状況によっては端末ごとに出力するタグを切り替える方が良い場合もあります。

今回はWordPressで端末ごとにタグを出し分ける方法についてご紹介します。

PHP で、ユーザーエージェント(iPhone・Android・タブレット・携帯・PC)によってページを振り分ける | モノリオ

ECサイトは1つでいい

パターン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]

スクリーンショット_013014_064416_PM
aishipRでは、デバイス別の表示切り替えを1クリックでできるようになってます。

スマートフォンやフィーチャーフォンでは、画像リサイズ・不要なhtmlタグの削除などがサーバー側で実施され、かなり気軽に表示切り替えができるようになってます。

ECサイトは1つでいい


”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+