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 プラグインは、簡単にスマートフォンに対応できる便利なプラグインです。
スポンサーリンク