【9/30】 お問い合わせで「お名前エラー」が発生する不具合を修正しました。 【サイト概要】IT用語に「ルビ」や「説明文」をつけて初心者の方にもわかりやすく丁寧に説明していきます。「サーバーの立て方」や「サイトの作り方」「カスタマイズ方法」が知りたい方はぜひ見ていってください。

WordPressにスマートフォン用の条件分岐関数を追加する方法

WordPressを端末で分岐処理の画像WPカスタマイズ
この記事は約11分で読めます。

 WordPress[※1]ワードプレスにはパソコンとモバイルの処理を分けるための関数「wp_is_mobile()ダブリューピー・イズ・モバイル」があり、サイトを閲覧している端末がモバイル端末だった場合は「TRUEトゥルー」、それ以外の端末だった場合は「FALSEフォールス」を返します。その戻り値を利用して端末の分岐処理を行います。
 しかし、「wp_is_mobile()」で分岐できるモバイル端末には「スマートフォン」の他に「タブレット」も含まれており、「パソコン」と「タブレット&スマートフォン」の二種類の分岐しかできません。
 そこで、「パソコン」「タブレット」「スマートフォン」の三種類の分岐を行うため、スマートフォン判別用の関数を作ります

※1WordPress
WordPress Foundationワードプレス・ファウンデイションによって開発されたオープンソース・ブログプラットフォーム。プログラム言語がわからなくても管理画面からサイトやブログの作成が可能。
スポンサーリンク

端末条件分岐用コード作成

 スマートフォン判別関数とそれを利用した、パソコン・スマートフォン・タブレットを分岐するための端末分岐用コードをご紹介します

スマートフォン判別関数コード

 WordPressで使用しているテーマの「functionsファンクションズ.php」を直接開くか、テーマファイルエディタを使用して下記のコードを追加してください。コードを追加するとスマートフォンだけを検知してくれる関数「is_mobile()」が使用できるようになります

function is_mobile() {
    $user_agent = array(
        'iPhone',
        'Android.*Mobile',
        'Windows.*Phone',
        'Mobile.*Firefox',
        'BlackBerry',
        'webOS',
        'Symbian'
    );
    $pattern = '/'.implode('|', $user_agent).'/i';
    return preg_match($pattern, getenv('HTTP_USER_AGENT'));
}

[2022/08/24]
 環境変数が取得出来ない場合にエラーが発生していたため、コードに使用されていた「$_SERVER[‘HTTP_USER_AGENT’]」を「getenv(‘HTTP_USER_AGENT’)」に変更しました。
(ボットやクローラーからのアクセスは環境変数が取得できない場合があります)
 環境変数が取得できない場合、「$_SERVER」はエラーが発生し、「getenv」はFALSEを返します。

WordPressでスマホ分岐コード追加の画像
クリックで画像拡大
  • 「functions.php」に間違ったコードを記述するとサイトが閲覧できなくなる可能性があります。閲覧できなくなった場合は、すぐに元の状態に戻してください。
  • 子テーマがある場合は、子テーマの「functions.php」に書き込むようにしてください。
  • 「functions.php」のパス(場所)は「/wp-content/themes/テーマディレクトリ/functions.php」となります

端末分岐コード

 実際に分岐したい位置に張り付けるコードは下記のPHPコードとなります。パソコン・タブレット・スマートフォンで分岐処理を実行したい位置に下記のコードを追加してください
(エディタに直接コードを記述することはできません。エディタでPHPを使いたい場合はコチラを参考にしてください)

<?php
if (is_mobile()) {
    // この位置にスマートフォンの処理を書き込んでください。
} elseif (wp_is_mobile()) {
    // この位置にタブレットの処理を書き込んでください。
} else {
    // この位置にパソコンの処理を書き込んでください。
}
?>

[広告での使用例()]
if (is_mobile()) {
    echo ‘スマートフォンにオススメの商品は〇〇!!’;
} elseif (wp_is_mobile()) {
    echo ‘タブレットにオススメの商品は〇〇!!’;
} else {
    echo ‘パソコンにオススメの商品は〇〇!!’;
}

※ 固定ページや投稿のエディタに、直接PHPコードを記述することはできません。
※ PHPをWordPressで使用するためには「functions.php」に自作の関数を追加し、ショートコードとして記述する必要があります。(PHPをWordPressで使用する方法は下記のリンクから)

端末条件分岐用コード解説

 スマートフォン判別関数コードと端末分岐コードの解説、使用したPHP関数や正規表現の説明をします。

スマートフォン判別関数コード解説

function is_mobile() { ← ユーザー定義関数「is_mobile」
$user_agent = array( ← 関数「preg_match」で使用する検索用文字列(正規表現)を「$user_agent」に代入する
    ‘iPhone’, ← 「iOS」の端末判別用
    ‘Android.*Mobile’, ← 「Android」の端末判別用
    ‘Windows.*Phone’, ← 「Windows Phone」の端末判別用
    ‘Mobile.*Firefox’, ← 「Firefox OS」の端末判別用
    ‘BlackBerry’, ← 「BlackBerry OS」の端末判別用
    ‘webOS’, ← 「webOS」の端末判別用
    ‘Symbian’ ← 「Symbian OS」の端末判別用
);
$pattern = ‘/’.implode(‘|’, $user_agent).’/i’; ← 関数「implode」で「$user_agent」を配列から文字列に変換する
return preg_match($pattern, getenv(‘HTTP_USER_AGENT’)); ← ユーザーエージェントを取得して「$pattern」にマッチした場合は「1」、しなかった場合は「0」を返す
}
WordPressで端末分岐コード解説の画像
クリックで画像拡大

【スマートフォン判別関数の仕組み】
① サイト閲覧者のユーザーエージェント[※1]を取得します。
② ユーザーエージェントに含まれている端末名やOS名がスマートフォン専用のものか判別します。
③ スマートフォンならば「1」それ以外の端末ならば「0」を返します。

※1ユーザーエージェント
本来はインターネットを閲覧する際のソフトウェアやハードウェアのことを指すが、「端末」や「ブラウザ」などの情報が記載されている文字列のことをユーザーエージェントと呼ぶことが多い。また、この情報は簡単に偽装できるため、スマートフォンでPC版サイトを閲覧することなどが可能。
(PC):Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:99.0) Gecko/20100101 Firefox/99.0
(スマホ):Mozilla/5.0 (iPhone; CPU iPhone OS 14_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1

端末分岐コード解説

if (is_mobile()) { ← スマートフォン判別
 ↑ スマートフォンを判別する
} elseif (wp_is_mobile()) { ← タブレット判別
 ↑ スマートフォン以外のモバイル端末を判別する
} else { ← パソコン判別
 ↑ スマートフォンとタブレット以外の端末を判別する
}

[端末分岐用コードの仕組み]

  1. サイト閲覧者のユーザーエージェントを取得します。
    この時点で、閲覧している端末の可能性は「パソコン」か「タブレット」か「スマートフォン」となります。
  2. 「スマートフォン判別関数」(スマートフォン判別)を使用して、「スマートフォン」の判別を行います。
    スマートフォンではない場合、閲覧している端末の可能性は「パソコン」か「タブレット」となります。
  3. WordPressの関数「wp_is_mobile」(スマートフォン&タブレット判別)を使用して、「タブレット」の判別を行います。
    タブレットではない場合、閲覧している端末は「パソコン」となります。

PHP関数解説

 スマートフォン判別関数と端末分岐のコードで使用したPHPの関数を簡単に解説します

※ わかりやすさを優先した説明のしかたをしています。公式の説明を確認したいかたはコチラ

ジャンプ
functionファンクション
【書き方】
function 任意の関数名(仮引数代入用変数){処理内容}
【説明】
・独自の関数を作成できる
・使用する際は「関数名(実引数)」で呼び出せる(実引数には仮引数に渡したいデータを指定する)
・「returnリターン」で返し値(戻り値)を指定できる
【仮引数代入用変数】
・任意の変数を指定すると、呼び出し時に指定した実引数が代入される
(結果)
function a($b){
$c=$b.’4’;
return $c
}
echo a(123);

1234
arrayアレイ
【書き方】
array(値1,値2…)
【説明】
・配列を作成する方法の一つ。
・キーを指定する場合は「キー => 値」の形で指定する
・特定の値を出力する際は「配列名[キー]」で出力できる
・他にも書き方は様々ある
・最後のカンマは省略可能
・キーを省略した場合は「0」~の数字(添字)がキーに指定される
(結果)
$a=array(b,c,d);echo $a[0];

b
ifイフ
【書き方】
if(条件){条件一致処理}elseif(条件){条件一致処理}else{条件不一致処理}
【説明】
・条件によって処理を分岐できる
・条件に一致した場合は処理を実行した後、ifから抜ける
・他にも書き方は様々ある
【elseif】
・新たな条件を追加したい場合は「elseifエルスイフ(条件)」を指定する
・上の条件から順番に判定される
【else】
・条件がすべて一致しなかった場合の処理を追加する場合は「elseエルス」を指定する
(結果)
if(1==2){
$a=’b’;
}elseif(2>1){
$a=’c’;
}else{
$a=’d’;
}
echo $a;

c
implodeインプロード
【書き方】
implode(区切り文字,配列)
【説明】
・配列の要素を「区切り文字」で連結できる
・区切り文字を省略した場合は区切り文字なしで連結する
・配列が空の場合は空の文字列となる
(結果)
$a=[‘1′,’2′,’3’];
$b=implode(“c”,$a);
echo $b;

1c2c3
preg_matchプレグ・マッチ
【書き方】
preg_match(検索ワード,検索対象,検索結果代入用変数,フラグ,オフセット)
【説明】
・正規表現を使った検索を行える
・マッチすれば「1」、マッチしなければ「0」、エラーがおきれば「false」を返す
・変数を指定した場合「一つ目のマッチ結果」が返される
・「すべてのマッチ結果」の配列が必要な場合はpreg_match_allプレグ・マッチ・オールを使用する
【検索ワード】
・正規表現を使用して検索ワードを指定する
【検索対象】
・検索対象の「文字列」や「変数」を指定する
【検索結果代入用変数】
・省略した場合は「1」「0」「false」のみ返される、変数を指定した場合は検索結果が配列で代入される
・配列のキー「0」がキャプチャ全体、キー「1」がキャプチャの一つ目のマッチ箇所となる
【フラグ】
・フラグを指定することで文字列のオフセットを返したり、マッチしなかったパターンをNULLとして通知することができる
【オフセット】
・省略した場合は先頭から検索する
・検索の開始位置をバイト単位で指定できる
(結果)
if(preg_match(‘/a(.+?)c/’,’abcdea1c’,$a)) {
$b=$a;
}
【例1】
echo $b[0];

abc
【例2】
echo $b[1];

b
getenvゲットエンブ
【書き方】
getenv(‘キー名’)
【説明】
・環境変数の値を取得できる
・環境変数の値が存在しない場合falseを返す
【キー名】
・「HTTP_USER_AGENT」でユーザーエージェントを呼び出せる
・他にも様々な環境変数を取得することができる
(結果)
$a=’https://’.getenv(‘HTTP_HOST’);echo $a;

https://wm-oboegaki.com/
.ドット
【書き方】
文字列.文字列
【説明】
・文字列を結合できる
(結果)
$a=’abc’;
$b=$a.’def’;
echo $b;

abcdef

正規表現解説

 スマートフォン判別関数と端末分岐のコードで使用した正規表現と修飾子を解説します

ジャンプ

正規表現

…|…
|で区切られたパターンのいずれかにマッチ。
(結果)
abc|def「abc」または「def」にマッチ
*
0回以上の繰り返し。最長マッチ。
(結果)
(a.*b)文字列「abcabc」の「abcab」にマッチ
.
任意の1文字にマッチ。改行以外。
(結果)
.すべての1文字にマッチ

修飾子

/…/i
マッチングにアルファベットの大文字と小文字を区別しない。
(結果)
‘/abc/i’「abc」や「AbC」などにマッチ

まとめ

 今回説明したコードを利用すると「パソコン」と「タブレット&スマートフォン」にしか分岐できなかった処理が、組み合わせかたによって「パソコン&タブレット」と「スマートフォン」など様々な分岐方法が実行できるようになります。
 管理人は、端末によってサムネイルのサイズや文字数を変更しています。他にも、主にデザインを変更するために利用しています。

タイトルとURLをコピーしました