Duotone の子テーマを作ろう、そうしよう - Wordcamp Fukuoka 2010
- 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
- 16. すてきやん 15
- 17. でも… 16
- 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
- 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
- 45. duotone duotone_child_theme ⼦テーマに⽤意した header.php footer.php style.css が読み込まれる 44
- 47. 画像等の参照は ×<?php bloginfo(ʻtemplate_urlʼ)/images/ex.png ?> 〇<?php bloginfo(ʻstylesheet_urlʼ)/images/ex.png ?> ∵⼦テーマなので 46
- 49. こういう⾵に作っています CSS をコーディング こちらで変化を確認 HTML構造を確認 48
- 50. もくもく… 49
- 52. 完成！ 51
- 53. http://lifestream.odysseygate.com http://wp.me/B1G1 52
- 55. 54
- 56. ここで告知 55
- 57. WordCamp Yokohama 2010 開催決定!!! 開催⽇程： 2010年 5⽉29⽇(⼟) 開催場所： 東京都市⼤学 横浜キャンパス （横浜市都筑区） 主催： WordCamp Yokohama 2010 実⾏委員会 共催： 東京都市⼤学 環境情報学部 ソーシャルメディア・ プロジェクト（旧 現代ＧＰプロジェクト） 56
- 58. WordCamp Fukuoka には負けないぞ！ 57
- 59. GAME OVER -------Odyssey------- [email protected] Twitter: @odyssey http://www.odysseygate.com/ http://lifestream.odysseygate.com/ 58