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

2,615 views

Published on

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,615
On SlideShare
0
From Embeds
0
Number of Embeds
170
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. Duotone の⼦テーマを 作ろう、そうしよう @Odyssey 0
  2. 2. 1
  3. 3. おでこ おかねがたりません サラリーマン WordPress 歴: 4年 まけずぎらい WordPress 0.9.5 に出会う せいべつ:おとこ WordPress ME 2.0 を使う レベル: 8 WordPress オフに参加 WordPress 公式⽇本語サイ せいそくち: とうきょう ト運営チーム WordPress ⽇本語版作成 E ハイストリートのふく チーム E ケータイ WordCamp/Bench に参加 E アイフォーン WordBench 英語部 E アイポッドナノ WordBench 写真部 E ニンテンドー・ディーエスライト E プレイステーション・ポータブル E マックブック・エアー 2
  4. 4. http://www.odysseygate.com http://wp.me/4v7y 3
  5. 5. WordCamp Tokyo 2008 4
  6. 6. WordCamp Tokyo 2009 5
  7. 7. WordCamp Kyoto 2009 6
  8. 8. WordBench 写真部 7
  9. 9. 8
  10. 10. 9
  11. 11. Duotone? 10
  12. 12. http://duotonedemo.wordpress.com 11
  13. 13. http://duotonedemo.wordpress.com 12
  14. 14. http://duotonedemo.wordpress.com 13
  15. 15. 写真を投稿すると、 その写真が最も映える ように⾊が変化する 14
  16. 16. すてきやん 15
  17. 17. でも… 16
  18. 18. c クライアントにあった デザインにしたい c ⾃分流デザインにしたい 17
  19. 19. そこで 18
  20. 20. Duotone の⼦テーマを 作ろう、そうしよう 19
  21. 21. ⼦テーマ? 20
  22. 22. 親テーマ Parent Theme d元/ベースとなるテーマ dフレームワークはもちろん dどのテーマでもOK ⼦テーマ Child Theme d親テーマのテンプレートファイル を受け継ぐ d必要に応じて上書きする d時間も節約できる 21
  23. 23. ⼦テーマの作り⽅ 22
  24. 24. 1 wp-content themes duotone 23
  25. 25. 1 親テーマと同じ階層に ⼦テーマのディレクトリを置く wp-content themes duotone duotone_child_theme 中⾝は style.css と screenshot.png だけでOK 24
  26. 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. 27. 3 親テーマ ⼦テーマ これだけでテーマとして認識されます 26
  28. 28. ⼦テーマのメリット 27
  29. 29. 親テーマにバージョンアップが あっても、対応できる duotone バージョンアップ duotone_child_theme 影響なし 親テーマの素敵な機能が そのまま使える 28
  30. 30. こんなことができるのも 29
  31. 31. GPL のおかげ 30
  32. 32. Great Pacific Lawson GPL ©digitalcube webnist のおかげ General Public Licence 31
  33. 33. というわけで… 32
  34. 34. テーマを作っていきます 33
  35. 35. lifestream Lifestream 34
  36. 36. Lifestream の仕組み ktai Mail w/ a photo Ktai Entry ゆりこ さん DuotoneNoël さん Simple TweetWokamoto さん 35
  37. 37. Twitpic もいいけど、 ⾃分のスペースに写真を ためたいなぁと思って作成 36
  38. 38. ⼦テーマの⽬標 ・背景⾊が変化することを活かす ・テイストは⾃分流 ・公開してみんなに⾒てもらう 37
  39. 39. 調理の仕⽅ 1style.css に記述 2 を上書き テンプレートファイル 38
  40. 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. 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. 42. 構造に注意しながら デザインデザイン 41
  43. 43. 表⽰⽂⾔を変えたいときは? 要素を増やしたいときは? 42
  44. 44. テンプレートファイルを 上書きするのがかんたん ⼦テーマにfunctions.php を⽤意するという⽅法も… 43
  45. 45. duotone duotone_child_theme ⼦テーマに⽤意した header.php footer.php style.css が読み込まれる 44
  46. 46. ただし、functions.php だけは注意 読み込み順は 1.⼦テーマのfunctions.php 2.親テーマのfunctions.php 上書きできない(>_<) 45
  47. 47. 画像等の参照は ×<?php bloginfo(ʻtemplate_urlʼ)/images/ex.png ?> 〇<?php bloginfo(ʻstylesheet_urlʼ)/images/ex.png ?> ∵⼦テーマなので 46
  48. 48. さぁ、後は みなさんお得意の コーディングの お時間です。 47
  49. 49. こういう⾵に作っています CSS をコーディング こちらで変化を確認 HTML構造を確認 48
  50. 50. もくもく… 49
  51. 51. もくもく… WordBench もくもく部 関東近郊で随時開催中 50
  52. 52. 完成! 51
  53. 53. http://lifestream.odysseygate.com http://wp.me/B1G1 52
  54. 54. みんなで作ろう、そうしよう http://wordpress.org/extend/themes/duotone 53
  55. 55. 54
  56. 56. ここで告知 55
  57. 57. WordCamp Yokohama 2010 開催決定!!! 開催⽇程: 2010年 5⽉29⽇(⼟) 開催場所: 東京都市⼤学 横浜キャンパス (横浜市都筑区) 主催: WordCamp Yokohama 2010 実⾏委員会 共催: 東京都市⼤学 環境情報学部 ソーシャルメディア・ プロジェクト(旧 現代GPプロジェクト) 56
  58. 58. WordCamp Fukuoka には負けないぞ! 57
  59. 59. GAME OVER -------Odyssey------- Odysseygate+wcfukuoka2010@gmail.com Twitter: @odyssey http://www.odysseygate.com/ http://lifestream.odysseygate.com/ 58

×