WordPressでスマホ用の条件分岐を作成する方法【PC・タブレットを除外】

こんにちは、ヨッチです。

ワードプレスには、デフォルトでモバイル用の条件分岐が用意されています。
wp_is_mobile()という関数を使用すれば、PC・スマホを振り分けることが可能です。

ただし、wp_is_mobile()ではスマホ・タブレットは同じ端末として扱われます。
スマホとタブレットを分けたい場合は、別の関数が必要です。

そこで、この記事ではスマホ・タブレットを別の端末として振り分ける方法を紹介します。
柔軟に振り分けることができるので、覚えておくと便利ですよ。

スマホ用の条件分岐を作成する方法【PC・タブレットを除外】

WordPressでスマホ用の条件分岐を作成するには、functions.phpを編集します。

あまり慣れていないようであれば、ファイルをバックアップしておくと安心です。

準備ができたら、functions.phpを開きましょう!

「テーマのための関数(functions.php)」をクリック

この画面ですね。
ソースコードが表示されたら、一番下の行にコードを入力します。

一番下の行に追記して「ファイルを更新」をクリック

入力するコードはこちらです。

//スマホ表示分岐(PC・タブレット or スマホ)
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']);
}

コードBOXの右上にある「copy」を押せば、ワンクリックですべてコピーできます。
誤入力もなくなるので、試してみてくださいね。

このコードを追記しておくことで、is_mobile()という関数を使用できます。
それぞれの条件分岐は、こんな感じで使い分けることができます。

is_mobile()
「スマホ」のみに適用
!is_mobile()
「スマホ」以外に適用
つまり「PC・タブレット」に適用
wp_is_mobile()
「スマホ・タブレット」に適用
!wp_is_mobile()
「スマホ・タブレット」以外に適用
つまり「PC」のみに適用

is_mobile()を追加すれば、ここまで柔軟に条件分岐ができます。
デフォルトのwp_is_mobile()と併用すれば、さまざまなバリエーションで使用できるでしょう。

【まとめ】スマホ用の条件分岐で柔軟に対応できる!

wp_is_mobile()だけだと、なかなか痒い所に手が届かないことも多いです。
そこで活躍してくれるのが、ここで紹介したis_mobile()です。

先ほど紹介したコードをfunctions.phpに追記するだけで、すぐにis_mobile()を使用できます。

//スマホ表示分岐(PC・タブレット or スマホ)
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']);
}

今はレスポンシブデザインが当たり前となっています。
同じテーマでPC・タブレット・スマホが表示されるので、デバイスの振り分けは重要です。

デバイス振り分けの選択肢の1つとして、今回のような条件分岐があります。

僕はプログラマーではありませんが、知っておいて良かったと感じることが多いです。
というのも、ちょっとしたカスタマイズのときに使える機能だからです。

今後スマホなどを振り分ける予定があれば、とりあえず覚えておくだけでも良いと思いますよ。
作業を効率化できる手段は、1つでも多くストックしておきましょう!

WEBサイトは構築よりも運用のほうが重要

あなたもご存知のとおり、WEBサイトは作って終わりではありません。
むしろ、構築してからいかに運用するかのほうが重要です。

ワードプレスを習得することで、サイト運用のスキルアップにも繋がります。
世界で最も評価されているCMSを、今こそ使ってみませんか?

より深くワードプレスを学びたい方には、僕が磨きあげたノウハウをLINE講座で配信していきます。
初心者向けに優しく解説していくので、安心してくださいね。

僕が一方的に発信するだけでなく、メンバーの皆さんと交流できるような方法も検討中です。
興味があれば、以下の詳細ページをチェックしていただければと思います。

ヨッチヨッチ

僕と一緒に、ワードプレスを楽しく学んでいきましょう!

WPクエストWPクエスト

WPクエストの詳細を見る