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とは共存できます。フィーチャーフォン(いわゆるガラケー)からのアクセスへの対策は、これで十分でしょう。

タイトルとURLをコピーしました