概要
単純にユーザーエージェントでPC・タブレット・スマホの３つに振り分ける仕組みです。正確にはタブレット・スマホ・その他の３つです。ユーザーエージェントとは、簡単に言うと何かの端末でアクセスしてきたとき、その端末の名前を見ることができます。
iPhoneやiPadといった名前になりますが、それである程度機種がわかりますので、それを元に振り分ける仕組みです。単純に名前で振り分けていますので、画面幅での振り分けとは別になります。
今回は、WordPressに使うとして説明します。
コード
ua.class.php
2015年版PHPユーザエージェント判別・判定
下記のスクリプトはこちらからお借りしました。自分で作ったのよりはるかにいいです。ありがとうございます。
<?php
class UserAgent{
private $ua;
private $device;
public function set(){
$this->ua = mb_strtolower($_SERVER['HTTP_USER_AGENT']);
if(strpos($this->ua,'iphone') !== false){
$this->device = 'mobile';
}elseif(strpos($this->ua,'ipod') !== false){
$this->device = 'mobile';
}elseif((strpos($this->ua,'android') !== false) && (strpos($this->ua, 'mobile') !== false)){
$this->device = 'mobile';
}elseif((strpos($this->ua,'windows') !== false) && (strpos($this->ua, 'phone') !== false)){
$this->device = 'mobile';
}elseif((strpos($this->ua,'firefox') !== false) && (strpos($this->ua, 'mobile') !== false)){
$this->device = 'mobile';
}elseif(strpos($this->ua,'blackberry') !== false){
$this->device = 'mobile';
}elseif(strpos($this->ua,'ipad') !== false){
$this->device = 'tablet';
}elseif((strpos($this->ua,'windows') !== false) && (strpos($this->ua, 'touch') !== false)){
$this->device = 'tablet';
}elseif((strpos($this->ua,'android') !== false) && (strpos($this->ua, 'mobile') === false)){
$this->device = 'tablet';
}elseif((strpos($this->ua,'firefox') !== false) && (strpos($this->ua, 'tablet') !== false)){
$this->device = 'tablet';
}elseif((strpos($this->ua,'kindle') !== false) || (strpos($this->ua, 'silk') !== false)){
$this->device = 'tablet';
}elseif((strpos($this->ua,'playbook') !== false)){
$this->device = 'tablet';
}else{
$this->device = 'others';
}
return $this->device;
}
}
?>
こちらを「ua.class.php」として、WordPressのテンプレートに読み込んで使います。
WordPressテンプレート – header.php
<?php
require_once TEMPLATEPATH . "ua.class.php";
function Logo (){
// スマホに表示する場合
$mobile=<<<EOF
<img src="mobile_logo.jpg"/>
EOF;
// タブレットに表示する場合
$tablet =<<<EOF
<img src="tablet_logo.jpg"/>
EOF;
// PCに表示する場合
$pc =<<<EOF
<img src="pc_logo.jpg"/>
EOF;
Disp ($mobile, $tablet, $pc);
}
function Disp ($mobile, $tablet, $pc){
$ua = new UserAgent();
if($ua->set() === "mobile") {
echo $mobile;
}elseif($ua->set() === "tablet"){
echo $tablet;
}else{
echo $pc;
}
}
?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title><?php title(); ?></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<?php wp_head(); ?>
...
..
.
例えばPC・タブレット・スマホで、ロゴ画像を変更したいとかなら、このように書きます。
「ua.class.php」は使う前に読み込む必要がありますの注意して下さい。例ではWordPressのテンプレート「header.php」の先頭に追記しています。
function()はどこに書いてもokですが、説明の都合上「ua.class.php」を読み込んだ下に書きました。
「<<<EOF〜EOF;」こちらはヒアドキュメントといって、複数行を中に書けばそのまま変数に入れることができる便利な機能です。
<body>
<div id="logo"><?php Logo(); ?></div> <!-- ロゴ画像を表示したい場所 -->
</body>
あとはロゴ画像を表示したい箇所に、「<?php Logo(); ?>」を追加するだけで、PC・タブレット・スマホによって差し替えられるロゴ画像になります。
まとめ
PC・タブレット・スマホによって変更したいものなら大抵なんでも応用が効くと思います。それぞれで広告を分けたいとき、レイアウトを変更したいとき、スマホだけ重たいFacebookのLike Boxを表示したくないときなどアイデア次第でお好きなようにできます。ぜひ参考してみてください。
コメント