スマホ・タブレットを判別してサイドナビを読み込まないようにしてみる【PHP】
- Date：
- Category：PHP, MVサイト製作日記
- Tags：WordPress, PHP
- Response：Comments 0
-
MVサイト製作日記 part.06
現在、横幅1640px以上のディスプレイでMVサイトを見ると、右側のサイドナビゲーションが2つ表示されます。しかし、スマホくらいの大きさのディスプレイでは、サイドナビゲーションを表示させないようにしていますし、タブレットもそこはまで大きな画面がないので、サイドナビゲーションを1つしか表示できません。
ただし、表示を消しているのはcssで非表示にしているだけなので、HTMLに無駄なソースコードとして存在しています。これを、スマホ・タブレットではサイドナビゲショーンをHTML単位で読み込ませ無いようににしてみます。スマホ回線でも少しは表示が速くなるのかな？
WordPressの独自関数wp_is_mobile()を使って判断してみる
WordPress3.4以降から実装された関数に「wp_is_mobile()」というものがあります。この関数はユーザーエージェント (User agent)を調べて、サイトにアクセスしたのがスマホ・タブレットかを簡単に調べてくれます。
スマホ・タブレットだけに処理をさせたい場合
|
1 2 3 |
<?php if (wp_is_mobile()) :?> // スマホ・タブレット用の処理 <?php endif; ?> |
パソコンだけに処理をさせたい場合
|
1 2 3 |
<?php if (!wp_is_mobile()): ?> // パソコン用の処理 <?php endif; ?> |
スマホ・タブレットとパソコンの処理を分けたい場合
|
1 2 3 4 5 |
<?php if (wp_is_mobile()) :?> // スマホ・タブレット用の処理 <?php else: ?> // パソコン用の処理 <?php endif; ?> |
ただしこの関数はスマホでアクセスしてきたのか、タブレットでアクセスしてきたのかまでは判断してくれません。ですので、次の項目でスマホだけを判断してくれる関数を作ってみます。
※関数の使い方のコードは、上記と同じですので、次項からは「パソコンだけに処理させたい場合」と同じ記述しか記載しません。
PHPの$_SERVER[‘HTTP_USER_AGENT’]を使って判断してみる
WordPressを使っていない場合は、直接phpを書いて関数を書かなければいけません。そこで、前項のWordPressの関数「wp_is_mobile()」を覗いてみます。
ファイルの場所は、
[wp-includes]→[vars.php]
スマホ・タブレットを判別する関数
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
function wp_is_mobile() { static $is_mobile; if ( isset($is_mobile) ) return $is_mobile; if ( empty($_SERVER['HTTP_USER_AGENT']) ) { $is_mobile = false; } elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false // many mobile devices (all iPhone, iPad, etc.) || strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false || strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false || strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false || strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mobi') !== false ) { $is_mobile = true; } else { $is_mobile = false; } return $is_mobile; } |
上記がWordPressの関数「wp_is_mobile()」の中身です。これを自分で作ったphpに書けば、WordPressを使っていなくても「wp_is_mobile()」を使えるようになります。
使い方も前項と同じです。
関数名は変えた方が良いかもしれませんが＾＾；
スマホだけを判別する関数
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function is_mobile() { static $is_mobile; if ( isset($is_mobile) ) return $is_mobile; if ( empty($_SERVER['HTTP_USER_AGENT']) ) { $is_mobile = false; } elseif (strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone') !== false || (strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false) && (strpos($ua, 'Mobile')) !== false || strpos($_SERVER['HTTP_USER_AGENT'], 'Windows Phone') !== false || strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false) { $is_mobile = true; } else { $is_mobile = false; } return $is_mobile; } |
WordPressの関数「wp_is_mobile()」を元に、ユーザーエージェントを判断する部分をスマホだけに特化してみました。 対応しているスマホは、
- iphone
- Android(スマホ)
- Windows Phone
- BlackBerry
です。
また、WordPressでこの関数を使いたい場合は、上記関数を「functions.php」に追記すれば使えるようになります。
その他や新しいスマホが出たら、都度追加していく形になるかと思います。
そして、使い方も前項と一緒です。（関数名のところを変えるだけ）
|
1 2 3 |
<?php if (!is_mobile()): ?> // タブレット・パソコン用の処理 <?php endif; ?> |
チラシの裏
これでMVサイトでは、スマホで見てる場合はサイドナビゲーションをソHTML上でも消しています。一応MVサイトで使っているコードを記載して起きます。
|
1 2 3 4 5 6 7 8 9 |
<?php if (!is_mobile()): ?> // タブレット・パソコンで表示させるサイドナビ // ※スマホ以外 <?php endif; ?> <?php if (!wp_is_mobile()): ?> // パソコンで表示させるサイドナビ // ※スマホ・タブレット以外 <?php endif; ?> |
コメントを残す