ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

WordPress以外でも使える!スマホとタブレット・PCの振り分け方法まとめ

スマホでWebサイト見る着物姿の女性

スマホとPC・タブレットでのデザインや見栄えを変えるための判別方法を紹介します。WordPressプラグインだけでなく、それ以外のサイトをPHPやJavaScriptのみで振り分ける方法も調べました。

ゆめぴょん(@yume_pyon)です。こんちはっ!

スマートフォン(以下スマホ)やタブレットでのネット閲覧率が急増してきて、Googleなどもスマホ対応を要求してきました。このブログもレスポンシブではなく、スマホテーマ(デザイン)は独自のを使っています。

【WordPressテーマ】スマホサイト作成工程と役立ったツール類をご紹介【WordPressテーマ】スマホサイト作成工程と役立ったツール類をご紹介

このブログはスマホ表示時には、便利なWordPressプラグイン「WPtouch…

【WordPress】スマホサイト作成!テーマファイルの効率化【WordPress】スマホサイト作成!テーマファイルの効率化48 shares

WordPress用のスマホテーマを作成した時に配慮した、PC版とは違ったテーマ…

それ以外にもスマホ対応の記事をいくつか書いていますので参考にしてみてください。

スマホ最適化のおすすめ記事一覧

通常サイトのスマホやタブレットの振り分け方法

まずはWordPress以外のWebサイト制作でも使える、スマホやタブレットの判別方法についてです。今年はWebサービスを作りたいとも思っているので、その時のスマホ振り分けにも使えそうです。

PHPの関数で振り分ける方法

Googleで検索すると、山のように見つかる、PHPによるスマホとPC・タブレットの判別方法です。もっともシンプルな書き方を紹介しますので、スマホやタブレットの機種などは好みで追加変更してください。

「$uagent = userAgent();」で、$uagentにスマホなら「sp」タブレットなら「tb」PCなら「pc」が代入されるので、あとは表示を振り分ける時にif文などで利用してください。グローバル変数としてもいいかも。

ちなみに、このPHP関数は次期WordPressテーマでも利用するつもりで、別ブログ(ゆめぴょんの好奇心)で実験中です。プラグインが不要になります。問題点あればご指摘くださいね。

PHPライブラリで振り分ける方法

これもいろいろ見つかります。少ししか試してませんが「Mobile Detect」というPHPライブラリが、高機能で更新も頻繁なので個人的にはおすすめです。

ライブラリをダウンロード後に設置して、requireなどで読み込んで、newでインスタンスを作成し、あとは関数でスマホやタブレットを振り分けられます。

このPHPライブラリのおすすめしたい機能は、スマホやタブレットの判別だけでなく、OSやブラウザやiPhoneやNexusなどの機種まで振り分け可能な点です。私が興味ある「iPhone6 Plus」の判別はまだできなそうですが。

さらに詳しい解説は公式サイトか、あらゆさん(@arayutw)のページがとても参考になります。私が見つけたきっかけもこのサイトです。

PHPでPCとスマホを判別する方法【Mobile Detect】

JavaScriptで振り分ける方法

JavaScriptもライブラリがたくさん見つかりそうですが、スマホとそれ以外を振り分けたいだけなら「navigator.userAgent」だけで簡単に判別可能です。

JavaScriptの方法は下ページが参考になります。無料ブログやレンタルサーバーなどでPHPが利用できない場合には、JavaScriptでのスマホ判別が必要になりそうです。

ソースコピーですぐ使えてスマホ専用サイト作成に便利!PC・スマートフォンサイトの振り分けJavaScript作りました。 | HTML5でサイトをつくろう

WordPressでのスマホやタブレットの振り分け方法

WordPressの場合は、レスポンシブ対応のテーマ(デザインテンプレート)が主流な感じです。その場合はPHPでの振り分けが多いです。

独自テーマや一部分の振り分けをするには、プラグインを使う方法と使わない方法があります。またはWPTouchというスマホデザインを自動生成してくれるプラグインも便利です。

【WordPress】WPtouchでスマホ対応!サムネイル表示やAnalytics設定方法【WordPress】WPtouchでスマホ対応!サムネイル表示やAnalytics設定方法

WordPressプラグイン「WPtouch」は、ブログを簡単にスマホ対応にでき…

WordPressプラグインを利用する方法

このブログもWordPressを使っていますが、2015.1.8現在は、スマホテーマをプラグインで切換えています。下記事ではそのプラグイン「Multi Device Switcher」を選んだ理由や使い方も紹介してるので参考にしてください。

【WordPress】Multi Device Switcherでスマホテーマ自動切替!Androidタブレット対応方法も【WordPress】Multi Device Switcherでスマホテーマ自動切替!Androidタブレット対応方法も

WordPressプラグイン「Multi Device Switcher」を使う…

WordPressの場合は、このようにプラグインを利用して、ブログのメインである記事作成に専念できるのがいいですね。

WordPressプラグインを使わない方法

テーマの切換えには、上で紹介したプラグインを使えばいいのですが、サイドバーを表示しないとか広告をスマホとPCで振り分けたいだけの場合は、PHP関数で処理する方が便利だと思います。

WordPress標準の「wp_is_mobile」関数もありますが、タブレットがスマホ側と判定されるため、使いづらいです。簡単な自作がおすすめです。下記事を参考にしてください。またはこの記事一番上で紹介したPHP関数もおすすめです。

【WordPress】条件分岐で高速化!スマホ・ホーム・特定カテゴリで無駄表示しない方法【WordPress】条件分岐で高速化!スマホ・ホーム・特定カテゴリで無駄表示しない方法23 shares

WordPressでブログを作成していると、スマホとタブレットとPCや、記事とホ…

ショートコードにしても便利だと思います。自作関数については下ページも参考になります。

WordPressのスマホ対応に使える!!PCとの表示振り分け関数・プラグイン|ウェブシュフ

まとめ:今日のゆめぴょんの知恵

スマホでのネット利用率が高まってるので、スマホ専用のWebサイト制作はさらに重要になります。今回のスマホ・タブレットの振り分けもぜひ参考にしてください。

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:複数サイト運営者へ!内部検索はGoogleアドセンスのカスタマイズがおすすめ新しいWordPressテーマの特徴7つを大公開!SEO対策やメンテ性を向上!タブレットも特化:次記事»
ページ
↑先頭
ホーム