Sandbox テーマとは
Sandbox という画期的なコンセプトのテーマが最近注目されていて、WordPress の次期デフォルト・テーマの有力候補とも目されています。
Update: 2007年12月25日に公開された Sandbox 1.2 についてこちらに書きました。
従来 WordPress のテーマというのは PHP テンプレートと CSS のスタイルシートがパッケージ化されたものでしたが、Sandbox ではこれらを明確に分離して、スタイルシート部分を “スキン” という新導入のレイヤーに置き換えました。テンプレートは単一のまま、スキンは複数から選ぶことができます。ちょうど現在テーマを複数から選んでいるように、Sandbox テーマの中でスキンを選ぶことができるようになるというわけです。
従来のテーマでは PHP と CSS の両方を理解していないとテーマの中身をいじることが難しかったので、デザイン担当とコーディング担当に分業するような場合に少々都合が悪かったですが、Sandbox ではその辺がやりやすくなると思います。
単にスキンが選べるようになるだけではありません。Sandbox ではテンプレートの主要な要素の class 属性に豊富なセマンティック情報を盛り込んでいて、そのおかげで CSS のセレクタ指定の自由度が格段に高くなっています。実際に見た方が早いですが、
<body class="wordpress y2006 m08 d16 h03 single s-y2006 s-m08 s-d06 s-h10
s-category-uncategorized s-author-admin loggedin">
例えばこの body 要素に見られるように、今表示しているページにどのような情報が含まれているかを示すかなり細かい情報がクラスとして盛り込まれます。
クラス指定の全種類とそれぞれの意味について最後に一覧でまとめています。
Sandbox は hAtom マイクロフォーマットをサポートしています。hAtom についてはまだ良くわかっていませんが、ブログやニュース記事などが持つセマンティック情報を class 属性などの形で XHTML そのものの中に埋め込む仕様のようです。この辺はもう少しわかったら詳しく書きたいと思います。
インストールと日本語化
Sandbox テーマは 2.0 以降の WordPress に対応しています。ここからダウンロードしたら、普通のテーマと同じように <WP_INSTALL>/wp-content/themes/ 以下に展開して、管理パネルにログインして [Presentation] » [Themes] から Sandbox を選択します。スキンの選択は [Presentation] » [Sandbox Skins] から行ないます。
スキンの CSS ファイルは Sandbox を展開したディレクトリの中の skins ディレクトリに配置されています。オリジナルのスキンを作成する場合はここに CSS を置いて、他のスキンを参考に冒頭のコメント部分にスキンの説明を加えます。
表示されるテキストを日本語化したい場合は、gettext の日本語翻訳を行ないましたのでこちらの翻訳ファイルをダウンロードしてお試し下さい。ja.mo を <WP_INSTALL>/wp-content/themes/sandbox に配置して使います。
(※ wp-config.php での WPLANG の定義が ja ではなく ja_UTF の場合は ja.mo のファイル名を ja_UTF.mo に変えて使って下さい。)
誤訳や不適切な部分がありましたらコメントでお知らせ下さい。また自分なりに言い回しを少し変えて使いたいという方はこちらを参考に ja.po を編集してお使い下さい。
セマンティックなクラスがセットされる要素
class 属性にセマンティック情報がセットされる要素は次の3種類です。
- トップレベルの body 要素
例:
<body class="wordpress y2006 m08 d17 h10 archive category category-uncategorized loggedin"> - ポストの div 要素
例:
<div id="post-7" class="hentry p1 post private author-admin category-uncategorized category-blogroll y2006 m08 d11 h09"> - コメントの li 要素
例:
<li id="comment-2" class="comment c0 byuser commentauthor-admin bypostauthor c-y2006 c-m08 c-d11 c-h10 alt">
以下、セットされるクラスとその説明の一覧です。
ボディのクラス
テンプレート関数 sandbox_body_class() により生成されます。
| クラス | 説明 |
|---|---|
| wordpress | 常にセットされる。 |
| y{YYYY} | 現在の年(ローカルタイムゾーンに基づく)。例: y2006 |
| m{MM} | 現在の月(01～12、ローカルタイムゾーンに基づく)。例: m12 |
| d{DD} | 現在の日(01～31、ローカルタイムゾーンに基づく)。例: d31 |
| h{HH} | 現在の時(00～23、ローカルタイムゾーンに基づく)。例: h23 |
| home | ホームページが表示されている(is_home() が真である)場合にセットされる。 |
| archive | アーカイブのページが表示されている(is_archive() が真である)場合にセットされる。アーカイブにはカテゴリーや日付、執筆者を基準にしたアーカイブがあり、これら全てを含む。 |
| date | 日付を基準にしたアーカイブ(例えば「8月の月間アーカイブ」など)のページが表示されている(is_date() が真である)場合にセットされる。 |
| search | 検索結果のページが表示されている(is_search() が真である)場合にセットされる。 |
| paged | ページ分割された何らかのページ(例えば「8月の月間アーカイブの2ページ目」など)が表示されている(is_paged() が真である)場合にセットされる。 |
| attachment | アタッチメントのページが表示されている(is_attachment() が真である)場合にセットされる。 |
| four04 | 404 エラーページが表示されている(is_404() が真である)場合にセットされる。 |
| single | 単一ポストのページが表示されている(is_single() が真である)場合にセットされる。次の6種の s-* クラスが single に付随する。 |
| s-y{YYYY} | ポストの公開年(ローカルタイムゾーンに基づく)。例: s-y2006 |
| s-m{MM} | ポストの公開月(01～12、ローカルタイムゾーンに基づく)。例: s-m12 |
| s-d{DD} | ポストの公開日(01～31、ローカルタイムゾーンに基づく)。例: s-d31 |
| s-h{HH} | ポストの公開時(00～23、ローカルタイムゾーンに基づく)。例: s-h23 |
| s-category-{カテゴリー・スラッグ} | ポストを含むカテゴリーのスラッグ。カテゴリーの個数分セットされる。例: s-category-books |
| s-author-{執筆者ログイン名} | ポスト執筆者のログイン名。例: s-author-admin |
| author | 執筆者を基準にしたアーカイブのページが表示されている(is_author() が真である)場合にセットされる。次の author-* クラスが author に付随する。 |
| author-{執筆者ログイン名} | 執筆者のログイン名。例: author-admin |
| category | カテゴリーを基準にしたアーカイブのページが表示されている(is_category() が真である)場合にセットされる。次の category-* クラスが category に付随する。 |
| category-{カテゴリー・スラッグ} | カテゴリーのスラッグ。例: category-books |
| page | ページが表示されている(is_page() が真である)場合にセットされる。次の page-* クラスが page に付随する。 |
| page-author-(authorlogin) | ページの執筆者のログイン名。例: page-author-admin |
| loggedin | ログイン中のユーザがアクセスしている場合にセットされる。 |
ポストのクラス
テンプレート関数 sandbox_post_class() により生成されます。
| クラス | 説明 |
|---|---|
| hentry | 全てのポストでセットされる。hAtom の仕様。 |
| p{位置} | リスト中の位置。例: p5 |
| alt | 位置が奇数の場合にセットされる。 |
| {post type} | ポストの post_type プロパティ。post / page / attachment のいずれか。WordPress 2.0.* 以前ではセットされない。 |
| {post status} | ポストの post_status プロパティ。publish / draft / private / inherit / future のいずれか。WordPress 2.0.* 以前では static / object / attachment も。 |
| author-{執筆者ログイン名} | ポスト執筆者のログイン名。例: author-admin |
| category-{カテゴリー・スラッグ} | ポストを含むカテゴリーのスラッグ。カテゴリーの個数分セットされる。例: category-books |
| y{YYYY} | ポストの公開年(ローカルタイムゾーンに基づく)。例: y2006 |
| m{MM} | ポストの公開月(01～12、ローカルタイムゾーンに基づく)。例: m12 |
| d{DD} | ポストの公開日(01～31、ローカルタイムゾーンに基づく)。例: d31 |
| h{HH} | ポストの公開時(00～23、ローカルタイムゾーンに基づく)。例: h23 |
コメントのクラス
テンプレート関数 sandbox_comment_class() により生成されます。
| クラス | 説明 |
|---|---|
| {commnet type} | コメントの comment_type プロパティ。comment / trackback / pingback のいずれか。 |
| c{位置} | リスト中の位置。例: c5 |
| alt | 位置が奇数の場合にセットされる。 |
| byuser | ログインしたユーザからのコメントの場合にセットされる。 |
| commentauthor-{ログイン名} | コメント送信ユーザ名。例: commentauthor-admin |
| bypostauthor | ポスト執筆者とコメント送信ユーザが同一の場合にセットされる。 |
| c-y{YYYY} | コメントの送信年(ローカルタイムゾーンに基づく)。例: c-y2006 |
| c-m{MM} | コメントの送信月(01～12、ローカルタイムゾーンに基づく)。例: c-m12 |
| c-d{DD} | コメントの送信日(01～31、ローカルタイムゾーンに基づく)。例: c-d31 |
| c-h{HH} | コメントの送信時(00～23、ローカルタイムゾーンに基づく)。例: c-h23 |
Sandbox 0.6.1 のコードをベースにまとめました。
iDeasilo 
10 replies on “Sandbox テーマ”
日本語化ありがとうございます。
早速使わせてもらってみたのですが、テキスト等が日本語化されず、悩む事3時間。
何の気なしに「ja.mo」を「ja_UTF.mo」にしてテーマフォルダに入れたらあっさりと日本語化されました・・・
良いのか悪いのかよく分かりませんが、とりあえずこれで使って見たいと思います。
ちなみに兄が使っているサーバーは「さくらのレンタルサーバ」です。
ご指摘ありがとうございます。それで正しいです。
とりあえず本文に注釈加えました。
最初から書いておけばよかったですね。3時間も悩ませて申し訳ないです…
初めまして。
このサイトで発見したsandboxを只今カスタマイズしている
PHP初心者の石川です。こちらのサイトで勉強させて頂いてます。
一つわからないところがあるので教えて頂けたらと思います。
只今WordPressを楽しみながらカスタマイズしているところで、
Sandboxに出会い、テーマをSandboxに変えてあまりの便利さに
驚いているところなのですが、
記事投稿をする際にデフォルトのテーマを利用していたときは
「記事の分割（Split post with More tag →･･･more･･･と表示）」がきちんと分割されて、ウェブ上でmoreというところをクリックすると、
分割した下の部分が表示になったのですが、
sandboxをテーマにしてから、分割して投稿したはずなのに、
全部一つながりの投稿として表示されてしまいます。
プログラム上の何かが足りなかったりするのでしょうか？
なにしろPHPもままならない”ひよっこ”なものですから、
へんてこな質問でしたら申し訳ありません。
急ぎではありませんので、
お時間のある際に返答頂けたら嬉しいです。
すみません、宜しくお願いします。
石川さん、
コメントありがとうございます。今時間が取れないので調べることができませんが Sandbox のテンプレート中でそのように作ってあるものと予想しています。ただそういうご質問はオープンなフォーラムでして頂くのが適切です。ここは個人的なブログですので見ている人もごく少数です。フォーラムで質問していただければ他の大勢の方にとっての参考にもなります。
あしからず、ご了解ください。
(ご参考までに) WordPress Japan フォーラム一覧: http://phpbb.xwd.jp/
お答えいただいてありがとうございます。
ご指摘いただいたように、ご紹介いただいたオープンフォーラムにて
再度質問をしてみようと思います。
お忙しいところありがとうございます。
カスタマイズ頑張ります！
[…] ついでに日本語リソースも作ろうかと思っていたら、、すでに三好さんという方が作成されていた！ことをいまさっき知りました。しかもSandboxを分かりやすく解説されているので、「Sandboxって何よ？！」って方は一度ご覧になるといいっすよ！ […]
[…] Sandbox テーマ ＠ iDeasilo […]
[…] Sandbox テーマ « iDeasilo […]
[…] class と id についての詳しい説明は、Miyoshiさんの記事Sandbox テーマとSandbox […]
[…] Sandbox ページ構造を定義するPHPを含むテンプレートファイルと、レイアウトを行うファイル（スキン）とを切り離し、一つのテンプレートに対してスキンを切り替えることで見た目の変更をするテーマ。iDeasiloさんが日本語化しています。 この日本語化ファイルSandboxに適用してスキンをいくつか試してみるとこの構造の意義がよくわかる。 […]