WordPress で PC・スマートフォン・タブレットを見分ける関数:wp_is_mobile() ではタブレットもスマホ扱いになる問題を User-Agent で分ける

広告WordPress・PHP を学べる本

Amazonのアソシエイトとして、WordPress functions.phpは適格販売により収入を得ています。

概要説明

WordPress の wp_is_mobile() はタブレットもスマートフォンと同じに扱います。User-Agent で PC・スマホ・タブレットの 3 つに分ける functions.php の関数と、Android タブレットが PC になる・TCD のテーマと名前がぶつかるという前の書き方の問題を、試した結果つきで。

WordPress には wp_is_mobile() という見分けの関数があります。

ただし、wp_is_mobile() は「PC か、PC でないか」しか分かりません。タブレットもスマートフォンと同じ「モバイル」になります。

スマートフォンだけに広告やフッターのボタンを出したいときは、User-Agent(ブラウザが送ってくる名前)を見て、自分で分けます。

functions.php
/*----------------------------------------------------
 PC・スマートフォン・タブレットを見分ける(User-Agent)
 戻り値:'smartphone' / 'tablet' / 'pc'
----------------------------------------------------*/
function my_device_type() {
	static $type = null;
	if ( null !== $type ) {
		return $type;
	}

	$ua = isset( $_SERVER['HTTP_USER_AGENT'] ) ? (string) $_SERVER['HTTP_USER_AGENT'] : '';

	if ( preg_match( '/iPhone|iPod|Android.*Mobile|Mobile.*Firefox|Windows Phone/i', $ua ) ) {
		$type = 'smartphone';
	} elseif ( preg_match( '/iPad|Android|Silk\/|Kindle|Tablet/i', $ua ) ) {
		$type = 'tablet';
	} elseif ( isset( $_SERVER['HTTP_SEC_CH_UA_MOBILE'] ) && '?1' === $_SERVER['HTTP_SEC_CH_UA_MOBILE'] ) {
		$type = 'smartphone';
	} else {
		$type = 'pc';
	}

	return $type;
}

function my_is_smartphone() {
	return 'smartphone' === my_device_type();
}
書き方 役目
my_device_type() 'smartphone'・'tablet'・'pc' のどれかを返す
static $type 1 回のページの表示で何度呼んでも、見分けは 1 回だけにする
iPhone|iPod|Android.*Mobile|Mobile.*Firefox スマートフォンの名前。Android は「Mobile」が付くとスマートフォン
iPad|Android|Silk/|Kindle|Tablet タブレットの名前。「Mobile」が付かない Android はタブレット
HTTP_SEC_CH_UA_MOBILE が ?1 名前で分からないとき、Chrome などが送る「モバイルです」の印(Sec-CH-UA-Mobile)を見る
my_ を付けた名前 テーマやプラグインの関数と名前がぶつからないようにする

TCD のテーマの functions.php には、前にこの記事で紹介したものと同じ is_mobile() が入っています。同じ名前の関数を functions.php に足すと、エラーで画面が真っ白になります。自分で足す関数は my_ のような頭の文字を付けます

使い方と、前の書き方との違い

テーマのテンプレート
<?php
switch ( my_device_type() ) {
	case 'smartphone':
		// スマートフォンのとき
		break;
	case 'tablet':
		// タブレットのとき
		break;
	default:
		// PC のとき
}

// スマートフォンだけを見分けたいとき
if ( my_is_smartphone() ) {
	get_template_part( 'template-parts/footer-bar' );
}

前の書き方との違い

前はこの記事で、is_mobile() でスマートフォンを見分け、wp_is_mobile() と組み合わせてタブレットを見分ける書き方を紹介していました。

ところ 前の書き方 今の書き方
Android のタブレット(Chrome) PC になった。Chrome が「モバイルではない」の印(Sec-CH-UA-Mobile: ?0)を送るので、wp_is_mobile() が false を返すため タブレットになる
関数の名前 is_mobile()。TCD のテーマと同じ名前で、function_exists() があるとテーマの関数が使われ、ないとエラーになる my_device_type()・my_is_smartphone()
見分ける名前の一覧 dream・CUPCAKE・webOS・BlackBerry など、今は使われていない端末の名前が多い 今の端末の名前だけ
呼び方 2 つの関数を組み合わせる 1 つの関数で 3 つに分かれる

確かめた結果

このサイトの作業環境(WordPress 7.1.3・PHP 8.3)で、いろいろな端末の User-Agent を入れて試しました。

端末 今の書き方 前の書き方
iPhone(Safari) smartphone smartphone
Android スマホ(Chrome・Firefox) smartphone smartphone
Android タブレット(Chrome) tablet pc(まちがい)
Android タブレット(Firefox) tablet tablet
iPad(iPadOS 12 まで) tablet tablet
iPad(iPadOS 13 から) pc pc
Kindle Fire(Silk) tablet tablet
Windows・Mac pc pc
Googlebot(スマホ) smartphone smartphone
User-Agent なし pc pc

気をつけること

こと 説明
iPadOS 13 からの iPad Safari が Mac と同じ名前を送るので、PHP では Mac と見分けられません。PC として扱われます
ページのキャッシュ キャッシュのプラグインを使うと、最初に見た端末の画面がほかの端末にも出ることがあります。スマートフォン用のキャッシュを分ける設定にするか、見分けを使うページをキャッシュから外します
見た目だけを変えたいとき 文字の大きさや並び方だけなら、PHP で見分けず、CSS のメディアクエリ(画面の幅)で変えるほうが確かです

PHP で見分けるのは、広告のコードやボタンのように「出す・出さない」を変えたいときに向いています。

関連機能

  1. 日本語を含むファイル名のファイルをアップロードした時に自動的にリネームさせる

  2. Contact Form 7 で NG ワードと「ひらがなが入っているか」でスパムを弾く(必須の欄は textarea* にも付ける)

  3. WordPress のダッシュボードに「更新」ボタンを足して、押した日を最終更新日として表示する:同じ日時で CSS のキャッシュも消す

サイドバー

よく使うカスタマイズ

最近の記事

  1. Fstyle Final Output Replacer のルールの一覧(generator タグを消す 2 つのルール)

Profile

PAGE TOP