トップページ > WEB制作 > WordPressでデバイス(モバイル・PC)ごとに表示を変える方法!
WordPress

WordPressでデバイス(モバイル・PC)ごとに表示を変える方法!

仙台・宮城のWEB担当者の方、こんにちは!今日は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を使ったサイトではぜひ使ってみてください。

それではまた!仙台・宮城でのホームページ制作やサイトリニューアルならダテナまで!宮城県外の方も大歓迎です!

関連記事

カテゴリ

タグクラウド