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

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

おでこおかねがたりませんサラリーマン 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

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

WordCamp Tokyo 2008 4

WordCamp Tokyo 2009 5

WordCamp Kyoto 2009 6

WordBench 写真部 7

Duotone? 10

http://duotonedemo.wordpress.com 11

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

すてきやん 15

でも… 16

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

そこで 18

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

⼦テーマ？ 20

親テーマ Parent Theme d元／ベースとなるテーマ dフレームワークはもちろん dどのテーマでもOK ⼦テーマ Child Theme d親テーマのテンプレートファイルを受け継ぐ d必要に応じて上書きする d時間も節約できる 21

⼦テーマの作り⽅ 22

1 wp-content themes duotone 23

1 親テーマと同じ階層に⼦テーマのディレクトリを置く wp-content themes duotone duotone_child_theme 中⾝は style.css と screenshot.png だけでOK 24

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

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

⼦テーマのメリット 27

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

こんなことができるのも 29

GPL のおかげ 30

Great Pacific Lawson GPL ©digitalcube webnist のおかげ General Public Licence 31

というわけで… 32

テーマを作っていきます 33

lifestream Lifestream 34

Lifestream の仕組み ktai Mail w/ a photo Ktai Entry ゆりこさん DuotoneNoël さん Simple TweetWokamoto さん 35

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

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

調理の仕⽅ 1style.css に記述 2 を上書きテンプレートファイル 38

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

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

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

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

テンプレートファイルを上書きするのがかんたん⼦テーマにfunctions.php を⽤意するという⽅法も… 43

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

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

画像等の参照は ×<?php bloginfo(ʻtemplate_urlʼ)/images/ex.png ?> 〇<?php bloginfo(ʻstylesheet_urlʼ)/images/ex.png ?> ∵⼦テーマなので 46

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

こういう⾵に作っています CSS をコーディングこちらで変化を確認 HTML構造を確認 48

もくもく… 49

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

完成！ 51

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

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

ここで告知 55

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

WordCamp Fukuoka には負けないぞ！ 57

GAME OVER -------Odyssey------- Odysseygate+wcfukuoka2010@gmail.com Twitter: @odyssey http://www.odysseygate.com/ http://lifestream.odysseygate.com/ 58

http://www.odysseygate.com	98
http://asazuki.net	52
http://8bitodyssey.com	4
http://monokolog.blog16.fc2.com	2
http://www.slideshare.net	2
http://webcache.googleusercontent.com	1

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

by Odyssey Hanover on Mar 01, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 159

Statistics

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