WordPressテーマ開発のベースになる『NC White』テーマ

WordPressでコーポレートサイトを構築する際に、マークアップの共通部分やリセットCSSなど、最低限必要だけど、毎回使用するという部分を使いまわすためのテーマ『NC White』を公開します。

どういうもの？

このテーマのスタイルシートは、ブラウザごとのデフォルトCSSをオフにするリセットCSSだけが読み込まれた状態です。それ以外のCSS・画像は何も入っていないので、デザインが全く当たっていない状態になります。

機能面では、コーポレートサイト構築の際に使わない機能をばっさり切り落としています。投稿者名やタグの表示、コメント欄など、ブログ機能では使用するけれど、企業サイトではほとんど使わない機能が多数ありますよね。それだけでなく、必ずしも毎回使わないな、という機能さえばっさりそぎ落とし、真っ白なテーマにしています。

機能

• 親テーマとしての使用専用（レイアウト用のCSSは無し）
• HTML5対応
• jQueryをデフォルトで読み込み
• modernizr.js 同梱
• html5reset.css 同梱
• WordPressのWYSIWYGエディタで挿入されるクラス（alignright等）に対応
• アイキャッチ画像に対応
• titleタグの出力内容を調整
• WP-PageNaviに対応（プラグインが有効化されている場合、前後ページへのリンクの代わりにページナビを表示）
• コメント欄に非対応（わざと）

使い方

作成するテーマから親テーマとして読み込ませます。

テーマのstyle.cssでの記述例

  /*  Theme Name: サンプルテーマ  Theme URI: http://www.example.com/  Version: 1.0  Author: Takuro Hishikawa (@HissyNC)  Template: ncwhite  */  @import "../ncwhite/style.css";  

この状態で、リセットCSSとjQueryなど基本的なJavascriptライブラリが読み込み済みになりますので、あとはデザインに合わせてCSSを作成していくだけ、という使い方です。子テーマの使い方は、Codexの子テーマページを参考にしてください。

特にコーポレートサイトでは、ヘッダーとフッター以外はほとんど共通していることが多いので、子テーマでheader.phpとfooter.phpを追加してCSSを適用するだけでサイトを作ってしまうこともできます。

CSSだけで対応できないところは、デザインやレイアウトが異なるカテゴリや投稿タイプ、アーカイブなど、特定のページのみテンプレートファイルを作成し、デザインのカスタマイズを加えていきます。この作業にはCodexのテンプレート階層ページが役に立ちます。開発面でも、不足しているPHPをどんどん追加していくという使い方です。

ダウンロード

NC White (1411)

開発の経緯

WordPressのテーマをたくさん作っていると、毎回同じことを書いているな、と思う部分が出てきます。自分のマークアップのクセが反映されている部分でもあります。共通しているなら、親テーマとして外部化してしまい、案件によって違うところだけを書くことによって、テーマ開発にかかる時間を短縮させることができるのではないか？

というアイディアは、そもそも今年の2月のセミナーで、汎用的な親テーマをもとに、子テーマとしてテーマを開発すると効率的だ、というお話があったのがきっかけです。セミナーで紹介されていたのはTwentyTenとSandboxテーマだったのですが、TwentyTenは開発のベースにするには余計な機能が多すぎるのと、Sandboxは更新が止まっていることから、せっかくなら自作してしまおう…ということで、半年くらい色んな案件に入れて改善してきました。

他の事例

同梱しているリセットCSSを配布しているHTML5 Resetのサイトでも、HTML5対応、リセットCSSとjQuery/Modernizr同梱という非常によく似たコンセプトのテーマが配布されています。というか、ほぼこっちを使うのが良いのでは…と思います。

Sandboxは更新が止まっていますが、開発はToolboxテーマに引き継がれているそうです。HTML5に対応したクリーンでミニマルなテーマです。Toolboxの日本語リソースがOdysseygate.comで公開されています（@odysseyさん情報Tnxです！）。

め組の大名行列テーマも開発のベースとなる親テーマというコンセプトのテーマです。

最近だと関西のデザイナーのVanillateさんも最低限のCSSだけを用意した開発ベース用のBeeテーマを公開されていました。

WordPress3.0から導入された親テーマ、子テーマの仕組みは、このようにテーマ開発を効率化させる目的で色々なアプローチが試されているようです。これらを参考に、自分なりの開発ベース用テーマを作ってみてはいかがでしょうか？

---