こちらの記事で、WordPressの2010年版デフォルトテーマ Twenty Tenをレスポンシブにしてみたところ、思いのほか反響がありまして、ソースを見たいというリクエストをいただきました。

いい機会なので、ソースを晒してみたいと思います。

レスポンシブ Twenty Ten(Twenty Ten 子テーマ)試作版

ファイルの構成

• style.css
• header.php

子テーマなので、この２つだけです。
/wp-content/themes/　にアップロードして、管理画面から有効化するだけでOKです。

＜内容の説明＞

style.css

ウィンドウ幅(デバイスの幅)によってレイアウトを変えるスタイルシートのみ記述しています。
レイアウトが変わるポイント(@mediaで指定)は、Twenty Elevenを参考に、 800px,650px,450px の３点ですが、ウィンドウ幅が十分ある場合についてはオリジナルのTwenty Tenを表示するために、1020pxというポイントを追加しました。

また、ウィジェットエリア1、2のwidth指定については、あえてTwenty Tenデフォルトの220pxを維持するようにしています。
私が制作するサイトは、サイドバーに画像でバナーを突っ込むことが多く、バナーが縮小されてしまうと見づらくなるだろうなー。という考えからです。

根本的な部分から作り直せばいいのですが、私の今回の課題は、「既存サイトを楽にスマホ対応させる方法の検討」でしたので、このような形にしました。

header.php

スマートフォンからの閲覧に対応させるために、オリジナルのheader.phpに、viewportのメタタグを追記しています。
また、必要ないとは思うのですが、一応IE8でもレスポンシブになるよう、css3-mediaqueries.jsを読み込む記述を加えました。

<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=no">
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

もともとはTwenty Tenベースで制作したサイトを、手っ取り早くスマホに対応させる手段の検討ということで実験的にやってみたことなのですが、WPをカスタマイズしていく上で同じような課題を持った方が結構いらっしゃることがわかりました。是非情報を共有させていただいて、課題解決のヒントとなれば嬉しいです。