みなさんこんにちは。
Webテロリストです。
つい先日この記事の前編として、
自動的にPCとスマホを認識させて、表示内容を振り分けるWordPress関数 -前編-「wp_is_mobile();」
という記事を公開しましたが、
今回はその続編です。
前回ご紹介した関数は「wp_is_mobile();」。
今回は「is_mobile();」。
違いは最初に「wp_」が付くか付かないか？
というところです。
さて、なぜ今回続編を書くかというと、
前回の「wp_is_mobile();」はiPadやNexus7など、
タブレット端末もモバイル端末として認識されてしまいます。
しかし、世の中の多くのレスポンシブデザイン対応のテーマは
タブレット端末をPCとして認識して表示されます。
つまり何が言いたいかというと、
例えば「wp_is_mobile();」を使ってヘッダー画像なんかを差し替えた場合、
サイト全体のレイアウトはPC版が表示されてるにも関わらず、
ヘッダー画像だけが、モバイル版の小さいものが表示されてしまうんです。
実際に僕のサイトをiPadで見てみると、
ヘッダー画像がスマホ用の物になってしまいます。
そこで登場するのが「is_mobile();」です。
この関数は「wp_is_mobile();」とは違い、
タブレット端末はPC端末として認識してくれます。
だったら、最初からコッチを教えてよ…
なんて言われてしまいそうなんですが、
どちらも良いところと悪いところがあるので、、、、
何をどう表示させたいのか？
ということを考えて選んで頂ければと思います。
それでは、具体的な設置方法の解説を始めたいと思います。
「wp_is_mobile();」とは少し手順が違うので間違えないで下さいね。
1.functions.phpの編集
ダッシュボードから、
「外観 ＞ テーマ編集」と進み、
[ テーマのための関数（functions.php）]をクリックして下さい。
そうすると、こんな訳の分からない呪文の様な画面が出ますが、
気にせずに、一番下までスクロールして下さい。
そして、赤のマーカーで示した一番最後の行に、
以下のコードをコピペして[ ファイルを更新 ]をクリック。
[php autolinks=”false” collapse=”false” firstline=”1″ gutter=”true” highlight=”” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”true” wraplines=”true”]
//—————————————————————————
// 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’]);
}
[/php]
これで下準備は完了です。
2.書き換えたい場所に以下のコードを書きます。
ここから先は「wp_is_mobile();」と同じで、
書き換えたい場所に以下のコードをコピペ。
一行目がwp_is_mobileからis_mobileに変わってるので、気をつけて下さいね。
[php autolinks=”false” collapse=”false” firstline=”1″ gutter=”true” highlight=”” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”true” wraplines=”true”]
<?php if (is_mobile()) :?>
スマートフォン用の文章をココに書きます。
<?php else: ?>
パソコン用の文章をココに書きます。
<?php endif; ?>
[/php]
3.Exec-PHPのインストール＆有効化
ダッシュボードから「プラグイン ＞ 新規追加」と進み、
「Exec-PHP」で検索してインストールと有効化をして下さい。
こちらも「wp_is_mobile();」の手順と同じです。
詳しくはコチラ↓の記事を参考にしてみて下さい！
→ 投稿・固定ページやウィジェットにPHPを埋め込めるプラグイン「Exec-PHP」
→ 自動的にPCとスマホを認識させて、表示内容を振り分けるWordPress関数 -前編-「wp_is_mobile();」
以上で「is_mobile();」の設定は完了です。
最初にお伝えしたように、
僕の場合、ヘッダー画像はこの「is_mobile();」を使って切り替えています。
最初はスマホ用のヘッダー画像が表示されていましたが、
今はPC用のヘッダー画像が表示されています。
いっそ、全部「is_mobile();」良いのでは？
って思うんですが、
僕の場合はiPadをモバイルとして認識して欲しい時と、
PCとして認識して欲しいときがあるので、
状況に応じて使い分けています。
そのあたりは、また今度改めて説明したいと思います。
最後までありがとうございました (^^)/
