アイディアボード

Just another WordPress site

Stingerのテーマをモバイル向けに更に軽量化する。

   

元々SEO対策とアフィリエイトに強いWordPressテーマ「Stinger」はユーザーエージェントでCSSを切り替えることで、同じHTMLで見た目を変えるレスポンシブテーマとなっており、スマホでも画面に収まる大きさで表示されるのですが、ファイルサイズの面で考えるとまだまだ改善の余地があるなと思い、カスタムしてみました。

ざっくりまとめると

  • サイドバー
  • SNSボタン

の読み込みを止めました。

[WP] wp_is_mobile と iPad と WP Super Cache の怖い関係 - @mekemokeより引用:

functions.php に is_mobile という関数を作って使うのが一番。

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
        'webmate' // Other iPhone browser
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

参考:【WordPress】User-agentを判定してモバイル用コンテンツを切り分け、検証する方法

上記コードを functions.php に書いて使います(少し修正しています)。

これでも willcom や google phone に対応できてないのですが、アクセス解析のユーザーエージェントを確認して追加していくくらいでいいのかなあと。

【WordPress】User-agentを判定してモバイル用コンテンツを切り分け、検証する方法より引用:

実装サンプル

実装は至って単純。


	/*【スマホ向けコンテンツの処理】*/

	/*【PC向けコンテンツの処理】*/

こんな感じで行ける。

WordPress3.4以降の場合

ちなみに現在最新のWordPress3.4では「wp_is_mobile」という関数が追加になっていて、上記と同じような動きをする。ただし、「wp_is_mobile」はiPadからのアクセスもモバイル端末からのアクセスと判定するため、iPadではスマホ向けコンテンツを表示したくない場合は上記の実装をする必要がある。

 - 解説記事