Check!Site > Web > WordPress > WPtouchでスマホ対応する前後の比較画面と導入方法

WPtouchでスマホ対応する前後の比較画面と導入方法

記事投稿者：山下 晴規
記事公開日：2013/04/05
最終更新日： （この記事は約1年以上経過しています。）

WordPressプラグイン「WPtouch」で、このサイトをスマホ対応にしました。WPtouchの導入前後で、スマートフォン画面にてどのような差異があるのかを試してみたくて導入してみた次第です。比較画像も載せていますので参考にしてみてください。

導入前後の比較

まず、WPtouch導入前にスマートフォンでアクセスした時の画面は以下のような感じです。

※左側の画像はトップページの上部、右側の画像は少しスクロールした部分です。

WPtouch導入前1 WPtouch導入前2

構造的にメニューが3行になってしまったり、SNSリンクが変な感じになったり、違和感があります。微妙な感じです。

では、次に、WPtouch導入後にスマートフォンでアクセスした時の画面は以下のような感じです。（WPtouchの設定はほぼデフォルトのままの場合です。）

※左側の画像はトップページの上部、右側の画像は少しスクロールした部分です。

WPtouch導入後1 WPtouch導入後2

おっ！スマホ用に最適化された感じがヒシヒシとします！

WPtouchの導入方法

通常のプラグイン導入方法と同じです。

# cd /usr/local/src
# wget http://downloads.wordpress.org/plugin/wptouch.zip
# unzip wptouch.zip
# mv wptouch /(WordPress公開ディレクトリ)/wp-content/plugins/

この後、プラグイン管理画面でWPtouchを有効化します。

基本的には以上の操作で、スマホ対応が完了してしまいます。

WP Super Cache を利用している場合

WordPressプラグイン「WP Super Cache」を利用している場合は、「WPTouch plugin detected! Please go to the Supercache plugins page and enable the WPTouch helper plugin.」と表示されます。

以下の手順を実行すると、このメッセージは表示されなくなりました。

  1. WP Super Chache の設定画面で、「プラグイン」タブを表示します。
  2. WPTouch の「有効」ラジオボックスにチェックを入れて、「更新」ボタンをクリックする。

WPtouch設定

WPtouchの設定画面では、いくつか設定項目がありますので用途に合わせて設定変更する事が可能です。

私的には、設定画面で変更できる項目だけでは事足りない箇所もありましたので、個別ファイルでのカスタマイズを今後する形になりそうです。しかし、WPtouchは引き続き使ってみようかと考えています。

関連記事