WordPress(賢威)でスマホのみ・PCのみで表示内容を分岐する方法【HTML】 | LIVE YOUR LIFE

WordPress(賢威)でスマホのみ・PCのみで表示内容を分岐する方法【HTML】

 

WordPressサイトをスマホ表示に対応させる際に、スマホ閲覧時のみもしくはPC閲覧時のみ表示する内容を変更したい場合があると思います。

今やサイト運営において必須とも言える『レスポンシブ対応』を検討する際にも、そうして閲覧媒体によって表示内容を変更する必要性が出てくることでしょう。

 

例えば、当サイトであればフッター部分をPCでのみ表示させていたり、表示されるヘッダー画像をPCとスマホで分岐していたりと、色々な部分でレスポンシブ対応を意識したカスタマイズを行なっています。

 

PCとスマホでサイトの横幅が変わってくるのはもちろんですが、その分スマホの方が縦スクロールの幅が長くなったり、それぞれの特徴によってサイトの見栄えも変わってくるんですね。

そうして閲覧媒体の違いによって生まれる差に対応するのがレスポンシブ対応ということになりますが、ここのところで手を抜いてしまうと意外な落とし穴にもはまりかねません。

 

PCではサイトが綺麗に表示されているのに、スマホで見ると表示が崩れてしまっていたり。

なんだか横幅がうまく整えられておらず、スマホ画面から項目がはみ出してしまっていたり。

 

そうしてユーザーに対して不快な思いを抱かせてしまうことは、Googleからの評価が下がってしまうことはもちろんですが、何よりもサイト運営者としての配慮が不足していることの現れとも言えるでしょう。

 

ユーザーにより快適にサイトを閲覧していただくためにも、ぜひとも抜かりなくウェブサイトをレスポンシブ対応させておくことをおすすめします。

今回は、そんなレスポンシブ対応に役立つ手法として、条件分岐を利用して閲覧媒体によって表示内容を変更する方法をお伝えしましょう。

 

レスポンシブ対応に便利な『条件分岐』タグ

 

HTML言語においてスマホとPCで表示内容を変える際には、『条件分岐』タグが非常に役立ちます。

 

CSSのdisplay: none;を使うことによってスマホ表示に対応することもできますが、その場合一度表示させた内容を消すということになるため、基本的にはこの条件分岐タグを使用していくことをおすすめします。

 

今回使用していくのは、基本的に以下の2つの条件分岐タグ。

  • <?php if(wp_is_mobile()): ?>:スマホに対する条件分岐タグ
  • <?php if(!wp_is_mobile()): ?>:PCに対する条件分岐タグ

 

それぞれ同じコードに見えますが、『!』マークが入っているかいないかという差があるため、見逃さないように注意してくださいね。

それでは、それぞれの条件分岐タグの使い方について解説していきましょう。

 

スマホのみ表示したい場合

 

まず、スマホのみ表示させたい内容がある場合には、以下のように表示させたい部分をスマホに対する条件分岐タグで囲むようにしましょう。

 

当サイトでも使用している賢威6.2でフッターをスマホのみ表示させる場合には、以下のようにフッター部分のコードを条件分岐タグで囲みます。

 

上記のようにスマホにのみ表示させたい部分を『<?php if(wp_is_mobile()): ?>』と『<?php endif; ?>』で囲むことによって、次のように今回の例で言えばPC画面でフッターが表示されなくなります。

 

PCのみ表示したい場合

 

一方で、スマホには表示させずにPCのみ表示させたい内容がある場合には、以下のようにPCに対する条件分岐タグでコードを囲みます。

 

先ほどの条件分岐タグとの違いがわかりにくいかもしれませんが、『!』マークが入っている方がPCに対する条件分岐タグということになります。

 

それでは、今度はフッターをPCのみで表示させるために、フッター部分のコードをこの条件分岐タグで囲っていきましょう。

 

上記のようにPCにのみ表示させたい部分を『<?php if(!wp_is_mobile()): ?>』と『<?php endif; ?>』で囲むことによって、次のようにPC画面のみ次のようにフッター部分が表示されるようになり、スマホでは表示されなくなります。

 

スマホとPCで異なる内容を表示したい場合

 

ここまでお伝えしてきた内容を一度おさらいすると、

  • スマホのみ表示させたい場合

→表示させたい部分のコードを『<?php if(wp_is_mobile()): ?>』『<?php endif; ?>』で囲む

  • PCのみ表示させたい場合

→表示させたい部分のコードを『<?php if(!wp_is_mobile()): ?>』『<?php endif; ?>』で囲む

ということになります。

 

ちなみに、当サイトでフッター部分をPCでのみ表示させているのは、3列表示させている項目がスマホで閲覧した際にくずれてしまうためです。

このように、スマホとPCそれぞれの閲覧媒体によって、どのようにサイトが表示されるのか?ということを確認しながら、今回の条件分岐タグも使っていけると良いですね。

 

それでは最後に応用編として、スマホとPCでそれぞれ違う内容を表示させたいときに便利な条件分岐タグをご紹介しましょう。

 

スマホとPCでそれぞれ違う内容を表示させるには、以下のような条件分岐タグでコードを囲みます。

 

この方法は、例えばスマホとPCで異なるヘッダー画像を表示させたい時や、フッター部分をそれぞれ異なった内容で表示させたいときなどに便利です。

 

少しわかりにくい例かもしれませんが、当サイトでは以下のようにヘッダー部分に表示される画像を、スマホ・PCそれぞれの媒体によって変更されるように設定しています。

 

詳しく解説すると、ここではスマホで閲覧した際には<http://rikudesign.com/wp-content/uploads/2017/06/8c7b4f6d3120dfad8218a2e6e9e8a44a-8.jpeg>というヘッダー画像を表示させ、PCで閲覧した際には<http://rikudesign.com/wp-content/uploads/2017/06/2e985c155d16ad3e8758e904eb59535a.png>というヘッダー画像を表示させるようにしています。

 

それぞれ同じような画像ですが、サイズや寄せている部分などを微妙に変えています。

 

スマホ表示のヘッダー画像。

 

PC表示のヘッダー画像。

 

このように『<?php if(wp_is_mobile()): ?>』『<?php else: ?>』『<?php endif; ?>』でコードを囲むことによって、閲覧媒体ごとに表示させる内容を変更することができます。

レスポンシブ対応を意識する際にも非常に便利なコードなので、ぜひともご活用くださいね。

 

最後に

 

以上、WordPressサイトをスマホのみ・PCのみで表示内容を分岐する方法を解説しました。

 

今回は当サイトで使用しているWordPressテーマ『賢威』での例を解説しましたが、他のレスポンシブ対応テーマでも同様に利用させることができます。

 

レスポンシブ対応は昨今のウェブ業界でも常識となっており、正直これからの時代スマホ対応していないウェブサイトはあり得ないと言っても良いほどでしょう。

閲覧ユーザーのことを第一に考える『ユーザーファースト』が提唱されているように、パソコンだけでなくスマホでサイトを閲覧するユーザーのこともしっかりと考えたサイト運営を意識できると良いですね。

 

もちろん単純に文章の書き方などのライティング面においてもスマホユーザーを懸念するのは当たり前ですが、今回お伝えしたようにデザイン面においてもレスポンシブ対応はかなり大切な要素となってきます。

 

ぜひとも今回紹介した条件分岐タグを活用し、PCユーザーだけでなくスマホユーザーにも快適なウェブサイト運営を心がけていきましょう。

 

MAIL MAGAZINE

 

 

     
公開日:2017/06/22

コメントを残す

サブコンテンツ
FEATURED ARTICLE

TO THE TOP