WordPressでデバイス（モバイル・PC）ごとに表示を変える方法！

仙台・宮城の皆さんこんにちは！

今日はWordPressで便利な小技を一つ。WordPressでデバイス（モバイル・PC）ごとに表示を変える方法です。具体的には、

• モバイルサイトでは表示したいけど、PCでは非表示にしたい！
• PCサイトとモバイルサイトのボタンのデザインを変えたい！

といった時にとても便利な方法です。では、早速。

<?php if ( wp_is_mobile() ) : ?>
  //モバイルサイト用のコンテンツ
  <div id="image"><img src="/mobile_image.jpg"></div>
<?php else: ?>
  //PCサイト用のコンテンツ
  <div id="image"><img src="/pc_image.jpg"></div>
<?php endif; ?>

何となくわかりますね。

if ( wp_is_mobile() ) はデバイスが「モバイルなら」ということです。そしてelseはモバイル以外なら、つまり「PCなら」ということです。

ちょっと応用

どちらか片方だけ表示させたい場合です。空白にしちゃえばいいんですが、なんかすっきりしません。

モバイルだけ表示する場合

モバイルサイトだけ表示させたい場合は、以下のようにします。

<?php if ( wp_is_mobile() ) : ?>
  //モバイルサイト用のコンテンツ
  <div id="image"><img src="/mobile_image.jpg"></div>
<?php endif; ?>

PCだけ表示する場合

逆にPCサイトだけに表示させたい場合は、論理演算子の!を使って否定します。

<?php if ( !wp_is_mobile() ) : ?>
  //PCサイト用のコンテンツ
  <div id="image"><img src="/pc_image.jpg"></div>
<?php endif; ?>

CSSでする場合

通常（ワードプレス以外）、下記のようにブラウザの横幅を検知して、CSSのdisplay: none;で済ませる方法が一般的です。

@media only screen and (min-width: 680px) {
  #image{
    display: none;
  }
}

上記の例では「ブラウザの幅が680px以上なら非表示」にするという記述です。680pxつまり「PCで表示する場合は非表示」となるわけです。

もちろん、CSSでも大丈夫ですが、wp_is_mobile()を使った方がスマートな感じがしますね。

まとめ

現在はレスポンシブ化が標準化されています。WordPressを使ったサイトではぜひ使ってみてください。

それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！