1.
Thematic:
A WordPress
Theme Framework のススメ
WordCamp Kyoto 2009 1:00 PM おで
OCTOBER 17,2009

2.
おで
http://www.odysseygate.com/
twitter: @odyssey
DQ9: オデッセイ
http://ja.wordpress.org/
http://www.flickr.com/groups/wp-photographer/
We WordPress !!

3.
WordPress の
すべての道は
テーマに通ず
─ とあるユーザのつぶやき

4.
テーマを作る
作業量
0から作成 テーマをもらう
スクラッチから ／買う

5.
テーマを作る
作業量
0から作成 テーマ テーマをもらう
スクラッチから フレームワーク ／買う

6.
テーマフレームワーク？

7.
テーマフレームワーク？
子テーマを作るための
親テーマとして扱える、
柔軟なベースとなるよう
デザインされたテーマ
http://codex.wordpress.org/Theme_Frameworks

8.
テーマフレームワークの主な特徴
・そのまま使っても、土台にしてもよし
・SEO に対応
・モジュール化された CSS
・ダイナミックに変化する class と id
・管理画面オプションでのカスタマイズ

9.
メリット・デメリット
メリット
・テーマの骨組みを作る作業量を減らせる。
・PHP やテンプレタグとの格闘が減る
・プログラミングの知識が必要となる場面
が減るので、テーマ開発が身近になる
デメリット
・まず構造と仕組みを把握するのに時間
を取られる

10.
バランスを見て判断
習熟時間
作業量

11.
人気のあるフレームワークは？
113,210 Thematic
109,459 Carrington
36,748 Hybrid
12,596 WP Framework
11,345 Sandbox
5,861 The Buffet Framework
2009年10月5日現在

12.
人気のあるフレームワークは？
113,210 Thematic
109,459 Carrington
36,748 Hybrid
12,596 WP Framework
11,345 Sandbox at WordCamp Tokyo 2008
5,861 The Buffet Framework
http://www.odysseygate.com/archives/918
2009年10月5日現在

13.
人気のあるフレームワークは？
113,210 Thematic
109,459 Carrington
36,748 Hybrid
12,596 WP Framework
11,345 Sandbox
5,861 The Buffet Framework
http://themeshaper.com/thematic/
2009年10月5日現在

14.
Evolution

15.
Evolution(進化)
Thematic is a fork of the hugely succesful and amazing Sandbox theme for
WordPress and inherits the bulk of that code base. I owe a huge debt of
gratitude to Scott Wallick and Andy Skelton, not only for their work on
The Sandbox but for their ongoing help with, and support of, my efforts.
Thematic Readme.html

16.
Evolution(進化)
Thematic is a fork of the hugely succesful and amazing Sandbox theme for
WordPress and inherits the bulk of that code base. I owe a huge debt of
gratitude to Scott Wallick and Andy Skelton, not only for their work on
The Sandbox but for their ongoing help with, and support of, my efforts.
Thematic Readme.html
Thematic は Sandbox の仲間であり、
そのコードの大部分を受け継いでいる。

17.
Thematic の特徴
・そのままでもOK、開発用のブランクテーマとしてもOK
・検索エンジンに完全に最適化
・13のエリアにウィジェットを配置可能
・すぐさま開発に入れるよう、サンプルの子テーマを同梱
・以下のプラグインに対応
Subscribe to Comments, WP-PageNavi,
Comment-license, All-In-One SEO ,Platinum SEO
・2～3カラムデザインのレイアウトオプション
・リセット用CSS、タイポグラフィ用CSS（BluePrint）等
モジュール化されたCSS
・動的な post と body の class によって CSSアーティスト
のためのキャンバスに
・footer のテキスト（クレジット表記）を編集可能

18.
ウィジェット配置可能エリア（Index）
ヘッダーエリア
エントリ Index Top サイドバーエリア
エリア
Entry Primary Aside
第1エリア
Index Insert Secondary Aside
第2エリア
Entry
Index Bottom
1st Subdiary Aside 2nd Subdiary Aside 3rd Subdiary Aside
第1補助エリア 第2補助エリア 第3補助エリア
フッターエリア

19.
ウィジェット配置可能エリア（Single）
ヘッダーエリア
エントリ Single Top サイドバーエリア
エリア
Entry Primary Aside
第1エリア
Single Insert Secondary Aside
第2エリア
Comment
Single Bottom
1st Subdiary Aside 2nd Subdiary Aside 3rd Subdiary Aside
第1補助エリア 第2補助エリア 第3補助エリア
フッターエリア

20.
ウィジェット配置可能エリア（Page）
ヘッダーエリア
エントリ Page Top サイドバーエリア
エリア
Page Entry Primary Aside
第1エリア
Secondary Aside
第2エリア
Page Bottom
1st Subdiary Aside 2nd Subdiary Aside 3rd Subdiary Aside
第1補助エリア 第2補助エリア 第3補助エリア
フッターエリア

21.
管理画面 > 外観 > ウィジェット

22.
左カラム：エントリ、右カラム：サイドバー

23.
ぶら下がりデザインも

24.
Easy
CSS や ソースコードの書き換え不要
管理画面でのウィジェット変更だけ

25.
wp-content
themes extentions layouts
Thematic grids styles
library languages scripts
thematicsamplechildtheme
function.php
style.css
404.php
～ archive.php
～
style.css tag.php

26.
wp-content
themes extentions layouts
Thematic grids styles
library languages scripts
thematicsamplechildtheme
function.php
style.css
404.php
～ archive.php
～
style.css tag.php
yourchildtheme

27.
子テーマの作り方
・親テーマと同じ階層にディレクトリ
・style.css に Template: 親テーマ
/*
Theme Name: A Thematic Child Theme
Theme URI:
Description: Use this theme to …
Author: Ian Stewart
Author URI: http://themeshaper.com/
Template: thematic
Version: 1.0
Tags: Thematic
*/

28.
子テーマの作り方
・親テーマと同じ階層にディレクトリ
・style.css に Template: 親テーマ
/*
Theme Name: A Thematic Child Theme
Theme URI:
Description: Use this theme to …
Author: Ian Stewart
Author URI: http://themeshaper.com/
Template: thematic
Version: 1.0
子テーマが親テーマの
Tags: Thematic
テンプレートファイル
*/
を流用

29.
子テーマの作り方
・親テーマと同じ階層にディレクトリ
・style.css に Template: 親テーマ
・CSS は @import url() で上書き
/* Reset browser defaults */
@import url(‘../thematic/library/styles/reset.css’);
/* Apply basic typography styles */
@import url(‘../thematic/library/styles/typography.css’);
/* Apply a basic layout */
@import url(‘../thematic/library/layouts/2c-r-fixed.css’);
～

30.
子テーマの作り方
・親テーマと同じ階層にディレクトリ
・style.css に Template: 親テーマ
・CSS は @import url() で上書き
/* Reset browser defaults */
@import url(‘../thematic/library/styles/reset.css’);
/* Apply basic typography styles */
@import url(‘../thematic/library/styles/typography.css’);
/* Apply a basic layout */
@import url(‘../thematic/library/layouts/2c-r-fixed.css’);
～
@import url(‘your.css’)

31.
テンプレートの HTML を変更
・HTML 要素（DIV とか）が足りない
・HTML を変更したい
→テンプレートに大量に書かれたフック
を使う
フックの探し方
→ /thematic/library/extensions
→ grep するべし

32.
例）header.php
<body class="<?php thematic_body_class() ?>">
<?php thematic_before(); ?>
<div id="wrapper" class="hfeed">
<?php thematic_aboveheader(); ?>
<div id="header">
<?php thematic_header() ?>
</div><!-- #header-->
<?php thematic_belowheader(); ?>
→functions.php でフックを書き換えられる

33.
例）blog-title を ロゴ画像に差し替え
function remove_thematic_blogtitle() {
remove_action('thematic_header','thematic_blogtitle',3);
}
add_action('init','remove_thematic_blogtitle');
function ur_thematic_blogtitle() { ?>
<div id="blog-title">
<a href="<?php bloginfo('url') ?>/"
title="<?php bloginfo('name') ?>“ rel="home">
<img src="<?php bloginfo('stylesheet_directory'); ?>
/logo.png" alt=“sitename" width=“**" height=“**" />
</a></div>
<?php }
add_action('thematic_header',‘ur_thematic_blogtitle',4);

34.
例）blog-title を ロゴ画像に差し替え
function remove_thematic_blogtitle() {
remove_action('thematic_header','thematic_blogtitle',3);
}
add_action('init','remove_thematic_blogtitle');
function ur_thematic_blogtitle() { ?>
<div id="blog-title">
<a href="<?php bloginfo('url') ?>/"
title="<?php bloginfo('name') ?>“ rel="home">
<img src="<?php bloginfo('stylesheet_directory'); ?>
/logo.png" alt=“sitename" width=“**" height=“**" />
</a></div>
<?php }
add_action('thematic_header',‘ur_thematic_blogtitle',4);

35.
functions.php を書く際の注意点
通常テーマ（親テーマ）を使っている場合
<?php bloginfo('template_directory'); ?>
→ 親テーマのディレクトリを表示
<?php bloginfo('stylesheet_directory'); ?>
→ 親テーマのディレクトリを表示
子テーマを使っている場合
<?php bloginfo('template_directory'); ?>
→ 親テーマのディレクトリを表示し
<?php bloginfo('stylesheet_directory'); ?>
→ 子テーマのディレクトリを表示する。

36.
Thank you!
10.17.2009 Odyssey