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

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

スマートフォンなどのモバイル端末にWebサイトを対応させるのに、CSS3のMedia Queries(メディアクエリ)を使って、レスポンシブデザインにすることが多いと思います。しかし、Google Adsenseなどの広告は表示がはみ出てしまったりします。

スマートフォンなどのモバイル端末には、別の表示にしたり、ブラウザ別に表示を変えたい時があるのではないでしょうか?例えば、PCサイトでGoogle Adsenseの728×90を使っているけどiPhoneやAndroidなどのモバイルでは、レイアウトが崩れるので300×250に変えたいな等です。

今回の投稿では、WordPressでスマートフォン別、ブラウザ別に条件分岐する方法を集めました。

スマートフォン・タブレット端末

スマートフォン・タブレット端末別の条件分岐方法です。

モバイル端末で表示を変えるwp_is_mobile()

PCブラウザ以外のモバイル端末に条件分岐し、コンテンツを表示するには、WordPressの3.4から実装された条件分岐タグwp_is_mobile()を使うことで実現できます。

ただし、この関数では、iPhoneなどのスマートフォンからiPad、Kindleなどのタブレット型端末まで含まれます。

スマートフォンで表示を変える

iPad、Kindleなどのタブレットは表示領域が広いので、PCサイトと同じような表示をさせたい時もあると思います。タブレット端末を除いて、スマートフォンに表示させたい時は、functions.phpを使用して新たに関数を作ります。

上記のコードを記述することで、スマートフォンの条件分岐ができるようになります。

iPhoneへ条件分岐$is_iphone

iPhoneへ条件分岐する時は、WordPressで用意されている変数$is_iphoneを使うことで可能です。変数$is_iphoneはブラウザのユーザエージェントを調べ、iPhone(’safari’および’mobile’の両方が含まれている)ならばtrueを返し、そうでない場合falseとなります。

iPadへ条件分岐

iPadの場合はfunctions.phpにコードを追加して関数で扱えるようにします。

上記のコードを記述して、条件分岐したいところで、下記コードを使います。

Kindleへ条件分岐

iPadと同様functions.phpにコードを追加して関数が扱えるようにします。

上記のコードを記述するして、条件分岐したいところで下記コードを使います。

Android・BlackBerry

上記のiPadとKindleと同じようにiPadKindle記述してある部分をAndroidもしくは、BlackBerryに変更すればいけるんじゃないでしょうか。

ブラウザ別

ブラウザ別条件分岐方法です。WordPressで用意されている変数を使えばとっても簡単にできます。

Chromeへ条件分岐$is_chrome

ブラウザがChromeか調べます。

Geckoへ条件分岐$is_gecko

ブラウザがGeckoか調べます。

IEへ条件分岐$is_IE

ブラウザがIEか調べます。またIEでは、macとWindowで分けることもできます。

macのIEへ条件分岐$is_macIE

ブラウザがmacIEか調べます。

WindowsのIEへ条件分岐$is_winIE

ブラウザがWindowsIEか調べます。

Lynxへ条件分岐$is_lynx

ブラウザがLynxか調べます。

Netscape 4.xへ条件分岐$is_NS4

ブラウザがNetscape 4.xか調べます。

Operaへ条件分岐$is_opera

ブラウザがOperaか調べます。

Safariへ条件分岐$is_safari

ブラウザがSafariか調べます。

あとがき

他にもこんな方法があるよなど、あったら教えてください。私のサイトはレスポンシブにして、スマートフォンとPCで表示させたくない部分をdisplay: none;するのがなんかやだなと思ったので条件分岐させてます。

しかし、スマートフォンでちゃんと表示されるときはされるんですが、何回かアクセスしてみると、たまに表示がうまくいってない時があるんですよね。プラグインの影響かな

Comments are closed.