ネットで話題のニュースを紹介

【WordPress】パソコン・タブレット・スマートフォンで表示を振り分ける条件分岐タグ

ブログの表示をスマートフォンやタブレット用に最適化する場合、Media Queries(メディアクエリ)を使ってレスポンシブデザインにすることが多いと思います。

WordPress(ワードプレス)

しかし、メディアクエリだけではデバイスによって要素を変更したり消したりすることは難しいです。そんな時、WordPressの条件分岐を使うと、利用している環境によって表示を変えることが可能になります。

スマートフォン・タブレット端末用の条件分岐

WordPressの3.4から実装された条件分岐タグ「wp_is_mobile()」を使うとモバイル端末で条件分岐できます。

が、上記の関数はiPhoneなどのスマートフォンからiPad、Kindleなどのタブレットまで全て含まれてしまいます。スマホとタブレットでは解像度も全く違うので、これだとちょっと使い勝手が悪いかもしれません。

タブレット端末を除いてスマートフォンにだけ対応させたい時は、functions.phpを使って新たに関数を作ります。

functions.phpに下記を記述します。

表示させたいテンプレートに下記を記述します。

これでスマートフォン向けの条件分岐ができるようになります。

コードは下記のサイトを参考にさせて頂きました。元記事では、さらにブラウザや端末別に振り分ける方法などが細かく紹介されております。

参考サイト:WordPress条件分岐、スマートフォンとブラウザ別に表示を変える方法

関連する記事

コメント

※コメントは承認制のためすぐには反映されません。