eyemovic inc.

Works blog仕事の取り組み・ビジョン

2014.01.17

スマートフォン・タブレット用に
WordPressのテーマ切り替え

閲覧者の何割がスマートフォン・タブレットで見ている?

 

デバイスのアクセス解析たとえば、アイムービックのサイトの場合、閲覧者のおよそ4分の1がスマートフォンやタブレットで閲覧しています。左のデータは2013年12月で、色分けの青がデスクトップ、緑がモバイル(スマートフォン、その他モバイル機器)、オレンジがタブレットです。

現在のアイムービックのサイトでは、あえてスマートフォンやタブレットで見た場合も同じデザインで表示させていますが、 スマートフォンやタブレットからの閲覧者が増えた場合、最適化することも可能です。
皆さまのサイトでは、いかがでしょうか。

 

スマートフォン・タブレットに最適化するとは、どういうこと?

 

スマートフォン、タブレット、マルチデバイス ウェブサイトを見る機種がデスクトップ・ノートPCだけではなく、スマートフォンやタブレットを考慮して見やすくする作りがあります。具体的にどこが異なるかというと、画面幅です。画面幅が狭いことで、従来のサイトを閲覧するためにスマートフォンやタブレットではピンチアウト(拡大)や左右スワイプ(左右スクロール)の操作が増えます。

上記の操作を減らしたものが、スマートフォンやタブレットに最適化されたサイトと考えることができます。大事なのは、デバイスに関係なくあえて同じ見栄えにしたいか、最適化するか選べるということです。どちらにも良い点があります。

最適化の場合は大きく分けて、
1. 別途用意したHTMLにリダイレクト(別URL)… 機種判別をして、専用のURLにジャンプ。
2. レスポンシブウェブデザイン(同じURL)… 画面幅(ブラウザ幅)によってデザインを切り替える。
3. 別途用意したデザインで表示(同じURL)… 機種判別をして、見た目だけ動的に変更。
の3つあり、今回は上記のうち3つ目を紹介いたします。
WordPressを利用した場合に便利なプラグインです。

 

WordPressを利用した、スマートフォン・タブレットへの最適化

 

使用するプラグインは、『Multi Device Switcher(マルチデバイススイッチャー)』です。
プラグインの特徴は、私が実感したところ下記の内容です。
・デバイス(機種)をユーザーエージェントで判別し、見せるテーマをCookieで記憶させます。
・別プラグインのWPtouchやKtai Styleと異なり、自前で自由なテーマを適用できます。
・作成者が日本人である国産プラグインです。
・サンプルとしてゲーム機のユーザーエージェントもあり、たとえばPlayStation Vita向けにということも可能です。

プラグインのインストールをすると、WordPressの管理画面でテーマ選択が可能になります。
自分で追加したテーマ名が選択できるので、どのデバイスでどれを使うかを選びます。
事前に、スマートフォン用に「smartphone」、タブレット用に「tablet」という名前でテーマを準備しました。

WordPressのテーマ選択

「None」は、現在のテーマをそのまま使います。
「Custom Switcher を追加」で、対象のデバイスをさらに分けることができます。

構築では多くの場合、スマートフォン・タブレット用の機能はデスクトップサイトに準じた作りになるため、WordPressの子テーマを利用することで必要な部分だけをオーバーライドします。この子テーマの使用によって、親テーマに手を加えることなく、かつ親テーマの機能(function.phpなど)を継承できます。
※このあたりはプラグインの使い方ではなく、WordPressのテーマ作成方法の話です。

 

閲覧者によるテーマ切り替え

 

スマートフォン・タブレットは、もともとフルブラウザとして通常のデスクトップサイトを閲覧できるので、あえてデスクトップサイトをそのまま見たい場合もあります。Multi Device Switcher(マルチデバイススイッチャー)には、閲覧者用のテーマ切り替えボタンを自動で入れる機能があります。管理画面でチェックすることで入れられます。
※装飾は不要でHTMLだけを入れたい場合は、「デフォルトCSSを追加する」のチェックをはずします。

閲覧するWordPressテーマの切り替え

WordPressのフッタ この切り替えボタンは、WordPressの「wp_footer」に対してHTMLが挿入されます。左のサンプルでは、フッタ最下部に入っています。(「デフォルトCSSを追加する」にもチェックを入れると、このような装飾で表示されます。)

切り替えのリンクをタップすることでCookieが書き換えられ、閲覧中のデバイスが何であっても、デスクトップサイトへのテーマ切り替えができます。

ただし、このHTMLはWordPressの「wp_footer」に対して挿入されるHTMLであるため、デザイン上レイアウトが難しい場合は、自前で切り替え用のHTMLを設置する必要があると思います。その場合は、下記のパラメータつきリンクを設置することで代用します。

 

今後の既存サイト最適化のために

 

今後、デスクトップサイトごとリニューアルする場合だけではなく、公開済の既存サイトを残したままスマートフォン・タブレットに最適化することもあるでしょう。公開済のサイトに対して、新しくテーマを実装する場合、たとえばスマートフォンでアクセスした時に構築中のテーマが見えてしまいます。

そこで、構築専用に、オリジナルのユーザーエージェントで判定すれば、一般のユーザに見せなくてもすみます。
構築中は便宜上、PCブラウザの拡張機能でユーザーエージェントを変えて確認することが多いので、オリジナルのユーザーエージェントをPCブラウザとMulti Device Switcher(マルチデバイススイッチャー)に記述することで、問題を回避できます。

Multi Device Switcher(マルチデバイススイッチャー)を使用することで、WordPressのテーマ切り替えがしやすくなります。
モバイルファーストとして、スマートフォン専用サイトを作る場合についてもこのプラグインは便利で、iPhone専用サイト・Android専用サイトといった出し分けも可能です。さらに充実したサイト作成が実現できます。

愛媛県松山市でWeb開発一筋15年、700サイト以上の構築実績!

Webサイト制作・システム開発・スマホアプリ開発・組込ソフトウェア開発ならアイムービックにお任せ下さい。