WordPressを携帯電話対応サイトにする

WordPressを携帯電話対応サイトにする携帯電話でウェブを参照するユーザーは、けして少なくない。

「WordPress」は、プラグインの導入によって、簡単に携帯電話向けに簡略化されたテーマでの表示が可能になるので、ぜひ、携帯電話に対応させたいところだ。

しかし、一口に携帯電話と言っても様々な種類があり、標準搭載されているブラウザの機能も様々である。

場合によっては別のブラウザを追加インストールしている可能性もある。

携帯電話の場合もPCと同様にその環境は複雑であり、一括りに考えることは出来ない。

ゲーム機などの携帯端末まで考慮すると更に複雑になる。

PCサイトの参照を目的としたフルブラウザで参照しているユーザーに対して、携帯電話向けの簡略されたテーマで表示することが、果たして親切なのか?それともパフォーマンスに優れた携帯電話向けのテーマで表示することが親切なのか?

色々と考え始めるキリがないが、幸いそこまで高度な設定が可能なプラグインを私は知らないので、もう少し、シンプルに考える。

とは言え、かなり複雑である。

基本的には、搭載されている、もしくは使用している可能性があるブラウザによって分類する必要がある。

以下、主な携帯端末のブラウザを分類した。

NTTドコモ

  • iモード
  • iモードブラウザ

au

  • Ezweb
  • PCサイトビューアー

ソフトバンク

  • Yahoo!ケータイ
  • PCサイトブラウザ

ウィルコム

  • Opera
  • NetFront
  • Opera(フルブラウザ)
  • NetFront(フルブラウザ)

イー・モバイル

  • NetFornt
  • NetFront(フルブラウザ)

Apple

  • Mobile Safari(AppleWebKit系、iPhone、iPad、iPodに搭載)

Windows Mobile

  • IE系
  • NetFront

Android

  • AppleWebKit系

BlackBerry

  • ブラウザ不明

Palm OS

  • AppleWebKit系

Symbian OS(ノキアなど)

  • UIQ搭載ブラウザ
  • S60搭載ブラウザ(AppleWebKit系)

任天堂

  • DS(Opera系?)

ソニー

  • PSP

その他

  • Opera Mini

携帯電話への対応は、プラグインで簡単に実現出来るが、一番の問題は、実際に、どの端末で携帯電話用テーマを使って表示されるかの確認である。

ユーザーエージェントを偽装できる「FireFox」のアドオン「User Agent Switcher」や「Google Chrome」のエクステンション「User-Agent Switcher for Chrome」を用いれば、レイアウトの確認までは無理としても、携帯用テーマで表示されるか否かの確認は出来る。

使用する前に、「Options」で、ユーザーエージェントを設置する必要があるが、携帯端末のユーザーエージェントは、「ユーザーエージェント – Wikipedia」「userAgent一覧-ユーザーエージェント一覧」で確認出来る。

追記

携帯電話のブラウザをシュミレーションするFireFox用プラグイン「FireMobileSimulator」が「FireFox4」対応となった。

対応機種は限られるが、こちらの方が実際に近い画面を確認できる。端末の情報さえ得られれば、自身で機種を追加することも可能。

以下、「WordPress」を携帯電話対応にするためのプラグインを紹介する。

・WPtouch 1.9.25

WPtouch

WPtouch」は、「WordPress」に標準でインストールされているプラグインで、iPhone、iPod touch、Android、Blackberry Storm、Blackberry Torch、Palm Preやその他タッチタイプパネルの携帯端末を自動的に判別し、専用のテーマでの表示を行う。

Blackberryがリストにあるが、全てのモデルが対象ではない。

ユーザーエージェントを偽装したテストの結果では、対応リストにはないものの、iPadにも対応している様に思われる。

あくまで特定の携帯端末が対象で、日本のものを含めて、一般的な携帯電話には対応していないので、後で述べる「Ktai Style」と併用すると良い。

標準のテーマは、iPhoneアプリを意識したデザインで、見た目も悪くない。

日本語にも対応しており、「Regionalization Settings」を「Japanese」に変更すれば、日本語テーマでの表示になる。

コメントシステムの「DISQUS」にも対応している。

基本的に有効化するだけで使えるが、メールアドレスを公開したくないなら設定で「Enable Email Menu Item (Uses default WordPress admin e-mail)」のチェックを外して置くこと。

設定の「Adsense」に「Adsense ID」を設定できる。

※「Adsense ID」は、「Adsense」の管理画面右上に表示される「pub」で始まるコード。

「Google Analytics」でアクセス解析を行う場合は、PC用のテーマとは別に、対応が必要。

「Stats & Custom Code」で、「Google Analytics」のトラッキングコードを設定出来るが、携帯電話用のトラッキングコードが設定出来る訳ではない。

・WordPress Mobile Pack 1.2.4

WordPress Mobile Pack

WordPress Mobile Pack」は、殆どの携帯端末での表示に対応している。

エージェントを偽装したテストでは、未対応の端末が見つからなかった程で、Opera Mini、任天堂 DS、Sony PSPにも対応している。

フルブラウザでのアクセスに対しても、専用のテーマで表示させる傾向がある。

コメントシステムの「DISQUS」にも対応している。

一見、管理項目が多い割には、痒い所に手が届かない感もあるが、ブラウザで携帯端末を自動的に判別する方法の他、DNSの設定は別途必要となるが、PC用とは別に携帯用のドメインを提供する機能あり、自動判別との併用も可能である。

携帯端末向けにウィジェットの表示、非表示も管理できる。

「テーマ」は、管理画面の「外観」で管理出来る形で提供されており、カスタマイズ性も高い。

標準のテーマは、日本語テーマではないが、表示上、大きな支障はない。

探せば、対応する日本語テーマが存在するかもしれないが、残念ながら知らない。

Nokia系の端末(Symbian S60)に対して、専用のテーマで表示させる機能(ON、OFF可)があり、有効にすると、Nokia S60系と同様にレンダリングエンジンにAppleWebKitを採用するブラウザが搭載されたiPhone、iPad、iPod、Android、Palm OSなどにもNokia用のテーマが適応される。

・Ktai Style 2.0.3

Ktai Style

Ktai Style」は、日本人が開発したプラグインで、日本の携帯電話への対応が中心となっている。

エージェントを偽造したテストでは、iPod、Android、BlackBerry、任天堂 DS、Symbian S60、Opera Miniにも対応しているようだ。iPad、Window Mobile、Palm OS、Sony PSP、NetFrontは未対応。

フルブラウザでの参照には基本的に対応していない。

標準で複数の日本語テーマが用意されてる。

キャリア別、端末別に使用するテーマを設定することも可能で、端末に合わせた細かな設定が可能。

前述の「WPtouch」と併用すれば、「WordPress Mobile Pack」程ではないが、殆どの携帯端末をカバー出来る。

残念な事に、コメントシステムの「DISQUS」には未対応。

「/wp-content/plugins/ktai-style/themes/」以下にテーマが格納されているので、直接「header.php」や「footer.php」を編集して「Google Adsense」の広告など組み込む事も可能。

「Google Analytics」でアクセス解析を行う場合は、PC用のテーマとは別に、対応が必要。

方法は、「Yuriko.Net » Ktai Style 2 への Google Analytics 設置方法」で紹介されているが、やや複雑である。

まず、掲載されているコード書き込んだファイル「ks-google-analytics.php」を用意する。文字コードはUTF-8でOKだ。

「$GA_ACCOUNT」を、自分のIDに変更することを忘れずに!

「WordPress」のインストールディレクトリが、このブログ(http://www.near-mint.com/blog/)のようにルートディレクトリでない場合は、

$GA_PIXEL = "/ga.php";

$GA_PIXEL = get_bloginfo('wpurl') . "ga.php";

に変更する。

—————————————————————-

・追記

このブログでは、

$GA_PIXEL = get_bloginfo('wpurl') . "/ga.php";

と記述していた。「/」の有無が問題である。

「get_bloginfo(‘wpurl’)」が、どんな値を返すか確認できれば一番良いのだが、面倒であれば、

$GA_PIXEL = "http://www.near-mint.com/blog/ga.php";

の様に、URLを記述しても良い。

ただし、ブログのURLが変わった場合は、変更が必要となる。

—————————————————————-

ファイルの準備が完了したら「ks-google-analytics.php」を「WordPress」インストールディレクトリ直下の「/wp-content/plugins/」にFTPする。

直接ファイルを置くのではなく、フォルダを作成してFTPしても良い。

「WordPress」の管理画面から、プラグイン「Ktai Style Patch of Google Analytics」を有効化する。

最後に「Google Analytics」の管理画面にアクセスし、「Analytics設定」からアカウントを選択し、(対象となる)プロファイルの「編集」をクリック、更に「ステータスの確認」をクリックする。

「詳細」タブを選択し、「携帯電話向けのサイト」にチェックし、ファイル「ga.php」をダンロード、更に、このファイルを「WordPress」のインストールディレクトリにFTPする。

※各プラグインを使用した際の画面の画像は、擬似的にFireFoxで表示したもので、実際の携帯端末上の表示とは異なる。

————————————————————

「WPtouch」、「WordPress Mobile Pack」、「Ktai Style」の同時利用

「WPtouch」と「Ktai Style」の両方を有効化させて使う事も出来き、個人的には、この組み合わせをお勧めする。

「WPtouch」と「Ktai Style」を同時に使う場合は「Ktai Style」の設定で「iPhone, Android 用」のテーマを「(Ktai Styleを使わない)」に設定し、Apple系の処理を「WPtouch」に任せると良い。

この設定では「Ktai Style」は、iPhone、Androidだけでなく、AppleWebKit系ブラウザでのアクセスを処理しなくなり、その肩代わりとして、iPhone、iPad、iPod、Android、Palm OSは、「WPtouch」で処理されるが、Symbian S60は、いずれでも処理されなくなる。

「BlackBerry」は、全モデルでテスト出来ていないため、どちらで処理されるのか不明。「Ktai Style」で処理されるケースがある事は確認している。タッチ系は「WPtouch」か?

「WPtouch」、「Ktai Style」双方に機能がないため、フルブラウザでの参照に対しては、いずれでも処理されない。(実機でのテストでは、Opera Miniは、Ktai Styleが処理した。)

とは言え、この2つのプラグインで、大部分をカバーする事が出来る。

更に「WordPress Mobile Pack」を有効にして補完する手段もあるが、この場合、「WordPress Mobile Pack」と「WPtouch」、「Ktai Style」の間で重複する機能が沢山あるため、予期せぬ問題が起こる可能性がある。

試した限りでは、3つを混在させた場合でも、正常に動作しているように見えるが・・・。

なお、この手のプラグインは、キャッシュ系プラグインと相性が悪いものが多いので、予め対応を調べたほうが良い。



WordPress, ネット・PC, , , , , , , , , , , Permalink