twentytwelveとMobile Detectorによるスマホ対策

WordPressのバージョン3.5もいよいよ正式リリース間近(12月12日に日本語版がリリースされた)。今回のバージョンの目玉のひとつは、標準テーマのTwenty Twelveだが、実は、WordPressの正式リリースを待たずして、Twenty Twelveを先行ダウンロードできる。

Twenty Twelveでは、PCやスマホなどのデバイスに応答して、表示を最適化するレスポンシブデザインが採用されており、このテーマをカスタマイズすれば、誰でも簡単にスマホ対応のテーマを作ることができるのだ。

左のスクリーンショットは、このサイトのテーマをTwenty Twelveに変更して、iPhone4S上で表示したもの。

ご覧のとおり、シンプルで機能的なテーマなので、スマホやタブレットのことだけを考えるなら、このまま利用しても問題はない。

ただし、これをPC用のテーマとしも使うとなると、少々話が違ってくる。ヘッダーにロゴを入れたり、ナビメニューの位置を変えたり、何かとPC用にカスタマイズしたくなる。カスタマイズの程度にもよるが、場合によっては、スマホやタブレットでの表示が崩れることだってある筈だ。

また、PCで非レスポンシブデザインテーマを使っていて、これがとても気に入っている場合、レスポンシブ化のためだけに、Twenty Twelveをベースにテーマを書き換えるのかどうかという問題も起こるかもしれない。

そんなときお薦めしたいのが、Twenty TwelveとMobile Detectorというプラグインの組み合わせによるスマホ対策だ。

Mobile Detectorのインストールと設定

WordPressにおける携帯対応の定番といえば、Ktai StyleとWPtouchというプラグインの組み合わせだろう。WPtouchは今でも人気のあるプラグインのひとつだが、今回は、最もシンプルなスマホ対策をということで、Mobile Detectorというプラグインを使用する。

Mobile Detectorは、WordPressの管理画面上のプラグインメニューから新規追加をクリックし、Mobile Detectorで検索できる。

後は、「いますぐインストール」リンクをクリックすれば、インストールが始まり、Mobile Detectorが有効化される。

設定メニュー中にMobile Detectorという項目が追加されていると思うので、これをクリックする。

設定は、これ以上ないというくらいシンプルだ。ドロップダウンメニューからスマホやタブレット用のテーマを選択して、「変更を保存」ボタンを押すだけ。

上記の設定により、PCからのアクセスには、デフォルトのテーマ、スマホやタブレットからのアクセスにはMobile Detectorで設定したテーマが使用されることになる。

なお、Ktai Styleの設定で、iPhone, Android用にKtai Styleを使わないという設定ができるので、Mobile Detectorと共存できる、フィーチャーフォン(いわゆるガラケー)からのアクセスへの対策は、これで十分だろう。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク