duotone の子テーマを作ろう、そうしよう - wordcamp fukuoka 2010

作ろう、そうしよう

@Odyssey

0

Duotone の⼦テーマを

1

2

おでこ おかねがたりません

サラリーマン

レベル： ８ せいべつ：おとこ

まけずぎらい

E ハイストリートのふく E ケータイ E アイフォーン E アイポッドナノ E ニンテンドー・ディーエスライト E プレイステーション・ポータブル E マックブック・エアー

せいそくち： とうきょう

WordPress 歴： 4年 WordPress 0.9.5 に出会う WordPress ME 2.0 を使う WordPress オフに参加 WordPress 公式⽇本語サイト運営チーム WordPress ⽇本語版作成チーム WordCamp/Bench に参加 WordBench 英語部WordBench 写真部

3

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

4

WordCamp Tokyo 2008

5

WordCamp Tokyo 2009

6

WordCamp Kyoto 2009

7

WordBench 写真部

8

9

10

Duotone?

11

http://duotonedemo.wordpress.com

12

http://duotonedemo.wordpress.com

13

http://duotonedemo.wordpress.com

14

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

15

すてきやん

16

でも…

17

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

18

そこで

19

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

20

⼦テーマ？

21

親テーマ Parent Theme

⼦テーマ Child Theme

d元／ベースとなるテーマ dフレームワークはもちろん dどのテーマでもOK

d親テーマのテンプレートファイル を受け継ぐ d必要に応じて上書きする

d時間も節約できる

22

⼦テーマの作り⽅

23

duotone themes

wp-content

1

24

duotone themes

wp-content

duotone_child_theme

親テーマと同じ階層に ⼦テーマのディレクトリを置く 1

中⾝は style.css と screenshot.png だけでOK

25

⼦テーマの style.css に Template: 親テーマ 2 /* 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 */

26

これだけでテーマとして認識されます

3

親テーマ ⼦テーマ

27

⼦テーマのメリット

28

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

duotone

duotone_child_theme

バージョンアップ

影響なし

29

こんなことができるのも

30

GPL のおかげ

31

GPL のおかげ

Great Pacific Lawson©digitalcube webnist

General Public Licence

32

というわけで…

33

テーマを作っていきます

34

lifestream

Lifestream

35

ktai Mail w/ a photo

Ktai Entry

Duotone

Simple Tweet

Lifestream の仕組み

ゆりこ さん

Noël さん

Wokamoto さん

36

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

37

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

38

調理の仕⽅

1 2

style.css に記述 テンプレートファイル を上書き

39

body.horizontal (.vertical) index.php div#page

div#header

h1

div.description

ul#menu

div#content div#sleeve

div.image

div#container

div.navigation

div.sidebar

div#footer

div.nav .prev img div.nav .next

h2 div#postmetadata div#post

div.prev div.next

p.info form#searchform

li ul

40

body.horizontal .archive archive.php div#page

div#header

h1

div.description

ul#menu

div#content div#sleeve

div.archive

div.sidebar

div#footer

div.prev div.next

p.info form#searchform

li ul

ul#filters li

h2

ul.thumbnails

div.nav

41

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

42

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

43

テンプレートファイルを 上書きするのがかんたん

⼦テーマにfunctions.php を⽤意するという⽅法も…

44

duotone duotone_child_theme

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

45

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

46

画像等の参照は ×<?php bloginfo(ʻtemplate_urlʼ)/images/ex.png ?> 〇<?php bloginfo(ʻstylesheet_urlʼ)/images/ex.png ?>

∵⼦テーマなので

47

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

48

こういう⾵に作っています

こちらで変化を確認

CSS をコーディング

HTML構造を確認

49

もくもく…

50

もくもく…

WordBench もくもく部 関東近郊で随時開催中

51

完成！

52

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

53

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

54

55

ここで告知

56

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

WordCamp Yokohama 2010 開催決定!!!

57

WordCamp Fukuoka には負けないぞ！

58

GAME OVER

-------Odyssey------- Odysseygate+wcfukuoka2010@gmail.com

Twitter: @odyssey http://www.odysseygate.com/

http://lifestream.odysseygate.com/