WorpdressでPC・スマホ・タブレットをPHPを利用して切り替える方法

WordPressをカスタマイズしていると、PC・スマホ・タブレットで表示や動作を切り替えたいということがたまにあります。

プラグインを利用して切り替える方法もありますが、今回はPHPのみで切り替える方法について見ていきましょう。

スポンサーリンク




モバイル端末(スマホ+タブレット)を判別して切り替える

wp_is_mobile()タグを使用することでモバイル端末(スマホ+タブレット)を判別することができます。

以下のコードをテンプレートに記述してみましょう。

<?php if (wp_is_mobile()) :?>
	<h1>スマホ・タブレットの場合に表示されるテキスト</h1>
<?php else: ?>
	<h1>PCの場合に表示されるテキスト</h1>
<?php endif; ?>

それぞれの表示を確認してみます。

【PCで見た場合】

【スマホで見た場合】

【タブレットで見た場合】

PCから見た場合は「PCの場合に表示されるテキスト」が表示され、スマホとタブレットから見た場合は「スマホ・タブレットの場合に表示されるテキスト」が表示されていますね。

スマホのみ判別して切り替える

wp_is_mobileタグではスマホだけではなく、タブレットも含むモバイル端末を判別しました。

しかしタブレットはスマホと比べて画面のサイズも大きいため、タブレットでもPCと同じ表示にしたいという場合がありますね。

その場合はスマホのみを判別して切り替える方法を使用します。

WordPressにはスマホのみを判別するためのタグが用意されていないため、自作の関数を作成します。

functions.phpis_mobile関数を作成しましょう。

function is_mobile(){
	$useragents = array(
		'iPhone',          // iPhone
		'iPod',            // iPod touch
		'Android',         // 1.5+ Android
		'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 if (is_mobile()) :?>
	<h1>スマホの場合に表示されるテキスト</h1>
<?php else: ?>
	<h1>PC・タブレットの場合に表示されるテキスト</h1>
<?php endif; ?>
【PCで見た場合】

【スマホで見た場合】

【タブレットで見た場合】

スマホから見た場合には「スマホの場合に表示されるテキスト」が表示され、PC・タブレットから見た場合には「PC・タブレットの場合に表示されるテキスト」が表示されていることがわかりますね。

以上、WorpdressでPC・スマホ・タブレットをPHPを利用して切り替える方法でした。

参考)
WordPress:PCとスマートフォンでコンテンツを切り替えたい際に便利なwp_is_mobile関数+α

Wordpressの中級者以上を目指すなら

Wordpressの中級者以上を目指すのであればオンラインスクールもおすすめです。

筆者も講師(メンター)の一人ですが、オンラインスクールの一つ「Techacademy」ではWordpressをカスタマイズするために必要なカリキュラムが用意されています。

オンラインブートキャンプ WordPressコース

Wordpressにも利用されているPHPを利用してWebアプリケーションを開発してみたい方には「PHP/Laravelコース」がおすすめです。

オンラインブートキャンプ PHP/Laravelコース
スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする