WordPressでは「条件分岐」というものを使って様々な条件に応じて部分的に表示させたりさせなかったりということができます。
今回ご紹介するのはスマホとパソコンで表示させたいものを変える方法です。
パソコンとスマホのテーマ自体を分けてる場合はいいんですが、レスポンシブウェブデザインではかなり活躍しますよ。
スマホかパソコンかという条件で分岐させる
「wp_is_mobile」という関数がありますのでこれで条件分岐させます。
1 2 3 4 5 | <?php if (wp_is_mobile()) :?>スマホで表示したいものをここに入れる<?php else: ?>パソコンで表示したいものをここに入れる<?php endif; ?> |
使い方としては例えば、パソコンでは幅336pxの広告を貼りたいけどスマホではディスプレイサイズ的に貼ることができないため幅300pxの広告を仕方なく貼っているという場合。is_mobileを使えばそれぞれに適したサイズの広告を貼ることが可能になります。
他にもLINEに送るボタンはスマホだけに表示したいとか。アイデア次第で様々な用途に使えます。
ちなみに、「パソコンではこれを表示、スマホでは非表示」という場合は空のままにすればおっけーです。
タブレットもパソコン側に含めたい場合
wp_is_mobileはそのまま使うと「スマホ＆タブレットとそれ以外」という分け方になってしまいます。つまりタブレットがスマホの仲間になってしまうのです。
ディスプレイの大きさ的に「スマホとそれ以外」という分け方をしたいことの方が多いんじゃないかと思うので、そのときの解決法をご紹介します。
まず下記の記述をfunctions.phpに追記します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | function is_mobile(){ $useragents = array( 'iPhone', // iPhone 'iPod', // iPod touch 'Android.*Mobile', // 1.5+ Android *** Only mobile 'Windows.*Phone', // *** Windows Phone 'dream', // Pre 1.5 Android 'CUPCAKE', // 1.5+ Android 'blackberry9500', // Storm 'blackberry9530', // Storm 'blackberry9520', // Storm v2 'blackberry9550', // Storm v2 'blackberry9800', // Torch 'webOS', // Palm Pre Experimental 'incognito', // Other iPhone browser 'webmate' // Other iPhone browser ); $pattern = '/'.implode('|', $useragents).'/i'; return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);} |
この記述、無料のWordPressテーマ「STINGER5」に書かれていたものを拝借しました。
そして、下記の記述をテンプレートファイル内に入れます。
1 2 3 4 5 | <?php if (is_mobile()) :?>スマホで表示したいものをここに入れる<?php else: ?>パソコンで表示したいものをここに入れる<?php endif; ?> |
最後に
スマホ用のテーマを別に用意してる人であればこの手の条件分岐はさほど必要ないんですが、レスポンシブウェブデザインのテーマを使ってる人はかなり便利だと思います。
個人的にはかなり多用する条件分岐です。興味ある方は使ってみてください。