thematic : a wordpress theme framework のススメ
Post on 17-May-2015
13.345 Views
Preview:
DESCRIPTION
TRANSCRIPT
Thematic:A WordPressTheme Framework のススメ
OCTOBER 17,2009
WordCamp Kyoto 2009 1:00 PM おで
おで
http://www.odysseygate.com/twitter: @odyssey
http://ja.wordpress.org/http://www.flickr.com/groups/wp-photographer/
We WordPress !!
DQ9: オデッセイ
作業量
0から作成スクラッチから
テーマをもらう／買う
テーマフレームワーク
テーマを作る
テーマフレームワーク？
http://codex.wordpress.org/Theme_Frameworks
子テーマを作るための親テーマとして扱える、柔軟なベースとなるようデザインされたテーマ
テーマフレームワークの主な特徴
・そのまま使っても、土台にしてもよし・SEO に対応・モジュール化された CSS・ダイナミックに変化する class と id・管理画面オプションでのカスタマイズ
メリット・デメリット
・テーマの骨組みを作る作業量を減らせる。・PHP やテンプレタグとの格闘が減る・プログラミングの知識が必要となる場面
が減るので、テーマ開発が身近になる
・まず構造と仕組みを把握するのに時間を取られる
デメリット
メリット
人気のあるフレームワークは？
113,210109,45936,74812,596 WP Framework
11,345 Sandbox
5,861 The Buffet Framework
ThematicCarrington
Hybrid
2009年10月5日現在
人気のあるフレームワークは？
113,210109,45936,74812,596 WP Framework
5,861 The Buffet Framework
ThematicCarrington
Hybrid
http://www.odysseygate.com/archives/918
11,345 Sandbox at WordCamp Tokyo 2008
2009年10月5日現在
人気のあるフレームワークは？
113,210109,45936,74812,596 WP Framework
11,345 Sandbox
5,861 The Buffet Framework
ThematicCarrington
Hybrid
http://themeshaper.com/thematic/2009年10月5日現在
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 は Sandbox の仲間であり、そのコードの大部分を受け継いでいる。
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 の特徴・そのままでも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 のテキスト（クレジット表記）を編集可能
Primary Aside第1エリア
Secondary Aside第2エリア
1st Subdiary Aside第1補助エリア
2nd Subdiary Aside第2補助エリア
3rd Subdiary Aside第3補助エリア
Index Top
Index Bottom
ウィジェット配置可能エリア（Index）
Entry
Entry
Index Insert
ヘッダーエリア
エントリエリア
サイドバーエリア
フッターエリア
Primary Aside第1エリア
Secondary Aside第2エリア
2nd Subdiary Aside第2補助エリア
3rd Subdiary Aside第3補助エリア
Single Top
Single Bottom
ウィジェット配置可能エリア（Single）ヘッダーエリア
エントリエリア
サイドバーエリア
フッターエリア
1st Subdiary Aside第1補助エリア
Entry
Comment
Single Insert
Primary Aside第1エリア
Secondary Aside第2エリア
2nd Subdiary Aside第2補助エリア
3rd Subdiary Aside第3補助エリア
Page Top
Page Bottom
ウィジェット配置可能エリア（Page）
Page Entry
ヘッダーエリア
エントリエリア
サイドバーエリア
フッターエリア
1st Subdiary Aside第1補助エリア
Thematiclibrarythematicsamplechildtheme
gridsextentions
languagesstyleslayouts
scripts
function.php
themeswp-content
style.css404.php
style.css tag.php
archive.php～ ～
Thematiclibrarythematicsamplechildtheme
yourchildtheme
gridsextentions
languagesstyleslayouts
scripts
function.php
themeswp-content
style.css404.php
style.css tag.php
archive.php～ ～
子テーマの作り方・親テーマと同じ階層にディレクトリ・style.css に Template: 親テーマ
/*Theme Name: A Thematic Child ThemeTheme URI:Description: Use this theme to …Author: Ian StewartAuthor URI: http://themeshaper.com/Template: thematicVersion: 1.0Tags: Thematic
*/
子テーマの作り方・親テーマと同じ階層にディレクトリ・style.css に Template: 親テーマ
/*Theme Name: A Thematic Child ThemeTheme URI:Description: Use this theme to …Author: Ian StewartAuthor URI: http://themeshaper.com/Template: thematicVersion: 1.0Tags: Thematic
*/
子テーマが親テーマのテンプレートファイルを流用
子テーマの作り方・親テーマと同じ階層にディレクトリ・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’);～
子テーマの作り方・親テーマと同じ階層にディレクトリ・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’)
テンプレートの 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><!-- #header-->
<?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);
例）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'); ?>→ 親テーマのディレクトリを表示
top related