投稿日：2013年11月18日
更新日：2017年6月6日
目次
表示スピードアップに繋がる
スマートフォンは、ウィンドウサイズも小さく、表示スピードも遅い場合が多いので、PCで表示させる内容を全てスマホに表示させるのは、得策ではありません。
特に、PCサイトだけで、利用しているjsはスマホで読み込ませると、表示スピードの大幅なロスにつながります。
そこで、PCとスマホサイトで表示内容を変更する方法をご紹介します。
function.phpに以下を追加する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// ユーザーエージェント切り替え function is_mobile(){ $useragents = array( 'iPhone', // iPhone 'iPod', // iPod touch 'Android', // 1.5+ Android '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']); } |
テンプレートに書く内容
|
1 2 3 4 5 6 7 |
<?php if(!is_mobile()) { ?> PCの場合表示 <?php } else { ?> スマホの場合表示 <?php } ?> |
!is_mobile ← !をつけることで、モバイルじゃない場合という意味になります。
サイトの趣旨によって、PCサイトをそのまま表示していたり、WPtouch Pro 3などのプラグインを利用して、自動生成する場合もありますが、
作ったブログやサイトで、スマホには出す要素を厳選すると、情報がすっきりして、表示スピードも早い見やすいページになるかと思います。
他にもwordpressの高速化に関する記事を書きましたのでどうぞ。