Thematic : A WordPress Theme Framework のススメ

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

OCTOBER 17,2009

おで

http://www.odysseygate.com/
twitter: @odyssey
DQ9: オデッセイ

http://ja.wordpress.org/
http://www.flickr.com/groups/wp-photographer/

We WordPress !!

WordPress の

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

テーマを作る
作業量

0から作成テーマをもらう
スクラッチから／買う

テーマを作る
作業量

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

テーマフレームワーク？

テーマフレームワーク？

子テーマを作るための
親テーマとして扱える、
柔軟なベースとなるよう
デザインされたテーマ

http://codex.wordpress.org/Theme_Frameworks

テーマフレームワークの主な特徴

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

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

バランスを見て判断

習熟時間

作業量

人気のあるフレームワークは？

113,210 Thematic
109,459 Carrington
36,748 Hybrid
12,596 WP Framework

11,345 Sandbox

5,861 The Buffet Framework
2009年10月5日現在


113,210 Thematic
109,459 Carrington
36,748 Hybrid
12,596 WP Framework

11,345 Sandbox at WordCamp Tokyo 2008

http://www.odysseygate.com/archives/918


113,210 Thematic
109,459 Carrington
36,748 Hybrid
12,596 WP Framework

11,345 Sandbox

http://themeshaper.com/thematic/

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

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 の仲間であり、
そのコードの大部分を受け継いでいる。

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 のテキスト（クレジット表記）を編集可能

ウィジェット配置可能エリア（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補助エリア

フッターエリア

ウィジェット配置可能エリア（Single）
エントリ Single Top サイドバーエリア
エリア
Entry Primary Aside
第1エリア

Single Insert Secondary Aside
第2エリア
Comment

Single Bottom



ウィジェット配置可能エリア（Page）
エントリ Page Top サイドバーエリア
エリア
Page Entry Primary Aside
第1エリア

Secondary Aside
第2エリア

Page Bottom



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

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

ぶら下がりデザインも

Easy

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

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

style.css tag.php

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

子テーマの作り方
・親テーマと同じ階層にディレクトリ
・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
*/

/*
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
テンプレートファイル
*/
を流用

・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’);
～

・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’)

テンプレートの HTML を変更
・HTML 要素（DIV とか）が足りない
・HTML を変更したい
→テンプレートに大量に書かれたフック
を使う

フックの探し方
→ /thematic/library/extensions
→ grep するべし

例）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>
<?php thematic_belowheader(); ?>
→functions.php でフックを書き換えられる

例）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);

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

子テーマを使っている場合
<?php bloginfo('template_directory'); ?>
→ 親テーマのディレクトリを表示し
<?php bloginfo('stylesheet_directory'); ?>
→ 子テーマのディレクトリを表示する。

Thank you!

10.17.2009 Odyssey

Thematic : A WordPress Theme Framework のススメ

Recommended

Recommended

More Related Content

Featured

Featured (20)

Thematic : A WordPress Theme Framework のススメ