WordPressでスマホとPCで表示する内容を変える
WordPressサイトで、スマホ対応する時に、スマホ閲覧時だけ表示する項目を変更したいこともあると思います。
たとえば、記事の最後に載せる関連記事リンクや、フッターにカテゴリー一覧やアーカイブなどを載せている時に、スマホでは消したいこともあります。
また、スマホでは横幅が制限されるため、見出しの文字数や訴求文を変えたい時もあります。
そんな時に役立つのが条件分岐です。
この時は、記事やページごとに異なる広告を表示したい時などに使えるものとして紹介しましたが、スマホに対する条件分岐タグもあります。
<?php wp_is_mobile(); ?>
これがスマホに使える条件分岐です。
なお、この条件分岐タグは、タブレット端末もモバイルとして判定されます。
CSSのdisplay: none;で非表示にする方法もありますが、この場合、一度表示してから消す形になりますので、wp_is_mobileを使うのが良いと思います。
wp_is_mobileの使い方
スマホとPCで異なるものを表示したい場合
<?php if(wp_is_mobile()): ?>
ここにスマホに表示したいものを書く
<?php else: ?>
ここにPCに表示したいものを書く
<?php endif; ?>
このようにすると、スマホとPCで異なるものを表示することができます。
スマホのみ表示したい場合
<?php if(wp_is_mobile()): ?>
ここにスマホに表示したいものを書く
<?php endif; ?>
こうすることで、スマホのみに表示されます。PCでは読み込まれません。
PCのみ表示したい場合
<?php if(!wp_is_mobile()): ?>
ここにPCに表示したいものを書く
<?php endif; ?>
こうすることで、PCのみに表示されます。スマホでは読み込まれません。
スマホのみ表示するタグと同じに見えるかもしれませんが、wpの前に「!」が入っています。
スマホの条件分岐タグを使った場合は、必ず、PCとスマホの両方でブラウザチェックしてください。スマホのブラウザチェックはChromeが便利です。
SEO的な注意点
wp_is_mobileを使うことで、PCとスマホの表示内容を変えることができますが、重要な部分について変更するのはやめたほうが良いでしょう。
モバイルは一度に見られる情報量が少ないですし、見せる必要がないものもあると思いますが、自分の都合でどんどん消していくと、検索順位に影響が出るかもしれません。
4/21にスマホアルゴが導入される予定です。スマホ専用の検索エンジンになると、スマホに表示されている物が評価の対象になることもあるでしょう。
SEOの視点でwp_is_mobileを使うのはやめましょう。
