Your SlideShare is downloading. ×
Thematic : A WordPress Theme Framework のススメ
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Thematic : A WordPress Theme Framework のススメ

13,284
views

Published on

http://www.odysseygate.com/archives/1483 …

http://www.odysseygate.com/archives/1483
10月17日に開催した WordCamp Kyoto 2009 コミュニティデイにてプレゼンしたスライドです。

Published in: Education

0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
13,284
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
50
Comments
0
Likes
12
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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