WP Super Cacheとwp_is_mobile関数の組合せに注意、PCでスマホ用のCSSが反映

Googleがスマートフォン対応・非対応をランキング要因にした』ことで、Webサイトをスマートフォン対応にした方も多いと思います。

しかし、WordPressプラグイン「WP Super Cache」を使用している状態で、次のようにwp_is_mobile関数でパソコンとスマートフォンの表示を分けている場合は、注意が必要です。

<?php if (wp_is_mobile()): ?>
	<!--スマートフォン用CSS-->
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" />
	<link rel="stylesheet" href="http://webcommu.net/wp-content/themes/sample/mobile.css">
<?php else: ?>
	<!--パソコン用CSS-->
	<link rel="stylesheet" href="http://webcommu.net/wp-content/themes/sample/style.css">
<?php endif; ?>

なぜ、注意が必要かというと、パソコンでWebサイトを見ると、突然、スマートフォン用の画面が表示されることがあるからです。

pc-mobile-css-view

▲パソコンでWebコミュのトップページを表示した時に、スマートフォン用CSSが読み込まれた様子です。

原因

この原因となるのが、WP Super Cacheによって生成される「ページ・キャッシュ」です。

ページ・キャッシュとは

通常、WordPressのWebサイトを開くときは、裏で「PHPからHTMLを生成する処理」が行われています。

しかし、ページを開く度に、この「PHPからHTMLを生成する処理」を行っていたら、表示に時間がかかります。

その問題を解決するために、あらかじめ、HTMLをサーバー側に「ページ・キャッシュ」として保持し、次回からは、キャッシュからHTMLを読み込み、Webサイトを表示します。

「PHPからHTMLを生成する処理」する工程がなくなるので、ページの表示が高速化するという訳です。

pc-mobile-css-cache

パソコンでスマートフォン用のHTMLが表示される問題

WordPressプラグイン「WP Super Cache」は、ページ・キャッシュを一定期間、サーバーに保持する働きがあります。

もし、スマートフォンでWebサイトを開くと、一定期間、スマートフォン用のHTMLをキャッシュします。

そして、スマートフォン用のHTMLがキャッシュされている期間に、パソコンでWebサイトを開くと、スマートフォン用のHTMLがキャッシュから読み込まれます。

スマートフォン用のHTMLのキャッシュが保持

つまり、一旦、スマートフォン用のHTMLがキャッシュされると、有効期限まで、スマートフォン用のHTMLが読み込まれてしまいます。

解決方法

WP Super Cacheを停止するのが手っ取り早い解決方法ですが、Webサイトの表示高速化のために、できるだけ使いたい。

WP Super Cacheを停止せずに、この問題を解決するためには、「functions.php」と「header.php」と「WP Super Cacheの設定」の3つを変更すればOKです。

1、functions.phpに追加

まずは、モバイル判定する端末を指定します。

functions.phpに次の記述を追加することで、モバイルと判定する端末を指定しています。

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']);
	}

※functions.phpを変更するときは、必ずバックアップを行いましょう。万が一、ファイルを更新した後、画面が真っ白になっても、すぐにFTPソフトで変更前の状態に戻すことができるように、準備することをオススメします。

2、header.phpを変更

パソコンとスマートフォンの表示を分けているwp_is_mobile関数をis_mobile関数に変更します。( wp_is_mobile() を is_mobile() に変更 )

変更前

<?php if (wp_is_mobile()): ?>
	<!--スマートフォン用CSS-->
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" />
	<link rel="stylesheet" href="http://webcommu.net/wp-content/themes/sample/mobile.css">
<?php else: ?>
	<!--パソコン用CSS-->
	<link rel="stylesheet" href="http://webcommu.net/wp-content/themes/sample/style.css">
<?php endif; ?>

変更後

<?php if (is_mobile()): ?>
	<!--スマートフォン用CSS-->
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" />
	<link rel="stylesheet" href="http://webcommu.net/wp-content/themes/sample/mobile.css">
<?php else: ?>
	<!--パソコン用CSS-->
	<link rel="stylesheet" href="http://webcommu.net/wp-content/themes/sample/style.css">
<?php endif; ?>

3、WP Super Cacheの設定を変更

左メニューの設定から「WP Super Cache」を選んでください。

pc-mobile-css-set

下にスクロールして、「除外するユーザーエージェント」の設定項目を見つけてください。

この項目には、WP Super Cacheでキャッシュしないユーザーエージェントを追加します。今回は、iPhone、Androidなどのモバイル機器をキャッシュしないように設定します。

pc-mobile-css-set2

次の記述を追加します。(既に記述されているユーザーエージェントは削除しないでください。)

最後に「UA文字列を保存」ボタンをクリックすると完了です。

iPhone
iPod
Android.*Mobile
Windows.*Phone
dream
CUPCAKE
blackberry9500
blackberry9530
blackberry9520
blackberry9550
blackberry9800
webOS
incognito
webmate

これで、スマートフォンでWebサイトにアクセスしても、WP Super Cacheでスマートフォン用のHTMLはページ・キャッシュされません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

サラリーマンをしながら、当ブログを運営しています。今まで、数々のWebサイト・ブログを構築してきました。このブログでは、今までの経験で得た知識を活かし、Web制作・SEO関連を中心に、最新のIT関連ニュースを発信していきたいと思います。