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

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

う

加藤 芳威2010 年 7 月 17 日 ( 土 )

越谷市中央市民会館

名前：加藤芳威（かとうよしたか） ハンドル：かとちゃん、よろず屋 所属：株式会社デジコム 最近のお仕事 (WordPress 関連 )

◦ WordPress テーマコーディング◦ 個別オーダー向けプラグイン製作◦ ユーザーサポート

職能：ネットワークエンジニア、ヘルプデスク、シスアド、

システムコンサル、 etc... 趣味：カメラ (Nikon D90 所有 )

他にも沢山あるけど、今は実質これだけ。WordBench 写真部が結構盛り上がっている

簡単な自己紹介

仕事上で知ったことが中心なので、内容に偏りがあります。

割り込み質問大歓迎！ 途中でもバンバン質問しちゃってください。

即答できないご質問でも調べれば分かりそうなものは、すぐに調べてしまうので少々お待ちください。

プレゼンにあたって

TwentyTenon

WordPress 3.0

TwentyTen （文字通り 2010 年版テーマ）がデフォルトテーマになった

これまでのテーマ「 Default 」「 Classic 」は新規インストールからは無くなった

WordPress3.0 で追加された関数などの影響で、ファイル構成が若干変更になった

WordPress3.0 から実装された関数がふんだんに使われているので、 3.0 未満の WordPress では動かない

WP3.0 でデフォルトテーマが変わった

TwentyTen のファイル構成

images/ languages/ editor-style.css editor-style-rtl.css rtl.css style.css 404.php archive.php attachment.php author.php category.php comments.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

ファイル構成の比較

TwentyTen Default

images/ languages/ editor-style.css editor-style-rtl.css rtl.css style.css 404.php archive.php attachment.php author.php category.php comments.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

images/ ja.po ja.mo kubrick.pot rtl.css style.css 404.php archive.php archives.php comments.php comments-popup.php footer.php functions.php header.php image.php index.php links.php page.php search.php sidebar.php single.php screenshot.png

ファイル構成の比較

TwentyTen Default

images/ languages/ editor-style.css editor-style-rtl.css rtl.css style.css 404.php archive.php attachment.php author.php category.php comments.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

images/ ja.po ja.mo kubrick.pot rtl.css style.css 404.php archive.php archives.php comments.php comments-popup.php footer.php functions.php header.php image.php index.php links.php page.php search.php sidebar.php single.php screenshot.png

デフォルトの 2 カラム（メインのカラム＋サイドバー）ではなく、サイドバーなしのテンプレートが予め用意された。

onecolumn-page.php

※ 　本文枠のサイズは自動では広がらなかった　　サイドバーが無くなるだけ。※ 　投稿では選択できない。ページのみ対応。

横幅を調整したい場合は、 style.css を直接編集して調整することになる

デフォルトは 640px

onecolumn-page.php

これまで、投稿のビジュアルエディタと実際の表示の乖離が激しかったので、画像 1 つ入れただけでもプレビュー等を多用する必要があった

この CSS によって差分を埋めてくれるので、いちいちプレビューしなくても結構表示が一致するようになった

editor-style.css

矢印の部分など、改行位置がきっちりあっている。

文字の大きさ等でずれることはあるが、それでも 1 ～ 2 文字程度。

完璧ではないが、今までが酷過ぎたのでこれで十分満足

editor-style.css

編集画面

実際の公開ページの表示

2 箇所で横幅をあわせるのが、 1 つのポイント デフォルトは、 640px

editor-style.css

editor-style.css

function.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.php category.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.php category.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) を、その関数の位置に読み込む

引数に従って、以下の順にファイルを探し、見つかったらそのファイルを読み込む1. 子テーマの　 A-B.php2. 子テーマの　 A.php3. 親テーマの　 A-B.php4. 親テーマの　 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 （フレームワーク）？

テーマを作るための土台になるテーマ 似たレイアウトや同じ機能

をたくさん流用したいときにすごく有用

3.0 が出る前は、Thematic などが有名

Framework とは

参考：http://www.slideshare.net/odysseygate/themantic-a-wordpress-theme-framework

3.0 の新テンプレートタグ get_template_part がすごく便利

TwentyTen 独自関数で、いろいろなものがパーツ化されている

Framework をつくりやすい

1. wp-content/themes 内にフォルダを新規作成2. themes/style.css を新フォルダーにコピー3. コピー先の style.css を編集

◦ テーマ名等を変更◦ テンプレート情報の最後に

以下の 1 行を追加template: twentyten

4. 管理画面からテーマを選ぶ

では、子テーマを作ってみましょう

/*Theme Name: Twenty Ten の子テーマTheme URI: http://curious-everything.com/Description: 簡単に子テーマが作れます。Author: KATO YoshitakaVersion: 1.0Template: twentyten*/

子テーマ用 style.css 追加修正箇所

<h1> はどこへ行った？

<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?><<?php echo $heading_tag; ?> id="site-title">

<span><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span>

</<?php echo $heading_tag; ?>>

表示コンテンツの種類によって<h1> の位置が変わるようになったheader.php ( 抜粋 )

各ページのタイトルが <h1> になる

single.php( 抜粋 ) category.php

<?php get_header(); ?>

<div id="container"><div id="content" role="main">

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

<div id="nav-above" class="navigation"><div class="nav-previous"><?php

previous_post_link( '%link', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?></div>

<div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', 'twentyten' ) . '</span>' ); ?></div>

</div><!-- #nav-above -->

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<h1 class="entry-title"><?php the_title(); ?></h1>

<div class="entry-meta"><?php twentyten_posted_on(); ?></div><!-- .entry-meta -->

<?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(); ?>

twentyten_posted_on()その記事の投稿日と投稿者を表示する

twentyten_posted_in()その記事がカテゴライズされているタグやカテゴリーを表示する

twentyten_continue_reading_link()抜粋 (excerpt) 時の「もっと読む」等の文

章を挿入するためのフック

TwentyTen 独自関数 ( 一部 )

get_template_part() が便利すぎる◦ 単純に html(php) コーディングすればいいだけなので、

非プログラマな人でも（フックを覚えなくても）テンプレートの差し替え等が簡単に出来る。

◦ 自動的に子→親とファイルを探しに行ってくれる上、無ければ無視するだけなので、将来のためにダミーで挿入しておくことが出来る

◦ 結果的にファイルが分散するので、複数人での平行作業でもファイル更新のコンフリクトが起こりにくい

WordPress3.0 から追加されてた新機能が分かりやすく組み込まれているので、独自テーマを作成するときの教材としても良い

まとめ

TwentyTen 本体を直接編集してはいけません。WordPress 本体バージョンアップ時に一緒にバージョンアップ（全部上書き）されてしまいます。せっかく簡単に子テーマが作れるのですから、子テーマを作ってそちらで改造しましょう。同じファイル名を子テーマ側で作成すれば、親ファイルは無視されます (function.php を除く )

<h1> タグの出し方を変更したい場合は（ h1 は 1ページ内に 1 つだけというルールに則るなら）、全テンプレートファイルをチェックしてください。<h1> がページ内で重複する恐れがあります。

注意事項

email: kato@djcom.jp

email: jcuriouser@gmail.com

Twitter: @yorozu

Flickr: http://www.flickr.com/photos/yorozu2009

Contact us?

ありがとうございました。

WordPress ユーザーコミュニティー　 WordBench 　埼玉http://wordbench.org/http://saitama.wordbench.org/