1. テーマ作成のアプローチ
2013/02/17 瀬戸 貴弘

2. 瀬戸 貴弘
Twitter : @as_chachamaru
Facebook : as.chachamaru
職業 : システムエンジニア
WordPress暦
ブログ開始 Ver2.6～
本格的な勉強 2012年2月～

3. APPROACHES
今回のキーワード
子テーマ
スクラッチ
テーマフレームワーク

4. APPROACHES
例えばこんな人は？
WordPressでサイト構築したい！
HTMLやCSS得意じゃないしな・・・
自分のことｗ
デザインセンスもないし (￣Д￣；；

5. APPROACHES
公式ディレクトリなどから
完成しているテーマ探すのがはやい！
http://wordpress.org/extend/themes/

6. APPROACHES
アレンジしたくなる
#content {
margin: 0 34% 0 7.6%;
width: 58.4%;
background-color:red;
}
使っているといろいろアレンジしたくなるものです。。
例えばstyle.cssのファイルを直接書き換えてコンテンツ部分背景を赤にしてみた！

7. APPROACHES
アレンジしたくなる
#content {
margin: 0 34% 0 7.6%;
直接ファイルの上書きはしない方がいい！
width: 58.4%;
background-color:red;
}

8. APPROACHES
アレンジしたくなる
#content {
width: 58.4%; なぜ？
margin: 0 34% 0 7.6%;
background-color:red;
}

9. APPROACHES
アレンジしたくなる
#content {
margin: 0 34% 0 7.6%;
width: 58.4%;
background-color:red;
}
テーマは WordPressコアのバージョンアップ対応やバグ修正で
どんどん更新する。誤って更新しちゃうと。。。
WordPerssは親切なのでテーマに更新があると、管理パネルで知らせてくれる。

10. APPROACHES
アレンジしたくなる
#content {
margin: 0 34% 0 7.6%;
アレンジが全て吹っ飛ぶ (ﾉﾟρﾟ)ﾉ ｫｫｫ･･ｫ･･ｫ･
width: 58.4%;
background-color:red;
}
テーマの最新バージョンで上書きされる。

11. 新テーマにしちゃおう！ APPROACHES
と考えがちですが。。。
アレンジしたくなる
#content {
margin: 0 34% 0 7.6%;
width: 58.4%;
background-color:red; テーマ情報
} 書き換えちゃえ！
Style.css の冒頭の数行を書き換えるだけで新テーマにできる。

12. APPROACHES
アレンジしたくなる
#content {
margin: 0 34% 0 7.6%;
やらない方がいい！
width: 58.4%;
background-color:red;
}
自分の新テーマにしてしまえば、テーマの更新はないですが・・・

13. 新テーマにしちゃおう！ APPROACHES
と考えがちですが。。。
アレンジしたくなる
#content {
元となるテーマのバージョンアップができなくなる
margin: 0 34% 0 7.6%;
width: 58.4%;
background-color:red;
}
・WordPressコアのバージョンアップ対応は自分で。
・テーマの不具合対応も自分で。
全自己責任

14. APPROACHES
アレンジしたくなる
#content {
どうすれば？
margin: 0 34% 0 7.6%;
width: 58.4%;
background-color:red;
}

15. APPROACHES
アレンジしたくなる
#content {
margin: 0 34% 0 7.6%;
子テーマ
width: 58.4%;
background-color:red; おすすめ
}

16. 子テーマ APPROACHES
テーマは
親子関係が作れる
親子関係
親テーマ 子テーマ

17. 子テーマ APPROACHES
アレンジしたくなる
#content {
margin: 0 34% 0 7.6%;
width: 58.4%;
background-color:red;
}
親テーマのディレクトリ名
子供の名前は「Twenty Eleven Kid」。親の名前は「Twenty Eleven」です。

18. 子テーマ APPROACHES
アレンジしたファイルは
子テーマに置く
親子関係
親テーマ 子テーマ
先ほどと同様ファイルを書き換えますが、書き換えたファイルの置き場所が違う。上書きしない！

19. 子テーマ APPROACHES
子テーマが使える範囲は
親テーマ ＋ 子テーマ
同じファイル名があれば
子テーマ優先
親テーマ 子テーマ

20. 子テーマ APPROACHES
実質ファイルの上書き
親テーマ 子テーマ

21. 子テーマ APPROACHES
親テーマ 子テーマは
更新しても 影響受けない
親テーマ 子テーマ
親テーマはテーマ開発者に更新させればいい！アレンジ部分だけ自分で管理。

22. APPROACHES
アレンジしたくなる
#content {
親テーマがどのように更新されるか
margin: 0 34% 0 7.6%;
width: 58.4%;
わからないので更新したら全体チェックは必要！
background-color:red;
}

23. APPROACHES
子テーマ
親テーマの機能を継承し、その機能にさらに機能 長所
を追加したりその機能を調整したりする
短時間で簡単にカスタマイズできる。
親テーマをバージョンアップしても子テーマの変更は
維持される。

24. APPROACHES
子テーマ
親テーマの機能を継承し、その機能にさらに機能 短所
を追加したりその機能を調整したりする
親テーマに大きく依存する。
親テーマ解析のために時間必要（開発者の癖）。
アレンジが多すぎるとほとんど書き換えて子テーマ使
う意味あるの？

25. APPROACHES
子テーマ
アレンジしやすさ
子
開発工数
CSSだけ変更など変更点を最小限に済ませれば非常に開発工数が短縮できる。

26. APPROACHES
例えばこんな人は？
お客さんの要望に極力応えたい
UIが先に決まってぴったしのテーマが
見つからない
ゼロから作らないと気がすまない！

27. 欲しいテーマが見つからないなら
自分でつくっちゃえ！ APPROACHES
何も無い状態からコードを記述していくこと
スクラッチ

28. スクラッチ
APPROACHES
管理パネルでいろいろ設定したり、投稿できるよね

29. スクラッチ
APPROACHES
テーマに反映できる？

30. スクラッチ
APPROACHES
どうやって反映していいかわからない！
何をしていいかわからない！
テーマ作成のガイドラインがある！
http://wpdocs.sourceforge.jp/Theme_Review

31. スクラッチ
APPROACHES
本体機能の組み込む
テンプレートタグ
例えば機能の組み込み

32. スクラッチ
APPROACHES
ガイドラインは公式ディレクトリに
公開するためのテーマ作成用
無理に全部適応する必要はないが、
信頼・安定したテーマ作成の参考になる

33. スクラッチ
APPROACHES
ガイドラインに従って1つ1つ確認していくと時間がかかる。
だからといってチェックしないで、
お客さんからのクレームで修正すると信頼を落とす。
そこで
Theme-Check プラグイン

34. スクラッチ
APPROACHES
【Theme-Check】
ガイドラインに従ってチェックしてくれる。
（必須・警告・推奨・情報など）

35. スクラッチ
APPROACHES
Theme-Check プラグイン
効率よくテーマを開発できる！
Theme-Checkはあくまでチェックなのでガイドラインに従った組み込みは勉強必要

36. APPROACHES
スクラッチ
何も無い状態からコードを記述していくこと 長所
細かいところまで制御できる。
顧客の要望に応えやすい。

37. APPROACHES
スクラッチ
何も無い状態からコードを記述していくこと 短所
時間がかかる。
テーマ作成に知識が必要。
※テンプレート階層、プラグイン API フックなど
HTML、CSSやJavascriptの知識も必要。

38. APPROACHES
スクラッチ
アレンジしやすさ
ス
子
開発工数
ゼロから作くるから好きなように。。でも時間かかるよ

39. APPROACHES
テーマ作成のアプローチ
アレンジしやすさ
ス
テーマが完成しすぎて 開発に時間がかかり
お客さんの要望が多い すぎる。素人には難しい。
と使いにくい。
子
子 子テーマ ス スクラッチ 開発工数

40. APPROACHES
テーマ作成のアプローチ
アレンジしやすさ
ス
ここの段階が
あれば便利だな！
？
子
子 子テーマ ス スクラッチ 開発工数

41. APPROACHES
テーマ作成のアプローチ
アレンジしやすさ
ス
テーマフレームワーク
フ
子
子 子テーマ ス スクラッチ 開発工数

42. テーマフレームワーク APPROACHES
"Theme Framework" という言葉は
現在２つの意味を持つ
http://codex.wordpress.org/Theme_Frameworks

43. テーマフレームワーク APPROACHES
"Theme Framework" という言葉は
現在２つの意味を持つ
1 テーマの開発を助長するのに使われる
"ドロップイン"コードライブラリ
2 他のテーマにフォークされる、または親テーマテン
プレートとして使われるようなスタンドアローンの
base/starterテーマ
http://codex.wordpress.org/Theme_Frameworks

44. テーマフレームワーク APPROACHES
A "drop-in" code library framework
スタンドアローンテーマではない。
functions.phpファイルに組み込むことによって
テーマをブートストラップする。
日本語ドキュメントがほとんどない。
有料が多い。
こんなのがあるんだと頭の片隅にでも

45. テーマフレームワーク APPROACHES
Base/Starter Theme
スタンドアローンテーマではある。
テーマ開発をすばやく・柔軟にできる土台として設計。
一般に親テーマになるように提供される。子テーマ機能
を使ってテーマ開発を行う。
最近よく耳にするスターターテーマはこれのこと

46. Base/Starter Theme
APPROACHES
スタンドアローンテーマ
（一般のテーマ） Base/Starter Theme
親テーマに スタンドアローン
なれるよ テーマだよ
技術的にスタンドアローンテーマなら子テーマに対する親テーマとして使える。何が違うの？

47. Base/Starter Theme
APPROACHES
スタンドアローンテーマ
（一般のテーマ） Base/Starter Theme
親テーマになること、フォークされことに特化！

48. Base/Starter Theme
APPROACHES
スタンドアローンテーマ
（一般のテーマ） Base/Starter Theme
【特化】
現状のまま使うこともできるが、サイトデザインを仕上げるようなCSSスタイルや他の要素が欠けてい
ることがある。なぜならそのような要素は子テーマやフォークされる/派生テーマで加えられることを意
図されている。

49. APPROACHES
Base/Starter Theme
アレンジしやすさ
ゼロでもなく完成もしていないテーマ。 ス
ガイドラインに沿ってある程度枠組み作って
あげるからデザインは仕上げてください。
フ
子
子 子テーマ ス スクラッチ フ テーマフレームワーク 開発工数

50. Base/Starter Theme
APPROACHES
現状のまま使うこともできるが、サイトデザインを仕上げるようなCSSスタイルや他の要素が欠けてい
ることがある。なぜならそのような要素は子テーマやフォークされる/派生テーマで加えられることを意
図されている。
Underscores: Automattic社が開発したスターターテーマ

51. Base/Starter Theme
APPROACHES
ジェネレータを使って新規テーマを作成できる

52. Base/Starter Theme
APPROACHES
_s を Theme-Checkでチェックしてみた。WARNINGが1つあり。

53. Base/Starter Theme
APPROACHES
style.css headerから取り除く
WARNING: Found wrong tag, remove from your style.css header.

54. Base/Starter Theme
APPROACHES
テストに合格！ ガイドラインに沿ったベーステーマとなる。

55. Base/Starter Theme
APPROACHES
_s をそのまま表示。デザイン装飾が全くない。
サイトデザインはフォークまたは子テーマで仕上げる。

56. APPROACHES
まとめ
アレンジしやすさ
[base/starter テーマ]
ガイドラインを満たした基礎テーマと
なるので工数短縮。デザインをフォーク
または子テーマで仕上げる前提なので ス
アレンジしやすい。
長所：顧客要望に応えすい。
長所：親テーマに大きく依存する。 フ 短所：開発に時間がかかる。
短所：開発工数が短縮できる。 初心者には難しい。
子
子 子テーマ ス スクラッチ フ テーマフレームワーク 開発工数

57. APPROACHES
所感
初心者の方は余計な装飾がなくソースがみやすいスターターテーマ
で勉強すればわかりやすいと思います。ガイドラインに沿った最低
限の組み方が学べます。
WordPressを使った案件が多いなら、業種にあったオリジナルのスタータ
テーマを作るのもいいかも。お客さんごとのアレンジは子テーマですると開
発効率も上がります。
WordPressのテーマアプローチは、予算・工数・要望などにより最適なもは
違います。アプローチの選択肢に、テーマフレームワーク（スタータテー
マ・機能拡張ライブラリなど）もあることを覚えておきましょう！

58. APPROACHES
ご静聴ありがとうございます。