/ programing

自作のWordPressテーマをスマートフォン対応してみた

自作のWordPressテーマをスマートフォン対応してみた。

現状、自分で何もつくらなくてもスマートフォン対応プラグイン、またはスマートフォン対応テーマを利用することでスマートフォン対応はできる。しかし、これらを使うと使い勝手はいいものの同じものを使っている他の人のサイトと同じデザインになってしまう。オリジナリティを求めて自分でテーマをつくっている側としてはつまらない。

そこで自分のWordPressテーマをスマートフォンに対応させた。昨今のスマートフォンブラウザはHTML5/CSS3に対応しているためサイトの構造がシンプルであればスマートフォン対応はそれほど大変な作業ではないのである。実際にこのブログのテーマで対応したことについて書いてみよう。

はじめに

テーマの基本的な話しについては以下のドキュメントを参照されたい。
WordPress テーマの作成

スマートフォン判定をする

とりあえずfunctions.phpで以下のような定義をして参照する。ぶっちゃけ、言っておくがこの判定は適当。Windows Phoneとか他のOSにも対応したい人、Android Tabletも適切に判定したい人はもう少し調べて欲しい。自分はiPad/Android/iPhoneが判定できればそれでいいのでこうしているだけ。

define('MYTHEME_IS_TABLET', (strpos(@$_SERVER['HTTP_USER_AGENT'],'iPad;')!==false));
define('MYTHEME_IS_PHONE', !MYTHEME_IS_TABLET&& preg_match('/android|ipod|ios|iphone/', strtolower(@$_SERVER['HTTP_USER_AGENT'])));

viewportの設定をする

viewportについてはAppleの開発者向けサイトに公式ドキュメントがある。簡単にいうとiOSのブラウザはディスプレイサイズとは異なる画面サイズを内部にもっていてそれで拡大縮小した結果をディスプレイに表示するのである。スマートフォンでサイトが縮小されて表示された経験のある人は多いだろう。デフォルトではviewportの幅は980に設定されているため、スマートフォンのディスプレイサイズとは関係なく幅980で見た画面が縮小されて表示されるのである。

これはあくまでPCディスプレイ用につくられたサイトを見るための互換的な処理でありスマートフォン対応を考えるとどんなデザインにしても幅980で表示されるのは余計なおせっかいになる。この余計な処理を止めるため header.php でhtmlのhead要素を出力しているあたりに以下を追加しよう。

<meta name="viewport" content="width=device-width" />

viewportの幅やデフォルトの拡大率などはmetaタグによってサイト側がデバイスに指定をすることができる。よく使われるのは上記の指定でこれはviewportの幅をディスプレイサイズにあわせてくれ、という指定である。つまりスマートフォンのディスプレイの幅が320であれば幅320のディスプレイで見た際のレイアウトが素直に表示される。

なお、このviewportのドキュメントはAppleがiOS向けに提供しているものだが幸いAndroidなどの他のOSもこの仕様に追従しているので最新のOSに関しては問題ない。

スマートフォン用のcssクラスの指定

この処理を行うかどうかは意見がわかれるところであろう。本当にエレガントなhtml/cssを書きたい人は後述のMedia Queryのみで頑張ることをお勧めする。今回PC側への影響を排除したく楽をしたかったので追加する。

functions.php に以下のコードを追加する。

function mytheme_body_classes( $classes ) {
    if (MYTHEME_IS_TABLET) $classes[] = 'layout_tablet';
    elseif (MYTHEME_IS_PHONE) $classes[] = 'layout_phone';
    return $classes;
}
add_filter( 'body_class', 'mytheme_body_classes' );

キャッシュを使っているサイトは、接続するクライアントによって出力を変える処理は慎重に行うべきである。デバイスによって出力が変わることを意識したキャッシュにしていない場合、最初に接続したクライアントがPCかスマートフォンによって次に接続するクライアントに返すものが変わってしまう。

CSSで大まかなレイアウトを調整する

ここからはテーマごとに対応が違うので具体的な対応は載せるのが難しいのだが、今回は大まかに以下の対応を行なっている。

  • 横並びを立て並びに変更(float:none; display:block)
  • 不要な情報の排除(display:none)

画面が小さいので横に並べているものを縦に並べる。またものによってはスマートフォンでは不要な情報があるかもしれない。たとえばflashで表示しているような情報などがあった場合、それらはスマートフォンでは表示できない場合もあるのでPC向けに追加しているコンテンツは見えないようにした方が良い。(このあたりの判定がCSS3 Media Queryやjavascriptでは面倒なのでcss classでざっくりやると楽である)

この方法で解決できるのはもともとのhtmlの構造が文書にあわせて適切に単純に構成されている場合である。レイアウトを実現するために組まれたhtml構造や複雑なhtml構造の場合はこういった単純な方法では解決できないかもしれない。

CSSで細かいレイアウトを調整する

大まかにレイアウトが整ったが個々の要素がはみ出てしまうことがある。これはサイトの構造だけでなくブログのコンテンツにある画像がはみ出るケースもある。ここで CSS3 Media Query を使って解決する。Media Queryを説明すると長くなるので検索してほしい。ここでは画面サイズごとにCSSを適当させるためのテクニックということにしておく。

このサイトでは以下のようなCSSを書いた。

@media (max-width: 320px) {
.layout_phone .trackbacks_info input,
.layout_phone #comment_text,
.layout_phone .post_content img { max-width:280px; }
}

画面の幅の最大が320以下の場合にいくつかの要素を280pxに設定している。

(min-,max-)widthを使ったMedia Queryはスマートフォンのためのものではないことを理解する必要がある。CSS3 Media Queryに対応したモダンブラウザの場合はブラウザのウインドウサイズによってこれらの指定が有効になることがある。

PCでも画面サイズによって動的なレイアウトにすべきと考えるか、固定幅なレイアウトで見てもらうようにするかはサイト製作者が検討すべき内容である。ここをおろそかにしたままスマートフォン対応でMedia Queryを適応してしまうとPCでサイトを見たときにブラウザのサイズによってレイアウトがおかしくなってしまう。本サイトではPCでは固定幅なデザインにしているのでMedia Queryの適応は .layout_phone で絞っている。

最後に

サイトによってはロゴを入りきるように作りなおすとか様々な調整が必要になるだろうが、ブログのような表示のレイアウトパターンが多くないサイトであれば今回のような単純な対応で見やすくすることは可能である。

ただこれらの対応で使いやすくなるかどうかはまた別問題である。たとえばサイトのトップでスマートフォンを見た時に最新のエントリが少し表示されるだけでナビゲーションはほぼないに等しい。見る方にしてみたらサイトトップでは最近のブログのタイトル一覧やタグ、カテゴリなどのインデックスが欲しいと思うかもしれない。プラグインでスマートフォン対応できるサイトはそういった対応もできているので使いやすさを考えるならそういったプラグインを使うことも考えるべきだし、CSSだけなくコンテンツやサイト構造を考えることも必要である。

余計なことをしないでPCサイトのデザインをピンチアウト（拡大）してみた方が使いやすかったということにならないように注意が必要である。こういった問題の回避策としてパソコン版でみるという表示モードを提供しているサイトもある。使いやすさの向上については後々考えることにしたい。

Markdown with by ❤ wp-gfm