WordCampフォローアップ：オリジナルテーマ作成のコツについて

WordCamp Tokyo 2009 に行ってきました。僕もたった5分だけですど、 「テーマ・ライトニングトーク」 というコーナーでスピーカーとしてお話させていただきました。

500人ほど収容できる会場と聞いていたので、たくさんの方がいらっしゃるのかなと思ったのですが、想像していたより参加者は少なかったと思います。
100人以上はいたんじゃないかと思うけど、200人とか300人とかいたようには見えなかったな。

スピーカーとしてちょっとだけ参加させていただいた僕から見ても、ちょっと段取りが悪くて、タイムスケジュールも守られず、全体にアマチュア感漂うイベントだった印象は否めません（汗）。
プロジェクターがうまく映らずに手間取ったり。みんな事前にチェックしないで本番でいきなりPC繋げてるんだもん、そりゃきちんと映らないよね・・・。ライトニングトークもほんと、行き当たりバッタリな展開で、お見苦しい点もあったかと思いますがお許しください（って、僕はイベントの進行には携わっていないのだけれど）。

ただWordPressユーザーにとって、こうしたイベントが開催されること自体が大切なことだと思うし、こういう機会を作ってくださった実行委員会の方々には感謝します。
いろんな意味で、WordPressコミュニティはまだまだ発展していくんだと信じているし、これからに期待しています。

いきなりネガティブなコメントをしてしまったけど、もちろん収穫もありました。

今まで当サイトは携帯対応をまったく考えてこなかったけど、池田百合子さんの Ktai Style はプレゼンを聞いてみて素直に導入してみたいな、と思いました。Ktai Styleの存在自体は前から知っていたんですけど、僕はiPhoneユーザーなので携帯対応ってあまり考えたことがなかった。

もちろん、WordPressの創始者 Matt Mullenwegを生で見られたのもよかったです（でもスピーチに同時通訳がつかなかったのはなぜだろう？ Matt本人の希望と聞いたけど、納得がいく説明はなかったなぁ）。
彼は僕より3つも若くてまだ25歳だから驚きです。ちょっとだけ刺激を受けました。

さて、ようやくここから本題です。WordCampで触りだけお話させていただいた オリジナルテーマ作成のコツ についてなんですが、ここにその全内容をまとめて公開したいと思います。

あらかじめお断りしておきますが、このオリジナルテーマ作成のコツは特にWebデザイナーにターゲットを絞って書いているわけではありません。
趣味でブログを作っている方々も含めて WordPressを愛するすべての人 を対象にしたエントリーですので、かなり包括的・基本的な内容になっていますことをご承知おきください。

プレゼンテーション用スライドのダウンロード

まずWordCampで使用したスライドのPDFを公開しますので、ご興味のある方は下の「ダウンロード」ボタンよりダウンロードをお願いします。

5分用のスライドなので表紙も入れて7ページしかありませんけど。

［2009/4/13アップ］（Zip圧縮・890.9KB）

1. まずは理想のトップページを描いてみよう

WordCampでお話ししたのはこれだけですが、 あらかじめ自分のなかに理想のテーマを思い描く ってことがやはり一番重要なことだと思います。
すごく当たり前のことなんだけど、いきなりソースコードを弄りはじめちゃう人って案外多いんじゃないかな。
いきなりとは言わないまでも、きちんと自分の作りたいサイトを思い描かないままソースコードを弄りはじめちゃったり。

ソースコードを書きながら「ここに何を表示しようかな」とか「ここどうやってレイアウトしようかな」っていうやり方では、なかなかいいモノは作れない。
そういうアプローチは「自分が何を表現したいか」ってことよりも、技術的に楽な方法を選択しただけのアウトプットを生み出しがちです。

オリジナルのテーマを作ろうと思ったら、まず ワイヤーフレーム（見取り図） を作りましょう。

ページの幅はいくつにするか、カラムは2段なのか3段なのか、グローバルナビゲーションをどこに置くか、サイドバーは右か左か、サイドバーやフッターには何を表示するのか。
「こんなの作りたい」っていうブログを見つけて参考にしながら、ワイヤーフレームを作ってみることがスタート地点です。

ワイヤーフレームを作ったら、それを具体的な絵に落とし込んであげましょう。
PhotoshopやFireworksを使えるなら、もちろんそういったツールを使ったほうがいいと思います。

だけど、ハイクオリティなデザインを求めなければ、高機能なソフトでなくともブログのデザインはできます。GIMPを使うもよし、ペイントを使うもよし、Webサービスのジェネレーターで作ったパーツを組み合わせてもよし。

ちなみになぜ「トップページ」を描くのかと言われれば、もちろんトップページが一番重要だからです。

また、ブログではない一般的なWebサイトの場合、トップページと下層ページのデザインはかなり異なることが多いんですが、ブログの場合はトップページと下層ページはそれほどレイアウトに差がないのが一般的です。

つまり、 トップページさえ押さえておけば下層ページは基本的にそれを使い回して考えられます 。
もちろん、トップページと下層ページのレイアウトデザインを大きく変えたい場合にはトップページだけでなく、下層ページの画面設計もあらかじめ行っておく必要があります。

2. 画面遷移を頭に入れておこう

ブログを一度も作ったことがない人にとっては、ブログのサイト構成を考えるのは少し難しいかもしれません。
そもそもメニューをどう構成するのか、カテゴリーやタグをどう付けるか、アーカイブページをどのように表示するのか。

普通、ブログはツリー型のサイト構成にはならないから、一般的なWebサイトの構成はあまり参考になりません。
お気に入りのブログを見つけて参考にしながら、簡単にサイト構成を練ってみるとよいでしょう。

3. デフォルトテーマ Kubrickを弄ろう

ここは近道はないと思います。
デフォルトテーマであるKubrickのソースコードを上から順番に追っていきながら、自分流にカスタマイズしてみましょう。

もちろん自分の完成形のイメージに近いテーマを探してきて、それをカスタマイズするのもひとつの手です。
だけど、完全にオリジナルのテーマを作りたいなら、シンプルで癖のないKubrickから弄ってみることをオススメします。

WordPressのテーマファイルにはPHPも少し書かれていますが、HTMLとCSSがある程度ばっちり書ける人ならカスタマイズはそれほど難しくないはずです。ifによる条件分岐とかはすぐに覚えられるだろうし、テンプレートタグについては テンプレートタグ – WordPress Codex 日本語版 または Template Tags « WordPress Codex を参考にするとよいでしょう。

4. コアファイルは弄らない。標準でできないことはプラグインで

標準のテンプレートタグでは実装できないからと言って、 テーマファイル（wp-content/themes内のファイル）以外のコアファイルを弄ることはオススメしません 。

WordPressはわりと頻繁にアップグレードされますし、特にセキュリティ上のアップデートの場合はアップデートを適用しないわけにいきません。
テーマファイル以外はアップグレードによってソースコードが書き変わる可能性があります。当然、自動アップグレードを利用すれば古いファイルは上書きされてしまいますので、アップグレードのたびにコアファイルを修正する必要がでてきます。

では、テンプレートタグで実装できない機能はどう実現するのか。
答えはもちろんプラグイン。 コアファイルを弄らなくとも、たいていの機能はプラグインで実装できるのではないかと思います。

WordPressの特徴は何と言っても豊富なプラグインです。
比較的ドメスティックなMovableTypeと違って、WordPressは世界じゅうで多くのユーザーに利用されていますから、とにかくいろんなプラグインが存在するのが魅力的です。

当サイトでも過去に 押さえておきたいWordpressプラグインまとめ［2008年10月版］ というエントリーでWordPressの便利なプラグインをご紹介しています。

そして、PHPに理解のある人なら自作プラグインを作ることだってそれほど難しいことではないかもしれません。僕はちょっと複雑なPHPは友人に教えてもらわないとわからないけど・・・。

5. 困ったらググる。フォーラムを覗いてみる

プラグインでは解決できないけど、どうしてもやりたいことがある。
そんなときはコアファイルを直接弄ってしまう前にとりあえずググってみましょう。

世の中広いですから、自分と同じようなことを考えている人は一人ぐらいいてもおかしくありません。
たとえば、以前僕は wp_list_pages() の出力を少し弄りたいと思ったことがありました。通常、出力されるリストは以下のようなソースコードになります。

<li class="current_page_item"><a href="#">Page 1</a></li>
<li class="page_item page-item-2"><a href="#">Page 2</a></li>

ですが、僕はデザインの都合で <li> のなかに <span> を入れたかったんです。

ググった結果、案の定まったく同じことを考えている人がいました。
10 Killer WordPress Hacks | Website Design Blog の8番目に紹介されている Using CSS Sliding Doors in WordPress Navigaton に wp_list_pages() の出力結果の <li> 中に <span> を放り込む方法が紹介されています。

もちろん、ググる以外にも素直に WordPress.org の フォーラム を覗いてみたり、質問してみたりするのもよいでしょう。
ググった結果辿り着いたページがWordPress.orgのフォーラムだったということも多々あります。

6. JavaScriptで味付けしよう

最後はおまけ。

当サイトはJavaScript（jQuery）でいろんなところを味付けしています。
ページ右上のRSSマークをホバーした際のポップアップ、本文部分の文字色・背景色の変更、サイドバーのタブ（カテゴリー／タグ／アーカイブ）、個別記事の本文のスライダー、画像のLightbox、コメントのプレビュー機能、ページ内リンクのスムーススクロール・・・。

実は近年、WebサイトのRIA化が顕著なので「仕事に使える技術はどれかな〜」と実験的に様々な機能を取り入れているというのが本音です。
実際に当サイトで試したJavaScriptが仕事に生かされたことも多いです。 JavaScriptがユーザーインターフェースやユーザーエクスペリエンスの向上に一役買っていることは間違いありません。

また、テーブルを偶数・奇数で塗り分けるなど、IE6で対応していないCSS3のセレクタを利用する際にもJavaScriptは大変便利です。

ただ、JavaScriptを使用する際にひとつ注意なのはJavaScriptがOFFの環境のことを考えておくこと。
エフェクトやデザインのために使用しているJavaScriptは、JavaScriptが読めない環境でもページが全く見えなくなるようなことはありません。しかし、JavaScriptをOFFにした環境で大幅にページレイアウトやユーザーインターフェースが変わる場合は <noscript> タグでページが正常に表示できていない旨アナウンスすることを検討する必要があるでしょう。

以上、僕が考えるWordPressオリジナルテーマ作成のコツでした。
最後に、WordCampを主催された実行委員会のみなさん、参加された方々、そして来日してくれたMatt、今日（日付が変わって昨日になったけど）一日お疲れさまでした。