自動的にPCとスマホを認識させて、表示内容を振り分けるWordPress関数 -後編-「is_mobile();」

自動的にPCとスマホを認識させて、表示内容を振り分けるWordPress関数 -後編-「is_mobile();」のアイキャッチ画像

みなさんこんにちは。
Webテロリストです。

つい先日この記事の前編として、
自動的にPCとスマホを認識させて、表示内容を振り分けるWordPress関数 -前編-「wp_is_mobile();」
という記事を公開しましたが、
今回はその続編です。

前回ご紹介した関数は「wp_is_mobile();」
今回は「is_mobile();」

違いは最初に「wp_」が付くか付かないか?
というところです。

さて、なぜ今回続編を書くかというと、
前回の「wp_is_mobile();」はiPadやNexus7など、
タブレット端末もモバイル端末として認識されてしまいます。

しかし、世の中の多くのレスポンシブデザイン対応のテーマは
タブレット端末をPCとして認識して表示されます。

つまり何が言いたいかというと、
例えば「wp_is_mobile();」を使ってヘッダー画像なんかを差し替えた場合、
サイト全体のレイアウトはPC版が表示されてるにも関わらず、
ヘッダー画像だけが、モバイル版の小さいものが表示されてしまうんです。

実際に僕のサイトをiPadで見てみると、
ヘッダー画像がスマホ用の物になってしまいます。

wp_is_mobile();を使ってヘッダー画像を切替えた時のiPad画面

そこで登場するのが「is_mobile();」です。

この関数は「wp_is_mobile();」とは違い、
タブレット端末はPC端末として認識してくれます。

だったら、最初からコッチを教えてよ…
なんて言われてしまいそうなんですが、
どちらも良いところと悪いところがあるので、、、、

何をどう表示させたいのか?

ということを考えて選んで頂ければと思います。

それでは、具体的な設置方法の解説を始めたいと思います。
「wp_is_mobile();」とは少し手順が違うので間違えないで下さいね。

1.functions.phpの編集

ダッシュボードから、
「外観 > テーマ編集」と進み、
[ テーマのための関数(functions.php)]をクリックして下さい。

WordPress関数「is_mobile();」を使用するためのfunctions.php設定方法の図2

そうすると、こんな訳の分からない呪文の様な画面が出ますが、
気にせずに、一番下までスクロールして下さい。

WordPress関数「is_mobile();」を使用するためのfunctions.php設定方法の図3

WordPress関数「is_mobile();」を使用するためのfunctions.php設定方法の図4

そして、赤のマーカーで示した一番最後の行に、
以下のコードをコピペして[ ファイルを更新 ]をクリック。

//---------------------------------------------------------------------------
//	is_mymobile()の条件分岐指定
//---------------------------------------------------------------------------
function is_mobile(){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android.*Mobile', // 1.5+ Android *** Only mobile
'Windows.*Phone', // *** Windows Phone
'dream', // Pre 1.5 Android
'CUPCAKE', // 1.5+ Android
'blackberry9500', // Storm
'blackberry9530', // Storm
'blackberry9520', // Storm v2
'blackberry9550', // Storm v2
'blackberry9800', // Torch
'webOS', // Palm Pre Experimental
'incognito', // Other iPhone browser
'webmate' // Other iPhone browser
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

これで下準備は完了です。

2.書き換えたい場所に以下のコードを書きます。

ここから先は「wp_is_mobile();」と同じで、

書き換えたい場所に以下のコードをコピペ。
一行目がwp_is_mobileからis_mobileに変わってるので、気をつけて下さいね。

<?php if (is_mobile()) :?>
スマートフォン用の文章をココに書きます。
<?php else: ?>
パソコン用の文章をココに書きます。
<?php endif; ?>
3.Exec-PHPのインストール&有効化

ダッシュボードから「プラグイン > 新規追加」と進み、
「Exec-PHP」で検索してインストールと有効化をして下さい。

こちらも「wp_is_mobile();」の手順と同じです。

詳しくはコチラ↓の記事を参考にしてみて下さい!
 → 投稿・固定ページやウィジェットにPHPを埋め込めるプラグイン「Exec-PHP」
 → 自動的にPCとスマホを認識させて、表示内容を振り分けるWordPress関数 -前編-「wp_is_mobile();」

以上で「is_mobile();」の設定は完了です。

最初にお伝えしたように、
僕の場合、ヘッダー画像はこの「is_mobile();」を使って切り替えています。

最初はスマホ用のヘッダー画像が表示されていましたが、
今はPC用のヘッダー画像が表示されています。

is_mobile();を使ってヘッダー画像を切替えた時のiPad画面

いっそ、全部「is_mobile();」良いのでは?
って思うんですが、

僕の場合はiPadをモバイルとして認識して欲しい時と、
PCとして認識して欲しいときがあるので、
状況に応じて使い分けています。

そのあたりは、また今度改めて説明したいと思います。
最後までありがとうございました (^^)/

コメントを残す

サブコンテンツ

このページの先頭へ