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 5,861 The Buffet Framework http://www.odysseygate.com/archives/918 2009年10月5日現在

人気のあるフレームワークは？ 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日現在

Evolution

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 1st Subdiary Aside 2nd Subdiary Aside 3rd Subdiary Aside 第1補助エリア第2補助エリア第3補助エリアフッターエリア

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

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

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

ぶら下がりデザインも

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 */

子テーマの作り方・親テーマと同じ階層にディレクトリ・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 テンプレートファイル */ を流用

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

http://waratsuyoshi.jp	2958
http://another.maple4ever.net	1061
http://parashuto.com	682
http://asazuki.net	130
http://5fu10u.com	46
http://www.slideshare.net	44
http://otbblog.com	31
http://webcache.googleusercontent.com	26
http://s.deeeki.com	17
http://zigxzag.heteml.jp	3
http://geki-chin.com	1
http://cache.yahoofs.jp	1

Thematic : A WordPress Theme Framework のススメ

by Odyssey Hanover

Accessibility

Categories

Upload Details

Usage Rights

12 Embeds 5,000

Statistics

Thematic : A WordPress Theme Framework のススメ Presentation Transcript