1. Duotone の⼦テーマを
作ろう、そうしよう
@Odyssey
0

2. 1

3. おでこ おかねがたりません
サラリーマン
WordPress 歴： 4年
まけずぎらい WordPress 0.9.5 に出会う
せいべつ：おとこ WordPress ME 2.0 を使う
レベル： ８ WordPress オフに参加
WordPress 公式⽇本語サイ
せいそくち： とうきょう
ト運営チーム
WordPress ⽇本語版作成
E ハイストリートのふく チーム
E ケータイ WordCamp/Bench に参加
E アイフォーン WordBench 英語部
E アイポッドナノ WordBench 写真部
E ニンテンドー・ディーエスライト
E プレイステーション・ポータブル
E マックブック・エアー
2

4. http://www.odysseygate.com
http://wp.me/4v7y
3

5. WordCamp Tokyo 2008
4

6. WordCamp Tokyo 2009
5

7. WordCamp Kyoto 2009
6

8. WordBench 写真部
7

9. 8

10. 9

11. Duotone?
10

12. http://duotonedemo.wordpress.com
11

13. http://duotonedemo.wordpress.com
12

14. http://duotonedemo.wordpress.com
13

15. 写真を投稿すると、
その写真が最も映える
ように⾊が変化する
14

16. すてきやん
15

17. でも…
16

18. c クライアントにあった
デザインにしたい
c ⾃分流デザインにしたい
17

19. そこで
18

20. Duotone の⼦テーマを
作ろう、そうしよう
19

21. ⼦テーマ？
20

22. 親テーマ Parent Theme
d元／ベースとなるテーマ
dフレームワークはもちろん
dどのテーマでもOK
⼦テーマ Child Theme
d親テーマのテンプレートファイル
を受け継ぐ
d必要に応じて上書きする
d時間も節約できる
21

23. ⼦テーマの作り⽅
22

24. 1
wp-content
themes
duotone
23

25. 1 親テーマと同じ階層に
⼦テーマのディレクトリを置く
wp-content
themes
duotone
duotone_child_theme
中⾝は style.css と screenshot.png だけでOK
24

26. 2 ⼦テーマの style.css に
Template: 親テーマ
/*
Theme Name: duotone_child_theme
Theme URI:
Description: Duotone's child theme.
Version: 1.0.0
Template: duotone
Author:
Author URI:
Tags: photoblogging,one-column,fixed-width
*/
25

27. 3
親テーマ
⼦テーマ
これだけでテーマとして認識されます
26

28. ⼦テーマのメリット
27

29. 親テーマにバージョンアップが
あっても、対応できる
duotone バージョンアップ
duotone_child_theme 影響なし
親テーマの素敵な機能が
そのまま使える
28

30. こんなことができるのも
29

31. GPL
のおかげ
30

32. Great Pacific Lawson
GPL
©digitalcube webnist
のおかげ
General Public Licence
31

33. というわけで…
32

34. テーマを作っていきます
33

35. lifestream
Lifestream
34

36. Lifestream の仕組み
ktai
Mail w/ a photo
Ktai Entry
ゆりこ さん
DuotoneNoël さん
Simple TweetWokamoto さん
35

37. Twitpic もいいけど、
⾃分のスペースに写真を
ためたいなぁと思って作成
36

38. ⼦テーマの⽬標
・背景⾊が変化することを活かす
・テイストは⾃分流
・公開してみんなに⾒てもらう
37

39. 調理の仕⽅
1style.css に記述
2 を上書き
テンプレートファイル
38

40. body.horizontal (.vertical) index.php
div#page
div#header
h1
div.description
ul#menu
div#content
div#sleeve
div.image
div.nav .prev
img
div.nav .next
div#container
h2
div#postmetadata
div#post
div.navigation
div.prev
div.next
div.sidebar
ul
li
div#footer
p.info
form#searchform
39

41. body.horizontal .archive archive.php
div#page
div#header
h1
div.description
ul#menu
div#content
div#sleeve
div.archive
ul#filters
li
h2
ul.thumbnails
div.nav
div.prev
div.next
div.sidebar
ul
li
div#footer
p.info
form#searchform
40

42. 構造に注意しながら
デザインデザイン
41

43. 表⽰⽂⾔を変えたいときは？
要素を増やしたいときは？
42

44. テンプレートファイルを
上書きするのがかんたん
⼦テーマにfunctions.php
を⽤意するという⽅法も…
43

45. duotone duotone_child_theme
⼦テーマに⽤意した
header.php
footer.php
style.css
が読み込まれる
44

46. ただし、functions.php
だけは注意
読み込み順は
1.⼦テーマのfunctions.php
2.親テーマのfunctions.php
上書きできない(>_<)
45

47. 画像等の参照は
×<?php bloginfo(ʻtemplate_urlʼ)/images/ex.png ?>
〇<?php bloginfo(ʻstylesheet_urlʼ)/images/ex.png ?>
∵⼦テーマなので
46

48. さぁ、後は
みなさんお得意の
コーディングの
お時間です。
47

49. こういう⾵に作っています
CSS をコーディング
こちらで変化を確認 HTML構造を確認
48

50. もくもく…
49

51. もくもく…
WordBench もくもく部
関東近郊で随時開催中
50

52. 完成！
51

53. http://lifestream.odysseygate.com
http://wp.me/B1G1
52

54. みんなで作ろう、そうしよう
http://wordpress.org/extend/themes/duotone
53

55. 54

56. ここで告知
55

57. WordCamp Yokohama 2010
開催決定!!!
開催⽇程： 2010年 5⽉29⽇(⼟)
開催場所： 東京都市⼤学 横浜キャンパス
（横浜市都筑区）
主催： WordCamp Yokohama 2010 実⾏委員会
共催： 東京都市⼤学 環境情報学部 ソーシャルメディア・
プロジェクト（旧 現代ＧＰプロジェクト）
56

58. WordCamp Fukuoka
には負けないぞ！
57

59. GAME OVER
-------Odyssey-------
Odysseygate+wcfukuoka2010@gmail.com
Twitter: @odyssey
http://www.odysseygate.com/
http://lifestream.odysseygate.com/
58