スマートフォンからのアクセスが増えてきたのでWordPressのプラグイン「WPtouch」を入れてみた

2011.06.07

WordPressのプラグイン「WPtouch」
 
この半年ぐらいで一気にぐぐぐっと増えた感じです。

久しぶりにGoogle Analyticsでこのブログ「オレンヂ」をどんな環境で見ている人が多いか見てみたところ、スマートフォンからのアクセスが急増していました。
 
OS別アクセスランキング
2010年5月には2.07%だったスマートフォンが2011年5月には7.66%に。iPhoneもすごいのですが、今年になってからのAndroidの伸びがすごいのです。
 
Androidからの年間アクセス
Androidからのアクセス(2010年5月頭から2011年6月頭)
 
というわけで、このブログも今さらながらスマートフォンに対応することにしてみました。
 
使ったのは「WPtouch」というWordPressのプラグイン。Mobile Themeのオン・オフの表示でちょっと手間取りましたが、さくっと導入できたのでまとめておきます。
 
 
プラグインをインストールして有効化
WPtouchをインストール
WordPressで「プラグイン」>「新規追加」のプラグインのインストール画面で「WPtouch」を検索。インストールして有効化します。基本的にはこれだけでもうおしまい。ラクチンすぎです。
 
 
ホームページにアイコンを設定する
それだけだとちょっとさびしいのでほんのちょっとだけカスタマイズ。オレンヂのアイコンをつけたしてみました。
WPtouchにアイコンを追加
WordPressの「設定」>「WPtouch」の「Default & Custom Icon Pool」で画像をアップロード。そのすぐ下にある「Logo Icon / Menu Items & Pages Icons」でアップロードした画像を選びます。アップロードしたあと一番下の「Save Options」を押さないとプルダウンメニューに表示されないかもしれないのでご注意を。
 
 
Google Adsense、Analyticsを設定する
WPtouchにGoogleAdsenseを追加
WPtouchはいろいろコードを貼り付けられるようになっているので設定も簡単。AdsenseはモバイルコンテンツAdsenseのコードを取得して「Adsense,Stats & Custom code」のIDに貼るだけです。AnalyticsのコードはStats & Custom codeに貼り付けます。
 
 
パソコン用画面からモバイル用画面に戻るコードを追加する
Mobile Themeのオン・オフスイッチ
WPtouchを導入すると、モバイル用画面の一番下に「Mobile Theme」スイッチがあって、オフにすることでパソコン用画面に切り替えることが出来るようになっています。ただ、いったんパソコン用画面にしてしまうとモバイル用画面に戻ってこれなくなってしまったので、WordPressの「外観」>「テーマ編集」からフッターのコードを変更。<div id=”footer”>~ </div>の間に以下のコードを追加して解消しました。

<?php if (function_exists('wptouch_switch')) wptouch_switch('<h2>', '</h2>'); ?>


スマートフォンでパソコン用画面を見ているとフッター部分に「Mobile Theme」スイッチが出てくるようになりました。
 
 
 
こんな感じに完成ー。あっという間でしたよ。
WordPressのプラグイン「WPtouch」
背景の模様を変更出来たり、色も簡単に変更できそうなので、時間のあるときにちょこちょこといじってみようと思っています。

関連してるかもしれない記事

Pocket