新デフォルトテーマ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(フレームワーク)?

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