1.
新デフォルトテーマTwentyTen を理解しよう<br />加藤 芳威<br />2010年7月17日(土)<br />越谷市中央市民会館<br />

2.
名前：加藤芳威（かとうよしたか）<br />ハンドル：かとちゃん、よろず屋<br />所属：株式会社デジコム<br />最近のお仕事 (WordPress関連)<br />WordPressテーマコーディング<br />個別オーダー向けプラグイン製作<br />ユーザーサポート<br />職能：ネットワークエンジニア、ヘルプデスク、シスアド、システムコンサル、etc...<br />趣味：カメラ(Nikon D90所有)他にも沢山あるけど、今は実質これだけ。 WordBench写真部が結構盛り上がっている<br />簡単な自己紹介<br />

3.
仕事上で知ったことが中心なので、内容に偏りがあります。<br />割り込み質問大歓迎！ 途中でもバンバン質問しちゃってください。<br />即答できないご質問でも調べれば分かりそうなものは、すぐに調べてしまうので少々お待ちください。<br />プレゼンにあたって<br />

4.
TwentyTenonWordPress 3.0<br />

5.
TwentyTen（文字通り2010年版テーマ）がデフォルトテーマになった<br />これまでのテーマ「Default」「Classic」は新規インストールからは無くなった<br />WordPress3.0で追加された関数などの影響で、ファイル構成が若干変更になった<br />WordPress3.0から実装された関数がふんだんに使われているので、3.0未満のWordPressでは動かない<br />WP3.0でデフォルトテーマが変わった<br />

6.
TwentyTen のファイル構成<br />

7.
images/<br />languages/<br />editor-style.css<br />editor-style-rtl.css<br />rtl.css<br />style.css<br />404.php<br />archive.php<br />attachment.php<br />author.php<br />category.php<br />comments.php<br />ファイル構成<br /><ul><li>footer.php

8.
functions.php

9.
header.php

10.
index.php

11.
loop.php

12.
onecolumn-page.php

13.
page.php

14.
search.php

15.
sidebar.php

16.
sidebar-footer.php

17.
single.php

18.
tag.php

19.
screenshot.png

20.
license.txt</li></li></ul><li>テンプレート階層図<br />http://wpdocs.sourceforge.jp/テンプレート階層<br />http://codex.wordpress.org/images/1/18/Template_Hierarchy.png<br />

21.
ファイル構成の比較<br />images/<br />languages/<br />editor-style.css<br />editor-style-rtl.css<br />rtl.css<br />style.css<br />404.php<br />archive.php<br />attachment.php<br />author.php<br />category.php<br />comments.php<br />footer.php<br />functions.php<br />header.php<br />index.php<br />loop.php<br />onecolumn-page.php<br />page.php<br />search.php<br />sidebar.php<br />sidebar-footer.php<br />single.php<br />tag.php<br />screenshot.png<br />license.txt<br />images/<br />ja.po<br />ja.mo<br />kubrick.pot<br />rtl.css<br />style.css<br />404.php<br />archive.php<br />archives.php<br />comments.php<br />comments-popup.php<br />footer.php<br />functions.php<br />header.php<br />image.php<br />index.php<br />links.php<br />page.php<br />search.php<br />sidebar.php<br />single.php<br />screenshot.png<br />TwentyTen<br />Default<br />

22.
ファイル構成の比較<br />images/<br />languages/<br />editor-style.css<br />editor-style-rtl.css<br />rtl.css<br />style.css<br />404.php<br />archive.php<br />attachment.php<br />author.php<br />category.php<br />comments.php<br />footer.php<br />functions.php<br />header.php<br />index.php<br />loop.php<br />onecolumn-page.php<br />page.php<br />search.php<br />sidebar.php<br />sidebar-footer.php<br />single.php<br />tag.php<br />screenshot.png<br />license.txt<br />images/<br />ja.po<br />ja.mo<br />kubrick.pot<br />rtl.css<br />style.css<br />404.php<br />archive.php<br />archives.php<br />comments.php<br />comments-popup.php<br />footer.php<br />functions.php<br />header.php<br />image.php<br />index.php<br />links.php<br />page.php<br />search.php<br />sidebar.php<br />single.php<br />screenshot.png<br />TwentyTen<br />Default<br />

23.
デフォルトの2カラム（メインのカラム＋サイドバー）ではなく、サイドバーなしのテンプレートが予め用意された。<br />onecolumn-page.php<br />※ 本文枠のサイズは自動では広がらなかった<br /> サイドバーが無くなるだけ。<br />※ 投稿では選択できない。ページのみ対応。<br />

24.
横幅を調整したい場合は、style.cssを直接編集して調整することになる<br />デフォルトは 640px <br />onecolumn-page.php<br />

25.
これまで、投稿のビジュアルエディタと実際の表示の乖離が激しかったので、画像1つ入れただけでもプレビュー等を多用する必要があった<br />このCSSによって差分を埋めてくれるので、いちいちプレビューしなくても結構表示が一致するようになった<br />editor-style.css<br />

26.
矢印の部分など、改行位置がきっちりあっている。<br />文字の大きさ等でずれることはあるが、それでも1～2文字程度。<br />完璧ではないが、今までが酷過ぎたのでこれで十分満足<br />editor-style.css<br />編集画面<br />実際の公開ページの表示<br />

27.
2箇所で横幅をあわせるのが、1つのポイント<br />デフォルトは、640px<br />editor-style.css<br />editor-style.css<br />function.php<br />

28.
loop.php(get_template_part)が最高！<br />

29.
loop.php の中身<br />旧Defaultテーマの index.php のループ部分がごっそり切り出された感じ<br />single.php や page.php 等の単一ページは考慮されていない感じで、index.php, category.php 等アーカイブページ向けのコードが書かれている<br />切り出された結果、index.php, category.phpが軽量化された<br />

30.
index.php や category.phpはどうなった？<br />index.php<br />category.php<br /><?php get_header(); ?><br /><div id="container"><br /><div id="content" role="main"><br /><?php<br />get_template_part( 'loop', 'index' );<br />?><br /></div><!-- #content --><br /></div><!-- #container --><br /><?php get_sidebar(); ?><br /><?php get_footer(); ?><br /><?php get_header(); ?><br /><div id="container"><br /><div id="content" role="main"><br /><h1 class="page-title"><?php<br />printf( __( 'Category Archives: %s', 'twentyten' ), '<span>' . single_cat_title( '', false ) . '</span>' );<br /> ?></h1><br /><?php<br /> $category_description = category_description();<br /> if ( ! empty( $category_description ) )<br /> echo '<div class="archive-meta">' . $category_description . '</div>';<br />get_template_part( 'loop', 'category' );<br />?><br /></div><!-- #content --><br /></div><!-- #container --><br /><?php get_sidebar(); ?><br /><?php get_footer(); ?><br />

31.
index.php や category.phpはどうなった？<br />index.php<br />category.php<br /><?php get_header(); ?><br /><div id="container"><br /><div id="content" role="main"><br /><?php<br />get_template_part( 'loop', 'index' );<br />?><br /></div><!-- #content --><br /></div><!-- #container --><br /><?php get_sidebar(); ?><br /><?php get_footer(); ?><br /><?php get_header(); ?><br /><div id="container"><br /><div id="content" role="main"><br /><h1 class="page-title"><?php<br />printf( __( 'Category Archives: %s', 'twentyten' ), '<span>' . single_cat_title( '', false ) . '</span>' );<br /> ?></h1><br /><?php<br /> $category_description = category_description();<br /> if ( ! empty( $category_description ) )<br /> echo '<div class="archive-meta">' . $category_description . '</div>';<br />get_template_part( 'loop', 'category' );<br />?><br /></div><!-- #content --><br /></div><!-- #container --><br /><?php get_sidebar(); ?><br /><?php get_footer(); ?><br />

32.
指定した名前のテンプレートファイル(php)を、その関数の位置に読み込む<br />引数に従って、以下の順にファイルを探し、見つかったらそのファイルを読み込む<br />子テーマの A-B.php<br />子テーマの A.php<br />親テーマの A-B.php<br />親テーマの A.php<br />ファイルが見つからなければ、スルーする<br />get_template_part( A [, B] )<br />

33.
include ( TEMPLATEPATH . ‘ファイル名’ ) だと、Framework化したときに親テーマを見に行ってしまう -> 代わりに STYLESHEETPATH を使えば大丈夫ファイルが存在しないとエラーになる<br />sidebar(‘B’) だと、sidebar-B.php がない場合、sidebar.php を読み込んでしまう<br />「sidebar-footer.php」はウィジェットエリアなので、サイドバー扱いでよい模様<br />get_template_partと他法の違い<br />

34.
WP3.0+TwentyTenでFrameworkが作りやすくなった<br />

35.
Framework（フレームワーク）？<br />

36.
テーマを作るための土台になるテーマ<br />似たレイアウトや同じ機能をたくさん流用したいときにすごく有用<br />3.0が出る前は、Thematic などが有名<br />Frameworkとは<br />参考：<br />http://www.slideshare.net/odysseygate/themantic-a-wordpress-theme-framework<br />

37.
3.0の新テンプレートタグ get_template_part がすごく便利<br />TwentyTen 独自関数で、いろいろなものがパーツ化されている<br />Frameworkをつくりやすい<br />

38.
wp-content/themes 内にフォルダを新規作成<br />themes/style.css を新フォルダーにコピー<br />コピー先の style.css を編集<br />テーマ名等を変更<br />テンプレート情報の最後に以下の1行を追加template: twentyten<br />管理画面からテーマを選ぶ<br />では、子テーマを作ってみましょう<br />

39.
/*<br />Theme Name: Twenty Ten の子テーマ<br />Theme URI: http://curious-everything.com/<br />Description: 簡単に子テーマが作れます。<br />Author: KATO Yoshitaka<br />Version: 1.0<br />Template: twentyten<br />*/<br />子テーマ用style.css追加修正箇所<br />

40.
<h1>はどこへ行った？<br />

41.
<?php $heading_tag= ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?><br /><<?php echo $heading_tag; ?> id="site-title"><br /> <span><br /> <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a><br /> </span><br /></<?php echo $heading_tag; ?>><br />表示コンテンツの種類によって<h1>の位置が変わるようになった<br />header.php (抜粋)<br />

42.
各ページのタイトルが<h1>になる<br />single.php(抜粋)<br />category.php<br /><?php get_header(); ?><br /><div id="container"><br /><div id="content" role="main"><br /><?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?><br /><div id="nav-above" class="navigation"><br /><div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?></div><br /><div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', 'twentyten' ) . '</span>' ); ?></div><br /></div><!-- #nav-above --><br /><div id="post-<?php the_ID(); ?>" <?php post_class(); ?>><br /><h1 class="entry-title"><?php the_title(); ?></h1><br /><div class="entry-meta"><br /><?php twentyten_posted_on(); ?><br /></div><!-- .entry-meta --><br /><?php get_header(); ?><br /><div id="container"><br /><div id="content" role="main"><br /><h1 class="page-title"><?php<br />printf( __( 'Category Archives: %s', 'twentyten' ), '<span>' . single_cat_title( '', false ) . '</span>' );<br /> ?></h1><br /><?php<br /> $category_description = category_description();<br /> if ( ! empty( $category_description ) )<br /> echo '<div class="archive-meta">' . $category_description . '</div>';<br />get_template_part( 'loop', 'category' );<br />?><br /></div><!-- #content --><br /></div><!-- #container --><br /><?php get_sidebar(); ?><br /><?php get_footer(); ?><br />

43.
twentyten_posted_on()その記事の投稿日と投稿者を表示する<br />twentyten_posted_in()その記事がカテゴライズされているタグやカテゴリーを表示する<br />twentyten_continue_reading_link()抜粋(excerpt)時の「もっと読む」等の文章を挿入するためのフック<br />TwentyTen独自関数 (一部)<br />

44.
get_template_part() が便利すぎる<br />単純にhtml(php)コーディングすればいいだけなので、非プログラマな人でも（フックを覚えなくても）テンプレートの差し替え等が簡単に出来る。<br />自動的に子->親とファイルを探しに行ってくれる上、無ければ無視するだけなので、将来のためにダミーで挿入しておくことが出来る<br />結果的にファイルが分散するので、複数人での平行作業でもファイル更新のコンフリクトが起こりにくい<br />WordPress3.0から追加されてた新機能が分かりやすく組み込まれているので、独自テーマを作成するときの教材としても良い<br />まとめ<br />

45.
TwentyTen本体を直接編集してはいけません。WordPress本体バージョンアップ時に一緒にバージョンアップ（全部上書き）されてしまいます。せっかく簡単に子テーマが作れるのですから、子テーマを作ってそちらで改造しましょう。同じファイル名を子テーマ側で作成すれば、親ファイルは無視されます(function.phpを除く)<br /><h1>タグの出し方を変更したい場合は（h1は1ページ内に1つだけというルールに則るなら）、全テンプレートファイルをチェックしてください。<h1>がページ内で重複する恐れがあります。<br />注意事項<br />

46.
email: kato@djcom.jp<br />email: jcuriouser@gmail.com<br />Twitter: @yorozu<br />Flickr: http://www.flickr.com/photos/yorozu2009<br />Contact us?<br />

47.
ありがとうございました。<br />WordPressユーザーコミュニティー<br /> WordBench 埼玉<br />http://wordbench.org/<br />http://saitama.wordbench.org/<br />