HiGash.Net ホームページへ戻る

Home [Blog] » WordCampフォローアップ:オリジナルテーマ作成のコツについて

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

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ページしかありませんけど。

Download

[2009/4/13アップ](Zip圧縮・890.9KB)

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

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

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

HiGash.Netのワイヤーフレーム

HiGash.Netを制作した際のワイヤーフレーム

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

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

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

HiGash.Netのデザインカンプ

HiGash.Netを制作した際のデザインカンプ

だけど、ハイクオリティなデザインを求めなければ、高機能なソフトでなくともブログのデザインはできます。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、今日(日付が変わって昨日になったけど)一日お疲れさまでした。

Share & Bookmark
このエントリをFacebookでシェアする
このエントリをTwitterでつぶやく
このエントリをはてなブックマークに追加
Delicious
livedoorクリップ
Yahoo!ブックマーク
Buzzurl

コメント/トラックバック

10 件のコメント/トラックバックをいただきました。ありがとうございます!!

  1. ゆりこ より:

    今回は、テーマライトニングトークにご参加頂きありがとうございます。
    段取りについては、そこそこ綿密に計画していたんですが、予想外のことが多すぎました。タイムスケジュールについては「どうしてもズレるもの」という考えでやっているので、臨機応応変に対応しています。「チーン」と鐘を鳴らして時間を守らせる方法もありますが、それはあまりやりたくないという方針です。
    プロジェクターが一番予想外で、1か月前に動作チェックをしたり、当日の開場前や昼休みに接続チェックをしていたんですが、いざ本番でうまく映らないという事態になりました。事前に試しているので「いきなり繋いでも大丈夫」という油断があったんでしょうね。

  2. WordCamp Tokyo 2009&懇親会参加しましたぁ~

    何気に、久々な記事投稿で・・・(^_^;)
    昨日は、先日投稿した「WordCamp Tokyo 2009」に
    参加してきました。
    公式サイトなら・・・
     WordCamp Japan
     WordCamp Tokyo 2009 開催日決定のお知らせ
    今回は…

  3. HiGash.Net より:

    > ゆりこさん
    さっそくコメントいただき、ありがとうございます。そしてお疲れ様でした。
    プロジェクターについては、少なくともライトニングトーク参加者はまったく事前準備というものがなかったので、皆さんも同じようなものなのかなという印象を受けてしまいました。事実、多くの方がプロジェクターとの接続に戸惑っていたわけで。
    この規模のイベントを運営するってのは大変でしょうし、トラブルも多々あるのは当然だと思っています。ただ、自戒の意味も込めて少しグダグダなところがあったな、という印象(反省)は素直にここに書き記しておきたいと思います。
    もちろん今回のイベントに満足された方もいらっしゃるでしょうし、すでにそういう感想をご自身のブログに書かれている方も見かけます。だけど、僕は「もっともっとできるんじゃないかな」という今後への期待を込めて、ちょっと厳しく偉そうなことをあえて言わせてもらいました。
    あ、Ktai Styleのプレゼン自体はとてもステキでしたよ。

  4. ゆりこ より:

    プロジェクターについては、少なくともライトニングトーク参加者はまったく事前準備というものがなかったので、

    あれれ? ライトニングトーク参加者にも事前接続をやってもらったつもりだったんですが、スタッフ間での連絡がまずかったのかもしれません。今回一番表示にトラブった Michael Pick さんなんて、その前に20分休憩時間があったので、そのときに表示テストをして、Michael さんのマシンから、休憩時間用の映像を出しておけばよかったんですよね。

  5. [...] オリジナルテーマ作成に向けての勘所 [...]

  6. detlog.org より:

    WordCamp Tokyo 2009 ブログレポートまとめ

    先ほど gihyo.jp 上の WordCamp レポートをご紹介しましたが、こちらではブログ上のレポートをまとめてみます。情報源はブログ検索、WordCamp Japan サイトのトラックバック&ピンバック、Twitter…

  7. ゆりこ より:

    プレゼン資料の公開ありがとうございます。WordCamp Japan のブログでもこの資料を紹介しようと思いますが、ライセンスはどうなっていますでしょうか?
    何でもよいというのであれば、他の発表者が多く利用している Creative Commons 表示-継承 3.0 Unported を推奨いたしますが、他のものでも当然構いません。お早めに回答頂けると幸いです。

  8. HiGash.Net より:

    > ゆりこさん
    ご連絡ありがとうございます。
    先日、マクラケンさんから同様のご連絡をいただき、
    ライセンスは GNU Free Documentation License です、とお伝えしました。
    メール返信できてなかったでしょうか??

  9. ゆりこ より:

    おっと、それは失礼いたしました。Nao さんとの連携が不十分だったようです。GFDL のバージョンは 1.3 でよろしいでしょうか? それとも 1.2 でしょうか? Wiki じゃないので、どちらでもあまり違いはないとも言えますが。

  10. HiGash.Net より:

    > ゆりこさん
    GFDLのバージョンは1.3でお願いします。

ぜひこのエントリーに対するコメントをお聞かせください。

以下のURLでトラックバックも受付けています。

http://higash.net/20090413/wordcamp2.html/trackback/

Preview

トラックバック
http://higash.net/20090413/wordcamp2.html/trackback/

Page Top