作ろう、そうしよう @Odyssey 0 Duotone の⼦テーマを
作ろう、そうしよう
@Odyssey
0
Duotone の⼦テーマを
1
2
おでこ おかねがたりません
サラリーマン
レベル: 8 せいべつ:おとこ
まけずぎらい
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 実⾏委員会 共催: 東京都市⼤学 環境情報学部 ソーシャルメディア・ プロジェクト(旧 現代GPプロジェクト)
WordCamp Yokohama 2010 開催決定!!!
57
WordCamp Fukuoka には負けないぞ!
58
GAME OVER
-------Odyssey------- [email protected]
Twitter: @odyssey http://www.odysseygate.com/
http://lifestream.odysseygate.com/