【WordPress】PCとスマホ・タブレットで表示・非表示の条件分岐

WordPressサイトで、スマホ・タブレット・PC表示の振り分け

固定ページや投稿ページに直接PHPを書いて実行することができないので、ショートコードを利用するか、テンプレート内に記述します。

モバイル端末かを判別するwp_is_mobile()の記述

WordPressサイトで、「スマホ・タブレット」と、「PC」で表示させたい条件分岐のタグがこれ。

<?php if(wp_is_mobile()): ?>
ここにスマホ+タブレットに表示の画像や記事
<?php else: ?>
ここにPCに表示の画像や記事
<?php endif; ?>

PCのみに表示したい場合

<?php if(!wp_is_mobile()): ?>
ここにPCに表示の画像や記事
<?php endif; ?>

スマホ+タブレットに表示したい場合

<?php if(wp_is_mobile()): ?>
ここにスマホ+タブレットに表示の画像や記事
<?php endif; ?>

こうすることでPCとスマホ+タブレットで表示内容をかえることができます。

PCとスマホ+タブレットの違いは、関数の前に「!」を付けることで、「それ以外」といった使い方ができます。

「wp_is_mobile()」はタブレットを含めて判別するのですが、スマーフォンのみを判別する関数もあります。

画像や記事を表示したいサイズによっては内容を変更したいこともあると思います。また、cssで非表示(display:none;)にする方法もあるんですが、一旦読み込まれて消すのでこのタグがいいかと思います。

シェアする

フォローする