スマホメニュー

スマホ・タブレットを判別してサイドナビを読み込まないようにしてみる【PHP】

MVサイト製作日記 part.06
現在、横幅1640px以上のディスプレイでMVサイトを見ると、右側のサイドナビゲーションが2つ表示されます。しかし、スマホくらいの大きさのディスプレイでは、サイドナビゲーションを表示させないようにしていますし、タブレットもそこはまで大きな画面がないので、サイドナビゲーションを1つしか表示できません。
ただし、表示を消しているのはcssで非表示にしているだけなので、HTMLに無駄なソースコードとして存在しています。これを、スマホ・タブレットではサイドナビゲショーンをHTML単位で読み込ませ無いようににしてみます。スマホ回線でも少しは表示が速くなるのかな?

WordPressの独自関数wp_is_mobile()を使って判断してみる

WordPress3.4以降から実装された関数に「wp_is_mobile()」というものがあります。この関数はユーザーエージェント (User agent)を調べて、サイトにアクセスしたのがスマホ・タブレットかを簡単に調べてくれます。

スマホ・タブレットだけに処理をさせたい場合

パソコンだけに処理をさせたい場合

スマホ・タブレットとパソコンの処理を分けたい場合

ただしこの関数はスマホでアクセスしてきたのか、タブレットでアクセスしてきたのかまでは判断してくれません。ですので、次の項目でスマホだけを判断してくれる関数を作ってみます。

※関数の使い方のコードは、上記と同じですので、次項からは「パソコンだけに処理させたい場合」と同じ記述しか記載しません。

PHPの$_SERVER[‘HTTP_USER_AGENT’]を使って判断してみる

WordPressを使っていない場合は、直接phpを書いて関数を書かなければいけません。そこで、前項のWordPressの関数「wp_is_mobile()」を覗いてみます。
ファイルの場所は、
[wp-includes]→[vars.php]

スマホ・タブレットを判別する関数

上記がWordPressの関数「wp_is_mobile()」の中身です。これを自分で作ったphpに書けば、WordPressを使っていなくても「wp_is_mobile()」を使えるようになります。

使い方も前項と同じです。
関数名は変えた方が良いかもしれませんが^^;

スマホだけを判別する関数

WordPressの関数「wp_is_mobile()」を元に、ユーザーエージェントを判断する部分をスマホだけに特化してみました。 対応しているスマホは、

  • iphone
  • Android(スマホ)
  • Windows Phone
  • BlackBerry

です。

また、WordPressでこの関数を使いたい場合は、上記関数を「functions.php」に追記すれば使えるようになります。

その他や新しいスマホが出たら、都度追加していく形になるかと思います。
そして、使い方も前項と一緒です。(関数名のところを変えるだけ)

チラシの裏

これでMVサイトでは、スマホで見てる場合はサイドナビゲーションをソHTML上でも消しています。一応MVサイトで使っているコードを記載して起きます。

コメントを残す

メールアドレスが公開されることはありません。

Advertising

最近の記事

アーカイブ

Advertising

Advertising

カレンダー

2017年11月
« 10月    
 1234
567891011
12131415161718
19202122232425
2627282930  

タグ

Social