WordPress:iPhone対応プラグイン『iWPhone』導入
『iWPhone』なるWordPressプラグインを導入して、iPhone/iPod touch向けの表示画面を最適化してみたよ。iPhone/iPod touchをお持ちの皆さまは、試しにアクセスしてみていただけると幸い。
追記：その後「WPtouch」に乗り換えました。経緯などは『WordPress: iPhone用テーマ「WPtouch」導入 – Hinemosu』をお読み下さい[2009/11/11]
事の起こり
事の起こりは携帯端末ブラウザをシミュレートするFirefoxプラグイン「FireMobileSimulator」のバージョンアップついでに、ウチのブログがiPhoneでどう表示されるのかを確かめたのが始まり。ある程度は画面が崩れることを覚悟してたけど、予想を上回るグチャグチャなレイアウトで軽くショックを受けました。
携帯対応プラグイン「Ktai Style」を導入していたので、何からの対応をしてくれているのかと勝手な予想をしてたんだけど、iWPhoneなどの既存プラグインで対応可能なことを考慮して、Ktai StyleでのiPhone対応は行っていないんだってさ。
iWPhone導入手順
導入手順は公式のInstallationに書いてあるんだけど、英語なので簡単に翻訳しておきます。
- zipファイルをダウンロードする
- zipを展開して"iwphone-wordpress-plugin-and-theme"フォルダを取り出す
- その中にある"iwphone.php"を、wp-content/plugins/ディレクトリにアップ
- もうひとつの"iwphone-by-contentrobot"フォルダは、wp-content/themes/ディレクトリにアップ
- 管理画面のプラグイン設定を開いて、iWPhoneを有効化する
- iPhone/iPod touchでアクセスすると専用にカスタマイズされたテーマで表示される
iWPhoneとWP-Cacheのバッティングを解決
これで無事にiPhone向け表示が出来るようになったんだけど、キャッシュプラグインのWP-Cacheがバッティングするみたい。iWPhoneは動的にテーマを切り替えるんだけど、これにキャッシュが加わって予期していない動作になる。
具体的にはPC用画面キャッシュがあればPCにもiPhoneにもPC向けを表示しちゃうし、iPhone向け画面キャッシュであればPCにもiPhoneにもiPhone向け画面を表示しちゃう。
解決方法を模索したところ、そのものズバリの解法を発見。まんまパクらせてもらいました。
iPhone View不調について | iPhone 3G Wiki blog
一応メモ。wp-content\wp-cache-config.phpに以下の記述を追加します。
$me_mobile_agents = array( 'iPhone', 'iPod' );
$ua = $_SERVER['HTTP_USER_AGENT'];
foreach ($me_mobile_agents as $a) {
if (strpos($ua, $a) !== false) {
$cache_enabled = false;
$super_cache_enabled = false;
break;
}
}
$cache_rejected_user_agent = array_merge($cache_rejected_user_agent, $me_mobile_agents);
テーマファイルを改良
最後にテーマファイルを改良します。wp-content/themes/iwphone-by-contentrobotがiPhone用表示テーマなので、FireMobileSimulatorを活用しつつ良い感じに修正してください。
特にこだわらなければ初期表示でも問題ないと思うけど、header.phpの36行目だけは直した方が良いかも。以下、修正後のソース。
<meta name="Viewport" content="maximum-scale=1.6,width=320" />
違いが分かりにくいともうけど、最後にスラッシュを付けてmetaタグの閉じ忘れを修正しています。