スクリーンショット 2013-04-14 0.59.42

最近弊社にもブログブームが来ている(?)みたいなので、カスタマイズすることを前提とした、最低限で構成されるWordpressのテーマ [wp_flat_theme]を作りました。(ちょうど適用してます。)

きっかけとしては、シロクのエンジニアたちのブログ開設も理由の1つではありましたが、やっぱり時流にあったHTML5 + CSS3 + レスポンシブの組み合わせでブログのテーマを変更することも勉強として大切だろうなと思い立った矢先に、「そもそもWordpressでブログを開設するための最低限のリソースってなんだろう。」と、素朴な疑問が浮かび、これらをまとめておこうときめました。

構成は wp_flat_theme ディレクトリの中から見て、

■php

・index(メインページテンプレート)

・header(ヘッダーモジュール)

・footer(フッターモジュール)

・sidebar(サイドバーモジュール)

・single(単一ページテンプレート)

・functions(テーマ独自の関数群)

という形でブログっぽく動いてくれているので、アーカイブテンプレートは用意しませんでした。あと、フッターとサイドバーのウィジェットも追加できるようにしてます。

■css

・style(グローバルスタイル)

・css/modern (モダンブラウザ用のスタイル)

・css/mobile (スマートフォン用のスタイル)

css自体は、単一のcssでかつメディアクエリでPC/スマフォの表示を分けてしまっても良かったんですが、ソースが長くなると編集が面倒くさい気がしたので分けて管理しようと思ったため、html上でcssを分けて読み込んでいます。中規模開発くらいだったら、機能別にちゃんとcss分けて、そこに各デバイスに対してメディアクエリを記述したほうが、全デバイス共通で適用したいcssが書きやすそうだなと思いました。

みんな大好きエリックメイヤーさんのリセットcssを使っています。なにかとネックなie8以下対応には、html5.jsとcss3-mediaqueries.jsを読ませいるので多分動くかなと。jQueryも読ませているので不要ならサイトに応じて消しちゃって下さい。

制作から早四時間、とりあえず完成しましたが、共通化があまり出来てないのでまだまだテーマ自体はまだ軽く出来る気がします。改変とかご自由にという感じなので、欲しい方は下記のダウンロードボタンからどうぞ!テーマのインストール方法は各々で調べて下さい♪

【ダウンロード】 wp_flat_theme