WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖！～秋バージョン～

WordPress3.0
新デフォルトテーマ
Twenty Ten 大解剖！
～秋バージョン～
2010年10月30日
WordCamp Nagoya 2010
松下寛子@hokori

2/111
自己紹介
松下寛子@hokori
http://hokori.net/
社内SEという名のDTPもWEBもやるなんでも屋さんです。
プライベートではイラストレーターでFlasherだったりし
ます。
実はWordCampは初参加！

3/111
こんな感じで進めます
・テーマとは？
・Twenty Tenってどんなテーマ？
・Twenty Tenの中身を見てみよう！
・テーマの基本
・Twenty Tenのテンプレートを読んでみよう！

4/111
テーマとは？
WordPressのブログの「見た目」と「表示内容」を
変更できる「着せ替え」機能です。
色や配置を変えるだけでなく、投稿記事の表示件
数を変えたり、ページ毎に表示を変えたりと、いろ
いろな操作ができます。
テーマは自分で作成したり、誰かが作ったテーマ
を使用したりすることができます。

Twenty Ten は
どんなテーマ？

6/111
Twenty Ten の概要
WordPres3.0から同梱された、WordPress Default、
WordPress Classicに変わる新しいデフォルトのテーマです。
カスタム背景などのWordPress3.0の新機能に対応していた
り、ウィジェット、アイキャッチ画像などの以前からある機能
をより使いやすくしています。
ファイル構成・ソースコードも整理されて、要所要所にコメン
トが入っていて、とても読みやすくなっています。

7/111
Twenty Ten ここが新しい！
• カスタム背景
• カスタムメニュー
• ヴィジュアルエディタ用のスタイル

8/111
• ウェジェットエリアが増加
• カスタムヘッダーで画像の指定
• 投稿画面でアイキャッチ画像の指定
• ヘッダー画像がページによって変化
• カテゴリーの種類によって投稿一覧表示変更
• ドロップダウンメニュー
• 2カラムと1カラムのページテンプレート
• 印刷用スタイル
Twenty Ten ここが使いやすい！

Twenty Ten の
中身を見てみよう！

10/111
Twenty Ten の場所
twentyten
themes
wp-content
wp-content/themes/twentyten にあります

11/111
Twenty Ten ファイル構成
index.php
single.php
page.php
onecolumn-page.php
search.php
archive.php
category.php
tag.php
attachment.php
author.php
404.php
header.php
loop.php
sidebar.php
footer.php
sidebar-footer.php
comments.php
テンプレート
モジュール
テンプレート
関数ファイル
スタイルシート画像・言語ファ
イル等
functions.php
style.css
rtl.css
editor-style-rtl.css
editor-style.css
screenshot.png
license.txt
images/
languages/

12/111
テンプレート
トップページ、アーカイブ
ページ、カテゴリーページな
ど、要求があったページ全体
を表示するために使われる
PHPソースファイルです。
index.php
single.php
page.php
onecolumn-page.php
search.php
archive.php
category.php
tag.php
attachment.php
author.php
404.php

13/111
モジュールテンプレート
他のテンプレートから部品
（モジュール）として読み込
まれるPHPソースファイルで
す。
単にテンプレートと呼ばれた
り、テンプレートパーツとも
呼ばれたりします。
header.php
loop.php
sidebar.php
footer.php
sidebar-footer.php
comments.php

14/111
スタイルシート
スタイルシートファイル
です。
style.cssだけはテーマ
に必須で、書式に従って、
テーマの説明が書かれて
います。
style.css
rtl.css
editor-style-rtl.css
editor-style.css
@charset "utf-8";
/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: WordPress のテーマ「2010」は、スタイリッシュで、カスタマイズ可能
で、簡潔で、読みやすく -- カスタムメニュー、ヘッダー画像、背景でサイトを作れます。
Twenty Ten は6つのウィジェットエリア (サイドバーに2つ、フッターに4つ) …

15/111
テーマ内で使う設定や関
数を定義します。
自動的に WordPress の初
期化中に読み込まれます。
テーマ内だけで使えるプ
ラグインのようなもので
す。
関数ファイル
functions.php

16/111
scrennshot.png
管理画面のテーマ選択ページに表
示される画像です。
license.txt
ライセンスが書かれています。
imagesフォルダ
テーマで使用する画像が入ってい
ます。
languagesフォルダ
語句の翻訳に使われる言語ファイ
ルが入っています。
画像・言語ファイル等々
screenshot.png
license.txt
images/
languages/

ここでちょっと
テーマの基本をおさえる

18/111
テーマの最小構成は以下の2ファイル
index.php（汎用テンプレート）
style.css（テーマの説明＋CSS）
いろいろやりたいなら、さらにファイルを追加する
・ページ毎のテンプレート
・functions.php
・画像ファイル
・言語ファイル・その他いろいろ
テーマの構成ファイル

19/111
ページとテンプレート
ページ毎に表示を変えたい場合は、ページ毎のテ
ンプレートを用意します。
トップページ：home.php
単独記事ページ：single.php
個別ページ：page.php
カテゴリーページ：category.php
アーカイブページ：archive.php などなど…。
ページ毎のテンプレートは、名前と優先順位がき
まっています。

20/111
テンプレートの優先順位
例えば、カテゴリー記事一覧ページを開いたとき。
1. category-slug.php
2. category-ID.php
3. category.php
4. archive.php
5. index.php
この順番でテンプレートを探して、見つかったも
のだけが使用されます。
子テーマがある場合は、子テーマの方が優先され
ます。

21/111
テンプレート階層
http://codex.wordpress.org/images/1/18/Template_Hierarchy.png

22/111
子テーマとは？
テーマをカスタマイズするときに、テーマを丸ご
とコピーして書き換えるのではなく、必要なファ
イルだけ追加・上書きしたテーマが作れるような
仕組みです。
style.cssで親テーマを指定するだけで使えます。
子テーマのテンプレートは、親テーマのテンプ
レートより先に呼び出されます。

Twenty Ten の
テンプレートを
読んでみよう！

24/111
10. onecolumn-page.php
11. search.php
12. archive.php
13. category.php
14. tag.php
15. author.php
16. attachment.php
17. 404.php
1. index.php
2. header.php
3. loop.php
4. sidebar.php
5. footer.php
6. sidebar-footer.php
7. single.php
8. comments.php
9. page.php
この順番で読んでいきます
主に WordPress3.0 の新機能と、
Twenty Ten の独自機能について解説していきます。
あと気になったところ。
※テンプレート
※モジュールテンプレート

index.php
header.php
sidebar.php
footer.php
テンプレート
ページ毎のテンプレー
トが用意されていない
場合に適用される汎用
のテンプレート。
index.php

26/111
01. <?php
02. /**
03. * The main template file.
04. *
05. * This is the most generic template file in a WordPress theme
06. * and one of the two required files for a theme (the other being style.css).
07. * It is used to display a page when nothing more specific matches a query.
08. * E.g., it puts together the home page when no home.php file exists.
09. * Learn more: http://codex.wordpress.org/Template_Hierarchy
10. *
11. * @package WordPress
12. * @subpackage Twenty_Ten
13. * @since Twenty Ten 1.0
14. */
15.
16. get_header(); ?>
17.
18. <div id="container">
19. <div id="content" role="main">
20.
index.php (1/2)

27/111
21. <?php
22. /* Run the loop to output the posts.
23. * If you want to overload this in a child theme then include a file
24. * called loop-index.php and that will be used instead.
25. */
26. get_template_part( 'loop', 'index' );
27. ?>
28. </div>
29. </div>
30.
31. <?php get_sidebar(); ?>
32. <?php get_footer(); ?>
index.php (2/2)
26. get_template_part( 'loop', 'index' );26. get_template_part( 'loop', 'index' );
◆ テンプレートパーツの読み込み

28/111
テンプレートパーツの読み込み (1)
get_template_part（WP3.0 から追加）
ヘッダ・フッタ・サイドバー以外のテンプレートパーツ（モ
ジュールテンプレート）を読み込むテンプレートタグ
書式：
<?php get_template_part( slug, name ) ?>
slug：一般テンプレートのスラッグ名
name：特定テンプレートの名前（省略可）

slug-name.php がなければ、slug.php を読み込む

29/111
テンプレートパーツの読み込み (2)
例：<?php get_template_part('loop', 'index' ) ?>
親テーマをtwentyten、子テーマをtwentyten-childとし
た場合、この順番で呼び出されます。
1. wp-content/themes/twentyten-child/loop-index.php
2. wp-content/themes/twentyten-child/loop.php
3. wp-content/themes/twentyten/loop-index.php
4. wp-content/themes/twentyten/loop.php
全てのファイルがない場合はなにもしません。

HTMLの最初からヘッ
ダー部（メインの開始タ
グ）までを表示する。
header.phpheader.php

31/111
01. <?php
02. /**
03. * The Header for our theme.
04. *
05. * Displays all of the <head> section and everything up till <div id="main">
06. *
10. */
11. ?><!DOCTYPE html>
12. <html <?php language_attributes(); ?>>
13. <head>
14. <meta charset="<?php bloginfo( 'charset' ); ?>" />
15. <title><?php
16. /*
17. * Print the <title> tag based on what is being viewed.
18. */
19. global $page, $paged;
20.
21. wp_title( '|', true, 'right' );
header.php(1/5)
11. ?><!DOCTYPE html>
12. <html <?php language_attributes(); ?>>
13. <head>
14. <meta charset="<?php bloginfo( 'charset' ); ?>" /><meta charset="<?php bloginfo( 'charset' ); ?>" />
HTML5 ！

32/111
22.
23. // Add the blog name.
24. bloginfo( 'name' );
25.
26. // Add the blog description for the home/front page.
27. $site_description = get_bloginfo( 'description', 'display' );
28. if ( $site_description && ( is_home() || is_front_page() ) )
29. echo " | $site_description";
30.
31. // Add a page number if necessary:
32. if ( $paged >= 2 || $page >= 2 )
33. echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );
34.
35. ?></title>
36. <link rel="profile" href="http://gmpg.org/xfn/11" />
37. <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_
url' ); ?>" />
38. <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
39. <?php
40. /* We add some JavaScript to pages with the comment form
41. * to support sites with threaded comments (when in use).
42. */
header.php(2/5)
31. // Add a page number if necessary:
32. if ( $paged >= 2 || $page >= 2 )
33. echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );
26. // Add the blog description for the home/front page.
27. $site_description = get_bloginfo( 'description', 'display' );
28. if ( $site_description && ( is_home() || is_front_page() ) )
29. echo " | $site_description";echo " | $site_description";
トップページの場合は、サイトの
説明（キャッチフレーズ）を表示
2 ページ目以降はページ数を表示

33/111
43. if ( is_singular() && get_option( 'thread_comments' ) )
44. wp_enqueue_script( 'comment-reply' );
45.
46. /* Always have wp_head() just before the closing </head>
47. * tag of your theme, or you will break many plugins, which
48. * generally use this hook to add elements to <head> such
49. * as styles, scripts, and meta tags.
50. */
51. wp_head();
52. ?>
53. </head>
54.
55. <body <?php body_class(); ?>>
56. <div id="wrapper" class="hfeed">
57.
58. <div id="header">
59. <div id="masthead">
60. <div id="branding" role="banner">
61. <?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
62. <<?php echo $heading_tag; ?> id="site-title">
63. <span>
64. <a href="<?php echo home_url( '/' ); ?>" title="<?php echo
header.php(3/5)
61. <?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
61.
サイトタイトルを括るタグがページに
よって変化
トップページ：h1 タグ
その他のページ：div タグ
44. wp_enqueue_script( 'comment-reply' );
javascript を適切な順番でロードしてくれる
便利関数。
51. wp_head();51.
ヘッダの終わりを通知するフック。プラグインや
独自関数で使用。これを消すと、正常に動作しな
くなるプラグインやテーマが出てくる

34/111
esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' );
?></a>
65. </span>
66. </<?php echo $heading_tag; ?>>
67. <div id="site-description"><?php bloginfo( 'description' ); ?></div>
68.
69. <?php
70. // Check if this is a post or page, if it has a thumbnail, and if it's a
big one
71. if ( is_singular() &&
72. has_post_thumbnail( $post->ID ) &&
73. ( /* $src, $width, $height */ $image = wp_get_attachment_
image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
74. $image[1] >= HEADER_IMAGE_WIDTH ) :
75. // Houston, we have a new header image!
76. echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
77. else : ?>
78. <img src="<?php header_image(); ?>" width="<?php echo
HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>"
alt="" />
79. <?php endif; ?>
80. </div>
header.php(4/5)
69. <?php
70. // Check if this is a post or page, if it has a thumbnail, and if it's a
big one
71. if ( is_singular() &&
72. has_post_thumbnail( $post->ID ) &&
image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
74. $image[1] >= HEADER_IMAGE_WIDTH ) :
75. // Houston, we have a new header image!
76. echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
77. else : ?>
78. <img src="<?php header_image(); ?>" width="<?php echo
HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>"
alt="" />
79. <?php endif; ?>
69.
70.
71.
72.
74.
75.
76.
77.
78.
79.
◆ ページによってヘッダ画像の変更

35/111
81.
82. <div id="access" role="navigation">
83. <?php /* Allow screen readers / text browsers to skip the navigation
menu and get right to the good stuff */ ?>
84. <div class="skip-link screen-reader-text"><a href="#content"
title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to
content', 'twentyten' ); ?></a></div>
85. <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu
falls back to wp_page_menu. The menu assiged to the primary position is the one
used. If none is assigned, the menu with the lowest ID is used. */ ?>
86. <?php wp_nav_menu( array( 'container_class' => 'menu-header',
'theme_location' => 'primary' ) ); ?>
87. </div>
88. </div>
89. </div>
90.
91. <div id="main">
header.php(5/5)
83. <?php /* Allow screen readers / text browsers to skip the navigation
menu and get right to the good stuff */ ?>
84. <div class="skip-link screen-reader-text"><a href="#content"
<?php /* Allow screen readers / text browsers to skip the navigation
<div class="skip-link screen-reader-text"><a href="#content"
85. <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu
used. If none is assigned, the menu with the lowest ID is used. */ ?>
86. <?php wp_nav_menu( array( 'container_class' => 'menu-header',
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu
<?php wp_nav_menu( array( 'container_class' => 'menu-header',
スクリーンリーダのスキップ対応
◆ ナビゲーションメニュー表示

36/111
<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_
thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH;
?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>
ページによってヘッダ画像の変更(1)
thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
以下の条件がそろってる場合は、投稿サムネイル表示
・単独ページ
・投稿サムネイル（アイキャッチ）画像が指定してある
・投稿サムネイル画像の幅が指定サイズ（940px）以上
else : ?>
?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>
else : ?>
<?php endif; ?>
条件がそろっていない場合は、管理画面で指定したカ
スタムヘッダー画像を表示

37/111
ページによってヘッダ画像の変更(2)
◆投稿サムネイル（アイキャッチ画像）
実はWP2.9から追加済み。
functions.phpに設定項目を追加しないと動きま
せんでしたが、Twenty Ten では設定済みなので
何もしないでも使えます。
has_post_thumbnail（WP2.9 から追加 )
投稿サムネイルがあるか確認するテンプレートタグ
get_the_post_thumbnail（WP2.9 から追加 )
投稿サムネイルを取得するテンプレートタグ

38/111
ヘッダ画像の変更 (3)
◆カスタムヘッダー画像
WP3.0未満のデフォルトテーマでも使用できま
したが、機能的には少なめでした。
Twenty Tenでは画像の選択・アップロードなど
機能が増えました。
header_image（WP2.1 から追加 )
ヘッダー画像を表示するテンプレートタグ

39/111
ナビゲーションメニューの表示
wp_nav_menu（WP3.0 から追加 )
　ナビゲーションメニューを表示するテンプレートタグ
メニューが存在しない場合は、デフォルトで
wp_page_ menu （個別ページを表示するテン
プレートタグ）を呼び出します。
パラメータを変えることで、表示するメニューを
絞り込んだり、リンクの前後にテキストを追加し
たりといろいろ表示が変えられます。

投稿一覧（ループ）を表示
する。
Gallery、Asides、その他
のカテゴリーで表示内容
を変えている。
loop.phploop.php

41/111
01. <?php
02. /**
03. * The loop that displays posts.
04. *
05. * The loop displays the posts and the post content. See
06. * http://codex.wordpress.org/The_Loop to understand it and
07. * http://codex.wordpress.org/Template_Tags to understand
08. * the tags used in it.
09. *
10. * This can be overridden in child themes with loop.php or
11. * loop-template.php, where 'template' is the loop context
12. * requested by a template. For example, loop-index.php would
13. * be used if it exists and we ask for the loop with:
14. * <code>get_template_part( 'loop', 'index' );</code>
15. *
19. */
20. ?>
21.
loop.php(1/10)

42/111
22. <?php /* Display navigation to next/previous pages when applicable */ ?>
23. <?php if ( $wp_query->max_num_pages > 1 ) : ?>
24. <div id="nav-above" class="navigation">
25. <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-
nav">←</span> Older posts', 'twentyten' ) ); ?></div>
26. <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span
class="meta-nav">→</span>', 'twentyten' ) ); ?></div>
27. </div>
28. <?php endif; ?>
29.
30. <?php /* If there are no posts to display, such as an empty archive page */ ?>
31. <?php if ( ! have_posts() ) : ?>
32. <div id="post-0" class="post error404 not-found">
33. <h1 class="entry-title"><?php _e( 'Not Found', 'twentyten' ); ?></h1>
34. <div class="entry-content">
35. <p><?php _e( 'Apologies, but no results were found for the requested
archive. Perhaps searching will help find a related post.', 'twentyten' ); ?></p>
36. <?php get_search_form(); ?>
37. </div>
38. </div>
39. <?php endif; ?>
40.
loop.php(2/10)
25. <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-
nav">←</span> Older posts', 'twentyten' ) ); ?></div>
26. <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span
class="meta-nav">→</span>', 'twentyten' ) ); ?></div>
27. </div>
28. <?php endif; ?>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span
1 ページ以上ある場合ナビゲーショ
ンリンク表示（空タグ対策用？）

43/111
41. <?php
42. /* Start the Loop.
43. *
44. * In Twenty Ten we use the same loop in multiple contexts.
45. * It is broken into three main parts: when we're displaying
46. * posts that are in the gallery category, when we're displaying
47. * posts in the asides category, and finally all other posts.
48. *
49. * Additionally, we sometimes check for whether we are on an
50. * archive page, a search page, etc., allowing for small differences
51. * in the loop on each template without actually duplicating
52. * the rest of the loop that is shared.
53. *
54. * Without further ado, the loop:
55. */ ?>
56. <?php while ( have_posts() ) : the_post(); ?>
57.
58. <?php /* How to display posts in the Gallery category. */ ?>
59.
60. <?php if ( in_category( _x('gallery', 'gallery category slug', 'twentyten') ) ) : ?>
61. <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
62. <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php
loop.php(3/10)
41. <?php
42. /* Start the Loop.
43. *
44. * In Twenty Ten we use the same loop in multiple contexts.
45. * It is broken into three main parts: when we're displaying
46. * posts that are in the gallery category, when we're displaying
47. * posts in the asides category, and finally all other posts.
48. *
49. * Additionally, we sometimes check for whether we are on an
50. * archive page, a search page, etc., allowing for small differences
51. * in the loop on each template without actually duplicating
52. * the rest of the loop that is shared.
53. *
54. * Without further ado, the loop:
55. */ ?>
56. <?php while ( have_posts() ) : the_post(); ?>
41.
42.
43.
44.
45.
46.
47.
48.
49.
投稿ループ開始
カテゴリの種類によって表示方法変更
・gallery
・asides
・それ以外のカテゴリー
カテゴリー名かカテゴリースラッグ
名が gallery の場合の投稿表示開始
58. <?php /* How to display posts in the Gallery category. */ ?>
59.
60. <?php if ( in_category( _x('gallery', 'gallery category slug', 'twentyten') ) ) : ?>
58.
59.
60.

44/111
printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) );
?>" rel="bookmark"><?php the_title(); ?></a></h2>
63.
64. <div class="entry-meta">
65. <?php twentyten_posted_on(); ?>
66. </div>
67.
69. <?php if ( post_password_required() ) : ?>
70. <?php the_content(); ?>
71. <?php else : ?>
72. <?php
73. $images = get_children( array( 'post_parent' => $post->ID, 'post_
type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order',
'order' => 'ASC', 'numberposts' => 999 ) );
74. if ( $images ) :
75. $total_images = count( $images );
76. $image = array_shift( $images );
77. $image_img_tag = wp_get_attachment_image( $image->ID,
'thumbnail' );
78. ?>
79. <div class="gallery-thumb">
loop.php(4/10)
日付と投稿者を表示する
Twenty Ten の独自関数
functions.php（435-456 行）
で定義
72. <?php
type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order',
'order' => 'ASC', 'numberposts' => 999 ) );
74. if ( $images ) :
75. $total_images = count( $images );
76. $image = array_shift( $images );
77. $image_img_tag = wp_get_attachment_image( $image->ID,
'thumbnail' );
78. ?>
72.
74.
75.
76.
77.
78. ?>
投稿と関連付けされている（投稿画面か
らアップロードされた）画像情報取得

45/111
80. <a class="size-thumbnail" href="<?php the_permalink();
?>"><?php echo $image_img_tag; ?></a>
81. </div>
82. <p><em><?php printf( __( 'This gallery contains <a
%1$s>%2$s photos</a>.', 'twentyten' ),
83. 'href="' . get_permalink() . '" title="' . sprintf( esc_attr__(
'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ) . '" rel="bookmark"',
84. $total_images
85. ); ?></em></p>
86. <?php endif; ?>
87. <?php the_excerpt(); ?>
88. <?php endif; ?>
90.
91. <div class="entry-utility">
92. <a href="<?php echo get_term_link( _x('gallery', 'gallery category
slug', 'twentyten'), 'category' ); ?>" title="<?php esc_attr_e( 'View posts in the Gallery
category', 'twentyten' ); ?>"><?php _e( 'More Galleries', 'twentyten' ); ?></a>
93. <span class="meta-sep">|</span>
94. <span class="comments-link"><?php comments_popup_link( __(
'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments',
'twentyten' ) ); ?></span>
loop.php(5/10)
サムネイル画像表示
%1$s>%2$s photos</a>.', 'twentyten' ),
83. 'href="' . get_permalink() . '" title="' . sprintf( esc_attr__(
'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ) . '" rel="bookmark"',
84. $total_images
83.
84. $total_images
投稿と関連付けされている
画像の枚数等表示

46/111
95. <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="meta-
sep">|</span> <span class="edit-link">', '</span>' ); ?>
96. </div>
97. </div>
98.
99. <?php /* How to display posts in the asides category */ ?>
100.
101. <?php elseif ( in_category( _x('asides', 'asides category slug', 'twentyten') ) ) :
?>
103.
104. <?php if ( is_archive() || is_search() ) : // Display excerpts for archives and
search. ?>
105. <div class="entry-summary">
107. </div>
108. <?php else : ?>
110. <?php the_content( __( 'Continue reading <span class="meta-
nav">→</span>', 'twentyten' ) ); ?>
112. <?php endif; ?>
loop.php(6/10)
カテゴリー名かカテゴリースラッグ
名が asides の場合の投稿表示開始
99. <?php /* How to display posts in the asides category */ ?>
100.
101. <?php elseif ( in_category( _x('asides', 'asides category slug', 'twentyten') ) ) :
99.

47/111
113.
120. </div>
121.
122. <?php /* How to display all other posts. */ ?>
123.
124. <?php else : ?>
126. <h2 class="entry-title"><a href="<?php the_permalink(); ?>"
title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute(
'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
127.
loop.php(7/10)
122. <?php /* How to display all other posts. */ ?>
その他のカテゴリー
の投稿表示開始

48/111
130. </div>
131.
132. <?php if ( is_archive() || is_search() ) : // Only display excerpts for archives
and search. ?>
133. <div class="entry-summary">
135. </div>
136. <?php else : ?>
138. <?php the_content( __( 'Continue reading <span class="meta-
nav">→</span>', 'twentyten' ) ); ?>
139. <?php wp_link_pages( array( 'before' => '<div class="page-link">' .
__( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
142.
144. <?php if ( count( get_the_category() ) ) : ?>
145. <span class="cat-links">
146. <?php printf( __( '<span class="%1$s">Posted in</span>
%2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-cat-links', get_the_category_
list( ', ' ) ); ?>
loop.php(8/10)

49/111
147. </span>
150. <?php
151. $tags_list = get_the_tag_list( '', ', ' );
152. if ( $tags_list ):
153. ?>
154. <span class="tag-links">
155. <?php printf( __( '<span class="%1$s">Tagged</span>
%2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); ?>
156. </span>
162. </div>
163.
164. <?php comments_template( '', true ); ?>
loop.php(9/10)

50/111
165.
166. <?php endif; // This was the if statement that broke the loop into three parts
based on categories. ?>
167.
168. <?php endwhile; // End the loop. Whew. ?>
169.
172. <div id="nav-below" class="navigation">
173. <div class="nav-previous"><?php next_posts_link( __( '<span
class="meta-nav">←</span> Older posts', 'twentyten' ) ); ?></div>
174. <div class="nav-next"><?php previous_posts_link( __( 'Newer
posts <span class="meta-nav">→</span>', 'twentyten' ) ); ?></div>
175. </div>
loop.php(10/10)
166. <?php endif; // This was the if statement that broke the loop into three parts
<?php endif; // This was the if statement that broke the loop into three parts
投稿表示の分岐終わり

51/111
投稿一覧（ループ）は loop.php
loop.php は以下の７つのファイルから読み込まれています。
• archive.php
• author.php
• category.php
• index.php
• loop.php
• search.php
• tag.php
今までのデフォルトテーマでは、投稿一覧（ループ）を表示す
る部分は各ファイルにそれぞれ書かれていました。
Twenty Ten ではアーカイブ表示部分はすべてloop.phpにま
とめられました。

サイドバー（ウィジェッ
トエリア）を表示する。
sidebar.phpsidebar.php

53/111
01. <?php
02. /**
03. * The Sidebar containing the primary and secondary widget areas.
04. *
08. */
09. ?>
10.
11. <div id="primary" class="widget-area" role="complementary">
12. <ul class="xoxo">
13.
14. <?php
15. /* When we call the dynamic_sidebar() function, it'll spit out
16. * the widgets for that widget area. If it instead returns false,
17. * then the sidebar simply doesn't exist, so we'll hard-code in
18. * some default sidebar stuff just in case.
19. */
20. if ( ! dynamic_sidebar( 'primary-widget-area' ) ) : ?>
21.
sidebar.php(1/3)
14. <?php
15. /* When we call the dynamic_sidebar() function, it'll spit out
16. * the widgets for that widget area. If it instead returns false,
17. * then the sidebar simply doesn't exist, so we'll hard-code in
18. * some default sidebar stuff just in case.
19. */
14. <?php
15.
16.
17.
18.
19.
◆ ウィジェット 1 の表示

54/111
22. <li id="search" class="widget-container widget_search">
24. </li>
25.
26. <li id="archives" class="widget-container">
27. <h3 class="widget-title"><?php _e( 'Archives', 'twentyten' ); ?></h3>
28. <ul>
29. <?php wp_get_archives( 'type=monthly' ); ?>
30. </ul>
31. </li>
32.
33. <li id="meta" class="widget-container">
34. <h3 class="widget-title"><?php _e( 'Meta', 'twentyten' ); ?></h3>
35. <ul>
36. <?php wp_register(); ?>
37. <li><?php wp_loginout(); ?></li>
38. <?php wp_meta(); ?>
39. </ul>
40. </li>
41.
42. <?php endif; // end primary widget area ?>
43. </ul>
22. <li id="search" class="widget-container widget_search">
24. </li>
25.
26. <li id="archives" class="widget-container">
27. <h3 class="widget-title"><?php _e( 'Archives', 'twentyten' ); ?></h3>
28. <ul>
29. <?php wp_get_archives( 'type=monthly' ); ?>
30. </ul>
31. </li>
32.
33. <li id="meta" class="widget-container">
34. <h3 class="widget-title"><?php _e( 'Meta', 'twentyten' ); ?></h3>
35. <ul>
36. <?php wp_register(); ?>
37. <li><?php wp_loginout(); ?></li>
38. <?php wp_meta(); ?>
39. </ul>
40. </li>40. </li>
sidebar.php(2/3)
ウェジェット 1 が設定されてない場合の表示

55/111
44. </div>
45.
46. <?php
47. // A second sidebar for widgets, just because.
48. if ( is_active_sidebar( 'secondary-widget-area' ) ) : ?>
49.
50. <div id="secondary" class="widget-area" role="complementary">
52. <?php dynamic_sidebar( 'secondary-widget-area' ); ?>
53. </ul>
54. </div>
55.
56. <?php endif; ?>
sidebar.php(3/3)
46. <?php
47. // A second sidebar for widgets, just because.
48. if ( is_active_sidebar( 'secondary-widget-area' ) ) : ?>
49.
50. <div id="secondary" class="widget-area" role="complementary">
52. <?php dynamic_sidebar( 'secondary-widget-area' ); ?>
53. </ul>
54. </div>
55.
56. <?php endif; ?>
46. <?php
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
◆ ウィジェット 2 が設定されているは
ウィジェット２を表示

56/111
ウィジェットの表示
ウィジェット機能は、WP2.2から搭載されていま
す。（WP3.0未満のデフォルトテーマでも使用できまし
た）
Tentry Tenではウィジェットエリアも増えて、使
いやすいようにカスタマイズされています。
dynamic_sidebar（WP2.2 から追加 )
　ウィジェットを表示するテンプレートタグ

フッター部（メインの終
了タグとフッターのウィ
ジェット）からHTMLの
終わりまでを表示する。
footer.phpfooter.php
sidebar-footer.php

58/111
01. <?php
02. /**
03. * The template for displaying the footer.
04. *
05. * Contains the closing of the id=main div and all content
06. * after. Calls sidebar-footer.php for bottom widgets.
07. *
11. */
12. ?>
13. </div>
14.
15. <div id="footer" role="contentinfo">
16. <div id="colophon">
17.
18. <?php
19. /* A sidebar in the footer? Yep. You can can customize
20. * your footer with four columns of widgets.
21. */
22. get_sidebar( 'footer' );
footer.php(1/3)
18. <?php
19. /* A sidebar in the footer? Yep. You can can customize
20. * your footer with four columns of widgets.
21. */
22. get_sidebar( 'footer' );
18. <?php
sidebar-footer.php 読み込み

59/111
23. ?>
24.
25. <div id="site-info">
26. <a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr(
get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
27. <?php bloginfo( 'name' ); ?>
28. </a>
29. </div>
30.
31. <div id="site-generator">
32. <?php do_action( 'twentyten_credits' ); ?>
33. <a href="<?php echo esc_url( __('http://wordpress.org/', 'twentyten') );
?>"
34. title="<?php esc_attr_e('Semantic Personal Publishing Platform',
'twentyten'); ?>" rel="generator">
35. <?php printf( __('Proudly powered by %s.', 'twentyten'), 'WordPress'
); ?>
36. </a>
37. </div>
38.
39. </div>
40. </div>
footer.php(2/3)

60/111
41.
42. </div>
43.
44. <?php
45. /* Always have wp_footer() just before the closing </body>
46. * tag of your theme, or you will break many plugins, which
47. * generally use this hook to reference JavaScript files.
48. */
49.
50. wp_footer();
51. ?>
52. </body>
53. </html>
footer.php(3/3)
50. wp_footer();50.
フッタの終わりを通知するフック。プラグインや
独自関数で使用。これを消すと、正常に動作しな
くなるプラグインやテーマが出てくる

フッターのサイドバー
（ウィジェットエリア）を
表示する。
sidebar-footer.
php
sidebar-footer.php

62/111
01. <?php
02. /**
03. * The Footer widget areas.
04. *
08. */
09. ?>
10.
11. <?php
12. /* The footer widget area is triggered if any of the areas
13. * have widgets. So let's check that first.
14. *
15. * If none of the sidebars have widgets, then let's bail early.
16. */
17. if ( ! is_active_sidebar( 'first-footer-widget-area' )
18. && ! is_active_sidebar( 'second-footer-widget-area' )
19. && ! is_active_sidebar( 'third-footer-widget-area' )
20. && ! is_active_sidebar( 'fourth-footer-widget-area' )
21. )
22. return;
sidebar-footer.php(1/3)
11. <?php
12. /* The footer widget area is triggered if any of the areas
13. * have widgets. So let's check that first.
14. *
15. * If none of the sidebars have widgets, then let's bail early.
16. */
17. if ( ! is_active_sidebar( 'first-footer-widget-area' )
18. && ! is_active_sidebar( 'second-footer-widget-area' )
19. && ! is_active_sidebar( 'third-footer-widget-area' )
20. && ! is_active_sidebar( 'fourth-footer-widget-area' )
21. )
22. return;
フッターウィジェットエリアが全て設定
されていない場合は何もしない

63/111
23. // If we get this far, we have widgets. Let do this.
24. ?>
25.
26. <div id="footer-widget-area" role="complementary">
27.
28. <?php if ( is_active_sidebar( 'first-footer-widget-area' ) ) : ?>
29. <div id="first" class="widget-area">
31. <?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
32. </ul>
33. </div>
34. <?php endif; ?>
35.
36. <?php if ( is_active_sidebar( 'second-footer-widget-area' ) ) : ?>
37. <div id="second" class="widget-area">
39. <?php dynamic_sidebar( 'second-footer-widget-area' ); ?>
40. </ul>
41. </div>
42. <?php endif; ?>
28. <?php if ( is_active_sidebar( 'first-footer-widget-area' ) ) : ?>
29. <div id="first" class="widget-area">
31. <?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
32. </ul>
33. </div>
34. <?php endif; ?><?php endif; ?>
フッターウィジェットエリア 1 が設定さ
れている場合はウィジェット表示
以下２～ 4 まで同じ処理
36. <?php if ( is_active_sidebar( 'second-footer-widget-area' ) ) : ?>
37. <div id="second" class="widget-area">
39. <?php dynamic_sidebar( 'second-footer-widget-area' ); ?>
40. </ul>
41. </div>
42. <?php endif; ?>
40.
41.
42. <?php endif; ?>
フッターウィジェットエリア 2

64/111
43.
44. <?php if ( is_active_sidebar( 'third-footer-widget-area' ) ) : ?>
45. <div id="third" class="widget-area">
47. <?php dynamic_sidebar( 'third-footer-widget-area' ); ?>
48. </ul>
49. </div>
50. <?php endif; ?>
51.
52. <?php if ( is_active_sidebar( 'fourth-footer-widget-area' ) ) : ?>
53. <div id="fourth" class="widget-area">
55. <?php dynamic_sidebar( 'fourth-footer-widget-area' ); ?>
56. </ul>
57. </div>
58. <?php endif; ?>
59.
60. </div>
45. <div id="third" class="widget-area">
47. <?php dynamic_sidebar( 'third-footer-widget-area' ); ?>
48. </ul>
49. </div>
50. <?php endif; ?>
45.
46.
47.
48.
49.
50.
52. <?php if ( is_active_sidebar( 'fourth-footer-widget-area' ) ) : ?>
53. <div id="fourth" class="widget-area">
55. <?php dynamic_sidebar( 'fourth-footer-widget-area' ); ?>
56. </ul>
57. </div>
58. <?php endif; ?>
52.
53.
54.
55.
56.
57.
58. <?php endif; ?>

single.php
header.php
sidebar.php
footer.php
テンプレート
個別の投稿記事を表示
する。
single.php
comments.php

66/111
01. <?php
02. /**
03. * The Template for displaying all single posts.
04. *
08. */
09.
11.
14.
15. <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
16.
18. <div class="nav-previous"><?php previous_post_link( '%link',
'<span class="meta-nav">' . _x( '←', 'Previous post link', 'twentyten' ) . '</span>
%title' ); ?></div>
19. <div class="nav-next"><?php next_post_link( '%link', '%title <span
class="meta-nav">' . _x( '→', 'Next post link', 'twentyten' ) . '</span>' ); ?></
div>
single.php (1/4)

67/111
20. </div>
21.
23. <h1 class="entry-title"><?php the_title(); ?></h1>
24.
28.
31. <?php wp_link_pages( array( 'before' => '<div class="page-
link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
33.
34. <?php if ( get_the_author_meta( 'description' ) ) : // If a user has filled out their
description, show a bio on their entries ?>
35. <div id="entry-author-info">
36. <div id="author-avatar">
37. <?php echo get_avatar( get_the_author_meta( 'user_email' ),
apply_filters( 'twentyten_author_bio_avatar_size', 60 ) ); ?>apply_filters( 'twentyten_author_bio_avatar_size', 60 ) ); ?>
アバター画像サイズを後から add_
ﬁlter で変えられるようにフック指定
single.php (2/4)
26. <?php twentyten_posted_on(); ?> 日付と投稿者を表示する
Twenty Ten 独自関数
functions.php（435-456
行）で定義

68/111
38. </div>
39. <div id="author-description">
40. <h2><?php printf( esc_attr__( 'About %s', 'twentyten' ),
get_the_author() ); ?></h2>
41. <?php the_author_meta( 'description' ); ?>
42. <div id="author-link">
43. <a href="<?php echo get_author_posts_url( get_the_
author_meta( 'ID' ) ); ?>">
44. <?php printf( __( 'View all posts by %s <span
class="meta-nav">→</span>', 'twentyten' ), get_the_author() ); ?>
45. </a>
46. </div>
47. </div>
48. </div>
49. <?php endif; ?>
50.
52. <?php twentyten_posted_in(); ?>
53. <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span
class="edit-link">', '</span>' ); ?>
55. </div>
single.php (3/4)
<div class="entry-utility">
記事のカテゴリー、タグ、
パーマリンクを表示する
Twenty Ten 独自関数
functions.php（458-483
行）で定義

69/111
56.
58. <div class="nav-previous"><?php previous_post_link( '%link',
'<span class="meta-nav">' . _x( '←', 'Previous post link', 'twentyten' ) . '</span>
%title' ); ?></div>
59. <div class="nav-next"><?php next_post_link( '%link', '%title <span
class="meta-nav">' . _x( '→', 'Next post link', 'twentyten' ) . '</span>' ); ?></
div>
60. </div>
61.
63.
64. <?php endwhile; // end of the loop. ?>
65.
66. </div>
68.
62. <?php comments_template( '', true ); ?>62.
コメントテンプレート読み込み
single.php (4/4)

コメント一覧とコメント
フォームを表示する。
comments.phpcomments.php

71/111
01. <?php
02. /**
03. * The template for displaying Comments.
04. *
05. * The area of the page that contains both current comments
06. * and the comment form. The actual display of comments is
07. * handled by a callback to twentyten_comment which is
08. * located in the functions.php file.
09. *
13. */
14. ?>
15.
16. <div id="comments">
17. <?php if ( post_password_required() ) : ?>
18. <p class="nopassword"><?php _e( 'This post is password protected.
Enter the password to view any comments.', 'twentyten' ); ?></p>
19. </div>
comments.php (1/4)

72/111
20. <?php
21. /* Stop the rest of comments.php from being processed,
22. * but don't kill the script entirely -- we still have
23. * to fully load the template.
24. */
25. return;
26. endif;
27. ?>
28.
29. <?php
30. // You can start editing here -- including this comment!
31. ?>
32.
33. <?php if ( have_comments() ) : ?>
34. <h3 id="comments-title"><?php
35. printf( _n( 'One Response to %2$s', '%1$s Responses to %2$s', get_
comments_number(), 'twentyten' ),
36. number_format_i18n( get_comments_number() ), '<em>' . get_the_title()
. '</em>' );
37. ?></h3>
38.
39. <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : //
Are there comments to navigate through? ?>
comments.php (2/4)

73/111
40. <div class="navigation">
41. <div class="nav-previous"><?php previous_comments_link( __( '<span
class="meta-nav">←</span> Older Comments', 'twentyten' ) ); ?></div>
42. <div class="nav-next"><?php next_comments_link( __( 'Newer
Comments <span class="meta-nav">→</span>', 'twentyten' ) ); ?></div>
43. </div> 
44. <?php endif; // check for comment navigation ?>
45.
46. <ol class="commentlist">
47. <?php
48. /* Loop through and list the comments. Tell wp_list_comments()
49. * to use twentyten_comment() to format the comments.
50. * If you want to overload this in a child theme then you can
51. * define twentyten_comment() and that will be used instead.
52. * See twentyten_comment() in twentyten/functions.php for more.
53. */
54. wp_list_comments( array( 'callback' => 'twentyten_comment' ) );
55. ?>
56. </ol>
57.
59. <div class="navigation">
comments.php (3/4)
58.
コメント一覧表示のカスタマイズ指定
functions.php（288-340 行）で定義
54. wp_list_comments( array( 'callback' => 'twentyten_comment' ) );
コメントのページが 2 ページ以上の場
合は前後のナビゲーション表示

74/111
60. <div class="nav-previous"><?php previous_comments_link( __( '<span
class="meta-nav">←</span> Older Comments', 'twentyten' ) ); ?></div>
61. <div class="nav-next"><?php next_comments_link( __( 'Newer
Comments <span class="meta-nav">→</span>', 'twentyten' ) ); ?></div>
62. </div>
63. <?php endif; // check for comment navigation ?>
64.
65. <?php else : // or, if we don't have comments:
66.
67. /* If there are no comments and comments are closed,
68. * let's leave a little note, shall we?
69. */
70. if ( ! comments_open() ) :
71. ?>
72. <p class="nocomments"><?php _e( 'Comments are closed.', 'twentyten' ); ?></
p>
73. <?php endif; // end ! comments_open() ?>
74.
75. <?php endif; // end have_comments() ?>
76.
77. <?php comment_form(); ?>
78.
79. </div>
comments.php (4/4)
77. <?php comment_form(); ?>
コメントフォームを読み込む

page.php
header.php
sidebar.php
footer.php
テンプレート
固定ページを表示する。
page.php
comments.php

76/111
01. <?php
02. /**
03. * The template for displaying all pages.
04. *
05. * This is the template that displays all pages by default.
06. * Please note that this is the WordPress construct of pages
07. * and that other 'pages' on your WordPress site will use a
08. * different template.
09. *
13. */
14.
16.
page.php (1/3)

77/111
19.
21.
23. <?php if ( is_front_page() ) { ?>
25. <?php } else { ?>
27. <?php } ?>
28.
34. </div>
35.
23. <?php if ( is_front_page() ) { ?>
25. <?php } else { ?>
27. <?php } ?>
フロントページに指定してあるページの場
合は h2 要素でページタイトル表示。それ
以外は h1 要素でページタイトル表示
page.php (1/3)

78/111
37.
38. <?php endwhile; ?>
39.
40. </div>
42.
page.php (1/3)

onecolumn-page.php
header.php
footer.php
テンプレート
サイドバーのない1カ
ラムの固定ページを表
示する。
onecolumn-
page.php
comments.php

80/111
01. <?php
02. /**
03. * Template Name: One column, no sidebar
04. *
05. * A custom page template without sidebar.
06. *
07. * The "Template Name:" bit above allows this to be selectable
08. * from a dropdown menu on the edit page screen.
09. *
13. */
14.
16.
17. <div id="container" class="one-column">
onecolumn-page.php (1/2)

81/111
19.
21.
29. </div>
30.
32.
34.
35. </div>
37.
onecolumn-page.php (1/2)

テンプレート
検索結果一覧と検索
フォームを表示する。
search.php
search.php
header.php
sidebar.php
footer.php

83/111
01. <?php
02. /**
03. * The template for displaying Search Results pages.
04. *
08. */
09.
11.
14.
15. <?php if ( have_posts() ) : ?>
16. <h1 class="page-title"><?php printf( __( 'Search Results for: %s',
'twentyten' ), '<span>' . get_search_query() . '</span>' ); ?></h1>
search.php (1/2)

84/111
17. <?php
18. /* Run the loop for the search to output the results.
20. * called loop-search.php and that will be used instead.
21. */
22. get_template_part( 'loop', 'search' );
23. ?>
24. <?php else : ?>
25. <div id="post-0" class="post no-results not-found">
26. <h2 class="entry-title"><?php _e( 'Nothing Found', 'twentyten' );
?></h2>
28. <p><?php _e( 'Sorry, but nothing matched your search criteria.
Please try again with some different keywords.', 'twentyten' ); ?></p>
31. </div>
32. <?php endif; ?>
33. </div>
35.
22. get_template_part( 'loop', 'search' );
loop-search.php が同じテーマ内か子テーマに
ある場合はそれを読み込む
ない場合は、loop.php を読み込む
search.php (1/2)
検索フォームを読み込む

テンプレート
アーカイブページの汎
用テンプレート。
archive.php
archive.php
header.php
sidebar.php
footer.php

86/111
01. <?php
02. /**
03. * The template for displaying Archive pages.
04. *
05. * Used to display archive-type pages if nothing more specific matches a query.
06. * For example, puts together date-based pages if no date.php file exists.
07. *
08. * Learn more: http://codex.wordpress.org/Template_Hierarchy
09. *
13. */
14.
16.
19.
archive.php (1/3)

87/111
20. <?php
21. /* Queue the first post, that way we know
22. * what date we're dealing with (if that is the case).
23. *
24. * We reset this later so we can run the loop
25. * properly with a call to rewind_posts().
26. */
27. if ( have_posts() )
28. the_post();
29. ?>
30.
31. <h1 class="page-title">
32. <?php if ( is_day() ) : ?>
33. <?php printf( __( 'Daily Archives: <span>%s</span>', 'twentyten' ),
get_the_date() ); ?>
34. <?php elseif ( is_month() ) : ?>
35. <?php printf( __( 'Monthly Archives: <span>%s</span>', 'twentyten' ),
get_the_date('F Y') ); ?>
36. <?php elseif ( is_year() ) : ?>
37. <?php printf( __( 'Yearly Archives: <span>%s</span>', 'twentyten' ),
get_the_date('Y') ); ?>
38. <?php else : ?>
39. <?php _e( 'Blog Archives', 'twentyten' ); ?>
archive.php (1/3)
28. the_post();the_post();
投稿がある場合は、年月日を取得するために、
最初の投稿データをセットする。
32. <?php if ( is_day() ) : ?>
33. <?php printf( __( 'Daily Archives: <span>%s</span>', 'twentyten' ),
get_the_date() ); ?>
34. <?php elseif ( is_month() ) : ?>
35. <?php printf( __( 'Monthly Archives: <span>%s</span>', 'twentyten' ),
get_the_date('F Y') ); ?>
36. <?php elseif ( is_year() ) : ?>
37. <?php printf( __( 'Yearly Archives: <span>%s</span>', 'twentyten' ),
get_the_date('Y') ); ?>
38. <?php else : ?>
39. <?php _e( 'Blog Archives', 'twentyten' ); ?>
<?php printf( __( 'Daily Archives: <span>%s</span>', 'twentyten' ),
<?php printf( __( 'Monthly Archives: <span>%s</span>', 'twentyten' ),
<?php printf( __( 'Yearly Archives: <span>%s</span>', 'twentyten' ),
<?php _e( 'Blog Archives', 'twentyten' ); ?>
年月日のページ別でタイトルを変える

88/111
40. <?php endif; ?>
41. </h1>
42.
43. <?php
44. /* Since we called the_post() above, we need to
45. * rewind the loop back to the beginning that way
46. * we can run the loop properly, in full.
47. */
48. rewind_posts();
49.
50. /* Run the loop for the archives page to output the posts.
52. * called loop-archives.php and that will be used instead.
53. */
54. get_template_part( 'loop', 'archive' );
55. ?>
56.
57. </div>
59.
archive.php (1/3)
48. rewind_posts();48. rewind_posts();
loop-archive.php が同じテーマ内か子テー
マにある場合はそれを読み込む。
54. get_template_part( 'loop', 'archive' );
一度に the_post を呼んでいるため、ループカウンタのリセッ
トをする

テンプレート
カテゴリー別投稿記事
一覧（アーカイブ）ペー
ジを表示する。
category.php
category.php
header.php
sidebar.php
footer.php

90/111
01. <?php
02. /**
03. * The template for displaying Category Archive pages.
04. *
08. */
09.
11.
14.
15. <h1 class="page-title"><?php
16. printf( __( 'Category Archives: %s', 'twentyten' ), '<span>' . single_
cat_title( '', false ) . '</span>' );
17. ?></h1>
category.php (1/2)

91/111
18. <?php
19. $category_description = category_description();
20. if ( ! empty( $category_description ) )
21. echo '<div class="archive-meta">' . $category_description . '</
div>';
22.
23. /* Run the loop for the category page to output the posts.
25. * called loop-category.php and that will be used instead.
26. */
27. get_template_part( 'loop', 'category' );
28. ?>
29.
30. </div>
32.
category.php (2/2)
loop-category.php が同じテーマ内か子テー
マにある場合はそれを読み込む。
27. get_template_part( 'loop', 'category' );get_template_part( 'loop', 'category' );

テンプレート
タグ別投稿記事一覧
（アーカイブ）ページを
表示する。
tag.php
tag.php
header.php
sidebar.php
footer.php

93/111
01. <?php
02. /**
03. * The template for displaying Tag Archive pages.
04. *
08. */
09.
11.
14.
15. <h1 class="page-title"><?php
16. printf( __( 'Tag Archives: %s', 'twentyten' ), '<span>' . single_tag_
title( '', false ) . '</span>' );
17. ?></h1>
tag.php (1/2)

94/111
18.
19. <?php
20. /* Run the loop for the tag archive to output the posts
22. * called loop-tag.php and that will be used instead.
23. */
24. get_template_part( 'loop', 'tag' );
25. ?>
26. </div>
28.
tag.php (2/2)
loop-tag.php が同じテーマ内か子テーマに
ある場合はそれを読み込む。
24. get_template_part( 'loop', 'tag' );

テンプレート
著者別投稿記事一覧
（アーカイブ）ページを
表示する。
auther.php
auther.php
header.php
sidebar.php
footer.php

96/111
01. <?php
02. /**
03. * The template for displaying Author Archive pages.
04. *
08. */
09.
11.
14.
15. <?php
16. /* Queue the first post, that way we know who
17. * the author is when we try to get their name,
18. * URL, description, avatar, etc.
19. *
20. * We reset this later so we can run the loop
21. * properly with a call to rewind_posts().
22. */
auther.php (1/3)

97/111
24. the_post();
25. ?>
26.
27. <h1 class="page-title author"><?php printf( __( 'Author Archives: %s',
'twentyten' ), "<span class='vcard'><a class='url fn n' href='" . get_author_posts_url(
get_the_author_meta( 'ID' ) ) . "' title='" . esc_attr( get_the_author() ) . "' rel='me'>"
. get_the_author() . "</a></span>" ); ?></h1>
28.
29. <?php
30. // If a user has filled out their description, show a bio on their entries.
31. if ( get_the_author_meta( 'description' ) ) : ?>
32. <div id="entry-author-info">
33. <div id="author-avatar">
34. <?php echo get_avatar( get_the_author_meta( 'user_email' ),
apply_filters( 'twentyten_author_bio_avatar_size', 60 ) ); ?>
35. </div>
36. <div id="author-description">
37. <h2><?php printf( __( 'About %s', 'twentyten' ), get_the_
author() ); ?></h2>
38. <?php the_author_meta( 'description' ); ?>
39. </div>
40. </div>
apply_filters( 'twentyten_author_bio_avatar_size', 60 ) ); ?>apply_filters( 'twentyten_author_bio_avatar_size', 60 ) ); ?>
アバター画像サイズを後から add_ﬁlter で変えられるようにフック指定
auther.php (2/3)
24. the_post();
24. the_post();
投稿がある場合は、著者情報を取得するため
に、最初の投稿データをセットする。

98/111
41. <?php endif; ?>
42.
43. <?php
44. /* Since we called the_post() above, we need to
45. * rewind the loop back to the beginning that way
46. * we can run the loop properly, in full.
47. */
48. rewind_posts();
49.
50. /* Run the loop for the author archive page to output the authors posts
52. * called loop-author.php and that will be used instead.
53. */
54. get_template_part( 'loop', 'author' );
55. ?>
56. </div>
58.
loop-author.php が同じテーマ内か子テーマ
にある場合はそれを読み込む。
54. get_template_part( 'loop', 'author' );
auther.php (3/3)
48. rewind_posts();
一度に the_post を呼んでいるため、ループカウンタのリセッ
トをする

テンプレート
メディア（投稿に挿入す
る画像等の添付ファイ
ル）を表示する。
attachment.
php
attachment.php
header.php
comments.php
footer.php

100/111
01. <?php
02. /**
03. * The template for displaying attachments.
04. *
08. */
09.
11.
12. <div id="container" class="single-attachment">
14.
16.
17. <?php if ( ! empty( $post->post_parent ) ) : ?>
18. <p class="page-title"><a href="<?php echo get_permalink( $post-
>post_parent ); ?>" title="<?php esc_attr( printf( __( 'Return to %s', 'twentyten' ),
get_the_title( $post->post_parent ) ) ); ?>" rel="gallery"><?php
19. /* translators: %s - title of parent post */
attachment.php (1/7)
17. <?php if ( ! empty( $post->post_parent ) ) : ?>
親の投稿（メディアのリンク先）がある場合は、親の投稿の
リンクを表示開始

101/111
20. printf( __( '<span class="meta-nav">←</span> %s',
'twentyten' ), get_the_title( $post->post_parent ) );
21. ?></a></p>
22. <?php endif; ?>
23.
26.
28. <?php
29. printf(__('<span class="%1$s">By</span> %2$s',
'twentyten'),
30. 'meta-prep meta-prep-author',
31. sprintf( '<span class="author vcard"><a class="url fn n"
href="%1$s" title="%2$s">%3$s</a></span>',
32. get_author_posts_url( get_the_author_meta( 'ID' ) ),
33. sprintf( esc_attr__( 'View all posts by %s', 'twentyten'
), get_the_author() ),
34. get_the_author()
35. )
36. );
37. ?>

102/111
39. <?php
40. printf( __('<span class="%1$s">Published</span> %2$s',
'twentyten'),
41. 'meta-prep meta-prep-entry-date',
42. s p r i n t f ( ' < s p a n c l a s s = " e n t r y - d a t e " > < a b b r
class="published" title="%1$s">%2$s</abbr></span>',
43. esc_attr( get_the_time() ),
44. get_the_date()
45. )
46. );
47. if ( wp_attachment_is_image() ) {
48. echo ' <span class="meta-sep">|</span> ';
49. $metadata = wp_get_attachment_metadata();
50. printf( __( 'Full size is %s pixels', 'twentyten'),
51. sprintf( '<a href="%1$s" title="%2$s">%3$s ×
%4$s</a>',
52. wp_get_attachment_url(),
53. esc_attr( __('Link to full-size image', 'twentyten') ),
54. $metadata['width'],
55. $metadata['height']
56. )
57. );
58. }
47. if ( wp_attachment_is_image() ) {47. if ( wp_attachment_is_image() ) {
メディア（添付ファイル）が画像の場合
49. $metadata = wp_get_attachment_metadata();
50. printf( __( 'Full size is %s pixels', 'twentyten'),
51. sprintf( '<a href="%1$s" title="%2$s">%3$s ×
%4$s</a>',
52. wp_get_attachment_url(),
53. esc_attr( __('Link to full-size image', 'twentyten') ),
54. $metadata['width'],
55. $metadata['height']
56. )
57. );
49.
50.
51.
52.
53.
54.
55.
56.
57. 画像ファイルへのリンクと画像サイズ表示

103/111
59. ?>
class="meta-sep">|</span> <span class="edit-link">', '</span>' ); ?>
62.
64. <div class="entry-attachment">
65. <?php if ( wp_attachment_is_image() ) :
66. $attachments = array_values( get_children( array( 'post_parent' => $post->post_
parent, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' =>
'image', 'order' => 'ASC', 'orderby' => 'menu_order ID' ) ) );
67. foreach ( $attachments as $k => $attachment ) {
68. if ( $attachment->ID == $post->ID )
69. break;
70. }
71. $k++;
72. // If there is more than 1 image attachment in a gallery
73. if ( count( $attachments ) > 1 ) {
74. if ( isset( $attachments[ $k ] ) )
75. // get the URL of the next image attachment
76. $next_attachment_url = get_attachment_link( $attachments[ $k ]->ID );
77. else

104/111
78. // or get the URL of the first image attachment
79. $next_attachment_url = get_attachment_link( $attachments[ 0 ]->ID );
80. } else {
81. // or, if there's only 1 image attachment, get the URL of the image
82. $next_attachment_url = wp_get_attachment_url();
83. }
84. ?>
85. <p class="attachment"><a href="<?php echo $next_
attachment_url; ?>" title="<?php echo esc_attr( get_the_title() ); ?>"
rel="attachment"><?php
86. $attachment_size = apply_filters( 'twentyten_attachment_
size', 900 );
87. echo wp_get_attachment_image( $post->ID, array(
$attachment_size, 9999 ) ); // filterable image width with, essentially, no limit for
image height.
88. ?></a></p>
89.
91. <div class="nav-previous"><?php previous_image_link( false
); ?></div>
92. <div class="nav-next"><?php next_image_link( false ); ?></
div>
size', 900 );
image height.
image height.
添付画像を表示。配列で表示サイズの上限指
定（幅：$attachment_size、高さ：9999）
表示画像サイズを後から add_ﬁlter で変えられるようにフック指定

105/111
93. </div>
94. <?php else : ?>
95. <a href="<?php echo wp_get_attachment_url(); ?>"
title="<?php echo esc_attr( get_the_title() ); ?>" rel="attachment"><?php echo
basename( get_permalink() ); ?></a>
96. <?php endif; ?>
97. </div>
98. <div class="entry-caption"><?php if ( !empty( $post->post_
excerpt ) ) the_excerpt(); ?></div>
99.
100. <?php the_content( __( 'Continue reading <span class="meta-nav">→</
span>', 'twentyten' ) ); ?>
101. <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:',
'twentyten' ), 'after' => '</div>' ) ); ?>
102.
104.
107. <?php edit_post_link( __( 'Edit', 'twentyten' ), ' <span

106/111
109. </div>
110.
111. <?php comments_template(); ?>
112.
114.
115. </div>
117.

テンプレート
404エラー（ページが見
つからない）ページを表
示する。
404.php
404.php
header.php
sidebar.php
footer.php

108/111
01. <?php
02. /**
03. * The template for displaying 404 pages (Not Found).
04. *
08. */
09.
11.
14.
15. <div id="post-0" class="post error404 not-found">
16. <h1 class="entry-title"><?php _e( 'Not Found', 'twentyten' ); ?></h1>
18. <p><?php _e( 'Apologies, but the page you requested could not be
found. Perhaps searching will help.', 'twentyten' ); ?></p>
21. </div>
検索フォームを読み込む
404.php (1/2)

109/111
22.
23. </div>
25. <script type="text/javascript">
26. // focus on search field after it has loaded
27. document.getElementById('s') && document.getElementById('s').focus();
28. </script>
29.
27. document.getElementById('s') && document.getElementById('s').focus();document.getElementById('s') && document.getElementById('s').focus();
ロード時に検索フォームに
フォーカス合わせる
404.php (2/2)

Twenty Ten は、
読みやすい＆カスタマイズし
やすいテーマです！
子テーマ作ってみたり、
新規テーマを作るときの参考
にしたりしてみてください。

ご静聴
ありがとうございました！
松下寛子@hokori

WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖！～秋バージョン～

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖！～秋バージョン～

Similar to WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖！～秋バージョン～ (20)

Recently uploaded

Recently uploaded (8)