仙台・宮城の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を使ったサイトではぜひ使ってみてください。
それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならダテナまで！宮城県外の方も大歓迎です！
