SlideShare a Scribd company logo
新デフォルトテーマTwentyTen を理解しよう加藤 芳威2010年7月17日(土)越谷市中央市民会館
名前:加藤芳威(かとうよしたか)ハンドル:かとちゃん、よろず屋所属:株式会社デジコム最近のお仕事 (WordPress関連)WordPressテーマコーディング個別オーダー向けプラグイン製作ユーザーサポート職能:ネットワークエンジニア、ヘルプデスク、シスアド、システムコンサル、etc...趣味:カメラ(Nikon D90所有)他にも沢山あるけど、今は実質これだけ。	WordBench写真部が結構盛り上がっている簡単な自己紹介
仕事上で知ったことが中心なので、内容に偏りがあります。割り込み質問大歓迎! 途中でもバンバン質問しちゃってください。即答できないご質問でも調べれば分かりそうなものは、すぐに調べてしまうので少々お待ちください。プレゼンにあたって
TwentyTenonWordPress 3.0
TwentyTen(文字通り2010年版テーマ)がデフォルトテーマになったこれまでのテーマ「Default」「Classic」は新規インストールからは無くなったWordPress3.0で追加された関数などの影響で、ファイル構成が若干変更になったWordPress3.0から実装された関数がふんだんに使われているので、3.0未満のWordPressでは動かないWP3.0でデフォルトテーマが変わった
TwentyTen のファイル構成
images/languages/editor-style.csseditor-style-rtl.cssrtl.cssstyle.css404.phparchive.phpattachment.phpauthor.phpcategory.phpcomments.phpファイル構成footer.php
functions.php
header.php
index.php
loop.php
onecolumn-page.php
page.php
search.php
sidebar.php
sidebar-footer.php
single.php
tag.php
screenshot.png
license.txtテンプレート階層図http://wpdocs.sourceforge.jp/テンプレート階層http://codex.wordpress.org/images/1/18/Template_Hierarchy.png
ファイル構成の比較images/languages/editor-style.csseditor-style-rtl.cssrtl.cssstyle.css404.phparchive.phpattachment.phpauthor.phpcategory.phpcomments.phpfooter.phpfunctions.phpheader.phpindex.phploop.phponecolumn-page.phppage.phpsearch.phpsidebar.phpsidebar-footer.phpsingle.phptag.phpscreenshot.pnglicense.txtimages/ja.poja.mokubrick.potrtl.cssstyle.css404.phparchive.phparchives.phpcomments.phpcomments-popup.phpfooter.phpfunctions.phpheader.phpimage.phpindex.phplinks.phppage.phpsearch.phpsidebar.phpsingle.phpscreenshot.pngTwentyTenDefault
ファイル構成の比較images/languages/editor-style.csseditor-style-rtl.cssrtl.cssstyle.css404.phparchive.phpattachment.phpauthor.phpcategory.phpcomments.phpfooter.phpfunctions.phpheader.phpindex.phploop.phponecolumn-page.phppage.phpsearch.phpsidebar.phpsidebar-footer.phpsingle.phptag.phpscreenshot.pnglicense.txtimages/ja.poja.mokubrick.potrtl.cssstyle.css404.phparchive.phparchives.phpcomments.phpcomments-popup.phpfooter.phpfunctions.phpheader.phpimage.phpindex.phplinks.phppage.phpsearch.phpsidebar.phpsingle.phpscreenshot.pngTwentyTenDefault
デフォルトの2カラム(メインのカラム+サイドバー)ではなく、サイドバーなしのテンプレートが予め用意された。onecolumn-page.php※ 本文枠のサイズは自動では広がらなかった  サイドバーが無くなるだけ。※ 投稿では選択できない。ページのみ対応。
横幅を調整したい場合は、style.cssを直接編集して調整することになるデフォルトは 640px onecolumn-page.php
これまで、投稿のビジュアルエディタと実際の表示の乖離が激しかったので、画像1つ入れただけでもプレビュー等を多用する必要があったこのCSSによって差分を埋めてくれるので、いちいちプレビューしなくても結構表示が一致するようになったeditor-style.css
矢印の部分など、改行位置がきっちりあっている。文字の大きさ等でずれることはあるが、それでも1~2文字程度。完璧ではないが、今までが酷過ぎたのでこれで十分満足editor-style.css編集画面実際の公開ページの表示
2箇所で横幅をあわせるのが、1つのポイントデフォルトは、640pxeditor-style.csseditor-style.cssfunction.php
loop.php(get_template_part)が最高!
loop.php の中身旧Defaultテーマの index.php のループ部分がごっそり切り出された感じsingle.php や page.php 等の単一ページは考慮されていない感じで、index.php, category.php 等アーカイブページ向けのコードが書かれている切り出された結果、index.php, category.phpが軽量化された
index.php や category.phpはどうなった?index.phpcategory.php<?php get_header(); ?><div id="container"><div id="content" role="main"><?phpget_template_part( 'loop', 'index' );?></div><!-- #content --></div><!-- #container --><?php get_sidebar(); ?><?php get_footer(); ?><?php get_header(); ?><div id="container"><div id="content" role="main"><h1 class="page-title"><?phpprintf( __( 'Category Archives: %s', 'twentyten' ), '<span>' . single_cat_title( '', false ) . '</span>' );                ?></h1><?php	$category_description = category_description();	if ( ! empty( $category_description ) )                        echo '<div class="archive-meta">' . $category_description . '</div>';get_template_part( 'loop', 'category' );?></div><!-- #content --></div><!-- #container --><?php get_sidebar(); ?><?php get_footer(); ?>
index.php や category.phpはどうなった?index.phpcategory.php<?php get_header(); ?><div id="container"><div id="content" role="main"><?phpget_template_part( 'loop', 'index' );?></div><!-- #content --></div><!-- #container --><?php get_sidebar(); ?><?php get_footer(); ?><?php get_header(); ?><div id="container"><div id="content" role="main"><h1 class="page-title"><?phpprintf( __( 'Category Archives: %s', 'twentyten' ), '<span>' . single_cat_title( '', false ) . '</span>' );                ?></h1><?php	$category_description = category_description();	if ( ! empty( $category_description ) )                        echo '<div class="archive-meta">' . $category_description . '</div>';get_template_part( 'loop', 'category' );?></div><!-- #content --></div><!-- #container --><?php get_sidebar(); ?><?php get_footer(); ?>
指定した名前のテンプレートファイル(php)を、その関数の位置に読み込む引数に従って、以下の順にファイルを探し、見つかったらそのファイルを読み込む子テーマの A-B.php子テーマの A.php親テーマの A-B.php親テーマの A.phpファイルが見つからなければ、スルーするget_template_part( A [, B] )
include ( TEMPLATEPATH . ‘ファイル名’ ) だと、Framework化したときに親テーマを見に行ってしまう -> 代わりに STYLESHEETPATH を使えば大丈夫ファイルが存在しないとエラーになるsidebar(‘B’) だと、sidebar-B.php がない場合、sidebar.php を読み込んでしまう「sidebar-footer.php」はウィジェットエリアなので、サイドバー扱いでよい模様get_template_partと他法の違い
WP3.0+TwentyTenでFrameworkが作りやすくなった
Framework(フレームワーク)?

More Related Content

Similar to 新デフォルトテーマ TwentyTen を理解しよう

CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズCSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
 
WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?
Shinichi Nishikawa
 
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
Takashi Uemura
 
WordPressテーマ Foundation for WordPress の紹介
WordPressテーマ Foundation for WordPress の紹介WordPressテーマ Foundation for WordPress の紹介
WordPressテーマ Foundation for WordPress の紹介
Takashi Uemura
 
Entity Framework(Core)についての概要を学ぼう
Entity Framework(Core)についての概要を学ぼうEntity Framework(Core)についての概要を学ぼう
Entity Framework(Core)についての概要を学ぼう
TomomitsuKusaba
 
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
FLOW web planning & design
 
WordPressプラグイン考察
WordPressプラグイン考察WordPressプラグイン考察
WordPressプラグイン考察
Takami Kazuya
 
第18回WordBench大阪【2013年6月23日】
第18回WordBench大阪【2013年6月23日】第18回WordBench大阪【2013年6月23日】
第18回WordBench大阪【2013年6月23日】
rie05
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121
Shohei Aoyama
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121
Shohei Aoyama
 
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Hidetaka Okamoto
 
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
Muyuu Fujita
 
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座
Shinichi Nishikawa
 
Secret of Firefox
Secret of FirefoxSecret of Firefox
Secret of Firefox
dynamis
 
WordPress 3.4 〜新機能や変更点〜
WordPress 3.4 〜新機能や変更点〜WordPress 3.4 〜新機能や変更点〜
WordPress 3.4 〜新機能や変更点〜
Toru Miki
 
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
Atsushi Ando
 
WordPressをカスタマイズするなら知っておきたいこと~テンプレート階層~
WordPressをカスタマイズするなら知っておきたいこと~テンプレート階層~WordPressをカスタマイズするなら知っておきたいこと~テンプレート階層~
WordPressをカスタマイズするなら知っておきたいこと~テンプレート階層~
Akinori Tateyama
 
Introduction to Favmemo for Immature Engineers
Introduction to Favmemo for Immature EngineersIntroduction to Favmemo for Immature Engineers
Introduction to Favmemo for Immature Engineers
Takeshi Arabiki
 
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そうフロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
Atushi Sugiyama
 

Similar to 新デフォルトテーマ TwentyTen を理解しよう (20)

CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズCSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
 
WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?
 
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
 
WordPressテーマ Foundation for WordPress の紹介
WordPressテーマ Foundation for WordPress の紹介WordPressテーマ Foundation for WordPress の紹介
WordPressテーマ Foundation for WordPress の紹介
 
Entity Framework(Core)についての概要を学ぼう
Entity Framework(Core)についての概要を学ぼうEntity Framework(Core)についての概要を学ぼう
Entity Framework(Core)についての概要を学ぼう
 
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
 
WordPressプラグイン考察
WordPressプラグイン考察WordPressプラグイン考察
WordPressプラグイン考察
 
第18回WordBench大阪【2013年6月23日】
第18回WordBench大阪【2013年6月23日】第18回WordBench大阪【2013年6月23日】
第18回WordBench大阪【2013年6月23日】
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121
 
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
 
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
 
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座
 
Wp html5
Wp html5Wp html5
Wp html5
 
Secret of Firefox
Secret of FirefoxSecret of Firefox
Secret of Firefox
 
WordPress 3.4 〜新機能や変更点〜
WordPress 3.4 〜新機能や変更点〜WordPress 3.4 〜新機能や変更点〜
WordPress 3.4 〜新機能や変更点〜
 
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
 
WordPressをカスタマイズするなら知っておきたいこと~テンプレート階層~
WordPressをカスタマイズするなら知っておきたいこと~テンプレート階層~WordPressをカスタマイズするなら知っておきたいこと~テンプレート階層~
WordPressをカスタマイズするなら知っておきたいこと~テンプレート階層~
 
Introduction to Favmemo for Immature Engineers
Introduction to Favmemo for Immature EngineersIntroduction to Favmemo for Immature Engineers
Introduction to Favmemo for Immature Engineers
 
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そうフロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
 

新デフォルトテーマ TwentyTen を理解しよう