WPtouchをAndroid 4.1 Jelly Beanに対応させてみる

　先日買ったXperia Vで自分が管理しているサイトにアクセスしてみたら何だか表示がおかしい。本文だけが表示され、サイトの表示が崩れてしまっている。調べてみたら、どうやらWordPressのWPtouchプラグインがAndroid 4.1 Jelly Beanに対応していなために表示の不具合が発生してしまっているということらしい。

　原因を調べてみると、どうやらAjaxの判定の仕方が問題みたい。

　WPtouchでは、アクセスに対して環境変数にHTTP_X_REQUESTED_WITHが存在するかで通常のアクセスかAjaxでのアクセスかを判定しています。そして通常のアクセスに対しては、ヘッダとフッタを出力し、Ajaxのアクセスに対しては出力しません。

　Android 4.1の端末でアクセスした場合、常にHTTP_X_REQUESTED_WITHに値がセットされているために、WPtouchは常にAjaxからのアクセスと判断してしまいヘッダとフッタが出力されなくなってしまいます。この為、この部分を修正すれば、Android 4.1の端末に対しても正しく表示されるようになるはずです。

　修正は、テンプレートファイルのindex.php、page.php、single.phpの３つ。

修正前

<?php
  global $is_ajax;
  $is_ajax = isset($_SERVER['HTTP_X_REQUESTED_WITH']);
  if (!$is_ajax) get_header();
?>

<?php

global $is_ajax;

$is_ajax = isset($_SERVER['HTTP_X_REQUESTED_WITH']);

if (!$is_ajax) get_header();

修正後

<?php
  global $is_ajax;
  $is_ajax = isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' ? true : false;
  if (!$is_ajax) get_header();
?>

<?php

global $is_ajax;

$is_ajax = isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' ? true : false;

if (!$is_ajax) get_header();

　本来Ajaxを利用したアクセスかどうかは、HTTP_X_REQUESTED_WITHに値としてxmlhttprequestがセットされているかどうかで行われるものなので、これに沿って修正します。（page.php、single.phpは、Ajaxを利用していないので、そもそも判定すら必要がないんじゃないかと思う）

　Android 4.1の端末に対しては、WPtouchを適用させないというような対応もあるようですが、公式の対応までの暫定的な対応ということで。

追記：
WPtouchをAndroid 4.1 Jelly Beanに対応させてみる（その２）で、テンプレートを修正せずに対応してみました。