Duotone の子テーマを作ろう、そうしよう - Wordcamp Fukuoka 2010

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

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

11. Duotone? 10

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

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

Duotone の子テーマを作ろう、そうしよう - Wordcamp Fukuoka 2010

You are reading a preview.

Check these out next

Duotone の子テーマを作ろう、そうしよう - Wordcamp Fukuoka 2010

More Related Content

Similar to Duotone の子テーマを作ろう、そうしよう - Wordcamp Fukuoka 2010 (20)

Recently uploaded (20)