「wp_is_mobile」PC・スマホ画面で表示される内容を切り替える

screen-photo

WordPressをカスタマイズするときによく使うタグが「wp_is_mobile」です。このタグを使えばパソコンでWEBページを見たときの表示と、スマホでWEBページを見たときの表示を使い分けすることができます。

例えば、このようなときに使えるという便利なタグです。

  • 「パソコンとスマホで広告の種類を切り替えたい」
  • 「パソコンだけに表示したいパーツがある」
  • 「スマホだけに表示したいパーツがある」

SPONSORED LINK


photo by Luca Soldaini

コードを記述

書き方は簡単、以下のコードを表示させたい場所に追記するだけです。たったこれだけで表示切り替えが可能なんです。

<?php if ( wp_is_mobile() ) : ?>
スマホ・タブレットで表示したい内容
<?php else: ?>
パソコンで表示したい内容
<?php endif; ?>
<?php if ( wp_is_mobile() ) : ?>
  スマホ・タブレットで表示したい内容
<?php else: ?>
  パソコンで表示したい内容
<?php endif; ?>

このようにとっても簡単ですがひとつ気を付けたいことがあります。
スマホとタブレット端末の表示は一緒の扱いです。スマホとタブレット端末、iPhoneやKindle端末と分ける方法はあるにはあるようですが、その場合他にコードを追記する必要があります。

<?php if ( wp_is_mobile() ) : ?>
パソコンだけで表示したい内容
<?php endif; ?>
<?php if ( wp_is_mobile() ) : ?>
スマホ・タブレットだけで表示したい内容
<?php else: ?>

まとめ

このコードはよく使うので、自分の備忘録として記事にしてみました。便利なのに簡単なおすすめコードです。

関連記事




この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterでめちゃログをフォローしよう!