WordPressサイトをスマートフォンに対応させる必要になったので、どんな方法があるのか、そしてどの方法が適しているのか調べました。

• プラグインで対応
• レスポンシブWebデザインで対応
• 別テーマで対応

の3つが主な方法だと分かったので、それぞれのメリット・デメリットを混じえて書いてみます。（既に作られたWordPressサイトをスマホに対応することを前提にしています）

プラグインで対応

WordPressサイトをスマホ対応にするプラグインは幾つかありますが、共通しているのは簡単にスマホサイトが出来上がる所です。

実は僕、最近まで「WPTouch」しか知らなかったのですがどうやら他にも幾つかプラグインがあるようでして。以下の記事では6つのプラグインが紹介されています。

WordPressのスマートフォンサイト自動生成プラグイン6選＋おまけ | ネタワン

WordPressのスマートフォンサイト自動生成プラグインを紹介します。

WPTouchの他、

• WPtap News Press
• WordPress PDA & iPhone
• WordPress Mobile Pack
• MobilePress

といったスマホ対応プラグインがあるんですね。

メリット

WPTouchを例にしますが、メリットはとにかく導入が楽な所です。プラグインをインストールするだけなので、ブログならメニュー設定を考えても5分も掛からないんじゃないでしょうか。サクっとスマホ対応出来ます。

あと、WPTouchに関して言えばサイトの読み込み時間が早いです。有料版のProはもっと早いらしいです。

有料版では子テーマの作成も出来るようになります。

デメリット

スマホ用テンプレートは自動で生成されるためどのサイトも同じ見た目になります。趣味でやっているブログならいざ知らず、差別化が必要な企業サイト（もしくは個人ブランディングが目的のサイト、ブログ）ではちょっと致命的だと思います。

WPTouchは無料版だと1つのテーマしか使えません。有料ラインセンスにアップグレードすると追加で4つのテンプレートが使えるようになりますが、母体数が少なくなるとは言えやはり似たサイトが出てきてしまいます。

有料版にアップグレードし、WPTouchの子テーマでデザインを変えてこのデメリットを改善する、といった方法はあります。

レスポンシブWebデザインで対応

レスポンシブWebデザインになるようWordPressテーマを修正するとスマホサイトに対応出来ます。例えばこのブログのWordPressテーマはレスポンシブWebデザインで作っています。

レスポンシブWebデザインとは？

レスポンシブWebデザインで作られたサイト（例えば今見ているこのブログ）を表示したまま、ブラウザのウインドウを小さくしたり、大きくしたりするとレイアウトが変化するのが分かると思います。

このように、レスポンシブWebデザインはどんなウインドウサイズにも順応出来る特徴を持っています。

今現在デスクトップPC、ガラケー、スマホ、ノートパソコン、テレビ、ゲーム機とWebに繋がるデバイスが沢山ありますが、これから先もっと多種多様なデバイスが現れるかもしれません。

Webサイトをそれらに逐一対応させる労力は考えただけでヤバイですよね。なので、「それならどんな状況にも対応するモノ作れば良いじゃん」って考えで提唱されたのが「レスポンシブWebデザイン」なんです。（本当はレイアウトがダイナミックに変化するのが重要ではなく、どんな環境にも呼応することが重要のようです。が、色んな意見があって難しい話になるので割愛します。というか実力不足で深く話せません）

ちなみにこのレスポンシブWebデザインの内容には建築業界の「Responsive Architecture」という考えが大きく影響を与えたようです。（ソフトウェアの開発法や役職名などは建築業界のメタファが使われているようで。建築とITは師弟関係のように見えてきますね）

メリット

じゃあレスポンシブWebデザインでスマホ対応するメリットは何かっていうと、先述した内容の意味を含めて一言で書くなら「管理が楽になる」でしょう（ただ、大幅なデザイン改変は逆にちょっと面倒だったり…）。

レスポンシブWebデザインで作成するとWordPressテーマは1つで済むので、プラグインや後述する子テーマと比べ、サイト改変が必要な場合に修正する箇所が少なく済みます。極端に言い過ぎると修正作業が半分になります。

もう一つ、Googleが推奨している点も挙げておきます。こちらのページ『スマートフォン向けウェブサイトの構築 – Webmasters — Google Developers』には、

レスポンシブ デザインにする理由

Google では、次のようなさまざまなメリットがあることから、レスポンシブ ウェブ デザインの使用をおすすめしています:

• コンテンツ 1 つにつき URL を 1 つにすると、ユーザーにとってコンテンツの操作や共有、コンテンツへのリンクが簡単になります。また、Google のアルゴリズムでコンテンツのインデックス プロパティを割り当てやすくなります。
• 該当するデバイス向けのページにユーザーをリダイレクトする必要がなくなり、読み込み時間が短縮されます。また、ユーザー エージェントに基づくリダイレクトはエラーが発生しやすいため、サイトのユーザー エクスペリエンスを低下させる可能性があります（詳しくは、ユーザー エージェントを検出する際の問題に関するセクションをご覧ください）。
• サイトと Google のクローラの両方についてリソースを節約できます。レスポンシブ ウェブ デザインのページでは、Googlebot ユーザー エージェントがページをクロールする必要があるのは 1 回のみで、ユーザー エージェントごとに何度もクロールしてコンテンツを取得する必要がありません。このようにクロールの効率が向上するため、サイトのコンテンツがより多く Google のインデックスに登録され、最新の状態に適切に維持される間接的な助けとなります。

と書いてあります。大雑把に要約すると

• URLが統一されてたらリンクの扱いが簡単になるよ
• ちょっとした問題があるリダイレクトを使わなくて済むよ
• 検索エンジンに優しいよ

でしょうか。とりあえず、Googleが推奨してることもメリットの1つです。

デメリット

対してレスポンシブWebデザインのデメリットはサイトが重くなりがちになる、そして制作コストが高くなってしまう所（時間が掛かる）にあります。

サイトが重くなりがちになる、つまりページの読み込みに時間が掛かる点はフロントエンド（HTML/CSS）とバックエンド（サーバー側）の最適化で何とかなるかもしれません。が、製作コストが高くなってしまう点はどうしようも無い、と言い切りたいのですが制作側が作業の最適化を頑張れば安くなるかもしれませんね。僕はまだまだ試行錯誤中です…。（あとは人件費の削減ですね☆）

いつの間にかビジネスの視点に立ってしまいましたが、個人で自分自身のWordPressテーマをレスポンシブWebデザインで作る場合は「プラグインや子テーマよりは大変」という認識で間違いは無いと思います。

この”大変”にはレスポンシブWebデザインの知識を学ぶ必要があるという意味を含めています。（と言っても覚えてしまえばそれで終わりなんですけど…）

別テーマで対応

プラグインやレスポンシブWebデザイン以外でスマホ対応するなら「スマホ用の別テーマを用意する」という方法があります。スマホでアクセスが来た場合に別のテーマを表示出来るのはWordPress（CMS）ならではの手法です。

デスクトップ、スマホに別テーマを表示する振り分けをするならプラグイン「Multi Device Switcher」がオススメです。

しかしこの方法、一見すると「えっ、もう1つテーマ作るの？労力パなくない？」と思うかもしれませんが、WordPressの便利な機能を使えば少ない作業量で済むんです。

子テーマを作ると楽です

スマホ対応をしようとした時に、

• 既に作ったデスクトップ用のテーマをレスポンシブ化するの大変
• しかしお金は使いたくない

といった状況なら子テーマで対応させちゃいましょう。割りきって無料のスマホ対応のWordPressテーマを使うのも有りですが。

どうして楽なのか、それはちょっとのテンプレート（HTML）とCSSを弄るだけで済むからです。

子テーマって？

子テーマとは、とあるテーマの機能を引き継いだ形で作成されたテーマです。親テーマに加えた変更が子テーマにも自動的に反映されるので、レスポンシブWebデザインに近い管理体制が出来上がります。

と言ってしまいましたが、厳密に言うとコピーされていないテンプレートのみ自動的に反映されます。ココらへんは書き出すと長くなってしまうので、子テーマについて詳しく説明されているページを紹介しておきます。

【重要】WordPressテンプレートのカスタマイズ前に子テーマをつくる方法CSS篇｜ThePresentNote

WordPressには無料のテンプレートテーマがたくさんあります。カスタマイズも自由にできるのが魅力ですが、テーマを直接カスタマイズしてはいけませ...

子テーマやカスタマイズの基本の基本についてちょっとおさらいしてみる | Webourgeon

相変わらずのご無沙汰ぶりです。。 最近、頂いたコメントの中で子テーマについてお話ししていたのですが、説明も長くなりそうなので、せっかくだか...

メリットとデメリット

この「スマホに対応する子テーマを作成して振り分け表示」という方法のメリット、デメリットはプラグインやレスポンシブWebデザインの大体中間ぐらいです。

導入はプラグインより面倒ですが、レスポンシブWebデザイン化と比べると楽です。

WPTouchの子テーマ作成と似ていますがコレにはお金を払う必要がありますし、デスクトップ版とデザインの整合性を図るなら子テーマに軍配が上がるでしょう。レスポンシブWebデザイン化よりは時間が掛からないと思いますし（内容によりますけど）。

管理の面では「レスポンシブWebデザイン >= 子テーマ > プラグイン」の順番で楽です。（デザインの変更規模によりますが）

まとめ

長ったらしく書いてしまいましたが、軽いまとめに入ります。

3つの方法は以下のような選び方になりますね。（ちょっとアバウトです）

• 「他のブログとデザインが同じでも（似ても）良いからとにかく楽にスマホ対応したい。お金も払って良いっす」ならプラグインで対応
• 「管理は極限まで楽にしたい。レスポンシブWebデザインの知識あり。少々時間掛かってもOK」ならレスポンシブWebデザインで対応
• 「管理はなるべく楽にしたい。あんまり労力も割きたくないけど、他と似たデザインは嫌」なら子テーマで対応

なお、今回僕が対応した案件は「既存のWordPressサイトをスマホ対応する」状況だったんですけど、子テーマで対応する方法が一番しっくり来ました。

2014年09月14日追記：

3つと書きましたが、もう一つの方法として「スマホでアクセスしたときのみCSSを変える」という手がありました。これはアクセスしたデバイスがスマホかどうか判定する関数をつかって振り分けます。

こちらの記事を参考にしてスマホ判定の関数を用意し、CSSファイルをPC用、スマホ用と二つ用意して振り分けます。例えばこんな感じですね。

//functions.phpに記述する
function is_mobile() {
    $useragents = array(
        'iPhone',          // iPhone
        'iPod',            // iPod touch
        'Android',         // 1.5+ Android
        'dream',           // Pre 1.5 Android
        'CUPCAKE',         // 1.5+ Android
        'blackberry9500',  // Storm
        'blackberry9530',  // Storm
        'blackberry9520',  // Storm v2
        'blackberry9550',  // Storm v2
        'blackberry9800',  // Torch
        'webOS',           // Palm Pre Experimental
        'incognito',       // Other iPhone browser
        'webmate'          // Other iPhone browser
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

スマホ判定の関数をfunctions.phpに記述し、header.phpでCSSファイルの振り分けを行います。

<?php if( is_mobile() ) : ?>
    <!-- スマホ用CSSの読み込み -->
<?php else : ?>
    <!-- タブレット or PC用CSSの読み込み -->
<?php endif; ?>

これは別テーマを用意してスマホ時に切り替える方法と似ていますが、HTML構造を崩さなくても良い場合はこちらの方が適していると思います。（ブログなどに良さそうですね）

photo credit: JD Hancock via photopincc