WordPress のスマートフォン対応

WordPress（ワードプレス）をスマートフォン表示に対応させる方法です。

ここではスマートフォン対応の定番とも言えるプラグイン「WPtouch」を使用します。

WordPress が手元になかったので、レンタルサーバーの機能で WordPress を作成しました。カスタマイズは、特に行なっていない状態です。

表示結果のシュミレーションには、Adobe Device Central CS5 を使用します。実機での確認には XPERIA acro IS11S を使用します。

上の画像は、Toshiba REGZA Phone T-01C での表示結果をシュミレーションしたものです。

WPtouch プラグインは、無効の状態です。

パソコン用の画面が表示される形ですが、特に表示崩れはありません。記事が重たい場合は、表示に時間がかかるかもしれません。

SHARP IS03／Samsung GALAXY S SC-02B／SHARP LYNX 3D SH-03C／SHARP GALAPAGOS 003SH／Apple iPhone 4 でも同じようにシュミレーションしましたが、Toshiba REGZA Phone T-01C と同じように特に表示崩れはありませんでした。

上の画像は、Apple iPhone 3GS での表示結果をシュミレーションしたものです。

ブログのタイトルや本文などに、表示崩れがみられました。

WPtouch プラグインを、インストールして有効化する方法です。

上の画像のように WordPress の管理画面にログインして、プラグイン／新規追加／キーワードに「WPtouch」と入力／プラグインの検索を行います。

検索結果に WPtouch プラグインが表示されるので、インストールを行います。

今回は WordPress の簡単インストールを行ったので、WPtouch プラグインは予め同梱されています。

インストール済みプラグインを確認します。

WPtouch プラグインはインストール済みの状態ですが、有効化されていません。

新バージョンの利用が可能なので、自動アップグレードを選択します。

プラグインの更新が完了したら、プラグインを有効化を選択します。

以上で WPtouch プラグインを有効化する作業は完了です。

スマートフォンでの表示結果をシュミレーションします。

Toshiba REGZA Phone T-01C での表示結果をシュミレーションすると、スマートフォン向けに最適化されたことが確認できます。

SHARP IS03／Samsung GALAXY S SC-02B／SHARP LYNX 3D SH-03C／SHARP GALAPAGOS 003SH／Apple iPhone 4 でも、同じようにスマートフォン向けに最適化されたことが確認できます。

上の画像は、表示崩れがあった Apple iPhone 3GS でのシュミレーション結果です。

WPtouch プラグインを有効化したことで、Apple iPhone 3GS でも綺麗に表示できるようになりました。

同じく Apple iPhone 3GS でのシュミレーション結果です。

ブログの記事本文も綺麗に表示されています。

スマートフォン向けに最適化されたことを確認できました。

Apple iPad では、パソコン用のページが表示される点も良いと思います。（シュミレーターでの確認となります）

WPtouch プラグインは、簡単にスマートフォンに対応できる便利なプラグインです。