wordpress3.0 新デフォルトテーマ twenty ten 大解剖！～秋バージョン～

WordPress3.0 新デフォルトテーマ

Twenty Ten 大解剖！～秋バージョン～

2010年10月30日WordCamp Nagoya 2010

松下寛子@hokori

2/111

自己紹介

松下寛子@hokorihttp://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.phpsingle.phppage.phponecolumn-page.phpsearch.phparchive.phpcategory.phptag.phpattachment.phpauthor.php404.php

header.phploop.phpsidebar.phpfooter.phpsidebar-footer.phpcomments.php

テンプレート

モジュールテンプレート

関数ファイル

スタイルシート画像・言語ファイル等

functions.php

style.cssrtl.csseditor-style-rtl.csseditor-style.css

screenshot.pnglicense.txtimages/languages/

12/111

テンプレートトップページ、アーカイブページ、カテゴリーページなど、要求があったページ全体を表示するために使われるPHPソースファイルです。

index.phpsingle.phppage.phponecolumn-page.phpsearch.phparchive.phpcategory.phptag.phpattachment.phpauthor.php404.php

13/111

モジュールテンプレート他のテンプレートから部品

（モジュール）として読み込まれるPHPソースファイルです。単にテンプレートと呼ばれたり、テンプレートパーツとも呼ばれたりします。

header.phploop.phpsidebar.phpfooter.phpsidebar-footer.phpcomments.php

14/111

スタイルシートスタイルシートファイルです。style.cssだけはテーマに必須で、書式に従って、テーマの説明が書かれています。

style.cssrtl.csseditor-style-rtl.csseditor-style.css

@charset "utf-8";/*Theme Name: Twenty TenTheme 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.pnglicense.txtimages/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.php11. search.php12. archive.php13. category.php14. tag.php15. author.php16. attachment.php17. 404.php

1. index.php2. header.php3. loop.php4. sidebar.php5. footer.php6. sidebar-footer.php7. single.php8. comments.php9. page.php

この順番で読んでいきます

主に WordPress3.0 の新機能と、Twenty Ten の独自機能について解説していきます。

あと気になったところ。

※テンプレート※モジュールテンプレート

index.php

header.php

sidebar.php

footer.php

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

index.php

26/111

01. <?php02. /**03. * The main template file.04. *05. * This is the most generic template file in a WordPress theme06. * 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_Hierarchy10. *11. * @package WordPress12. * @subpackage Twenty_Ten13. * @since Twenty Ten 1.014. */15. 16. get_header(); ?>17. 18. <div id="container">19. <div id="content" role="main">20.

index.php (1/2)

27/111

21. <?php22. /* Run the loop to output the posts.23. * If you want to overload this in a child theme then include a fi le24. * 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.php2. wp-content/themes/twentyten-child/loop.php3. wp-content/themes/twentyten/loop-index.php4. wp-content/themes/twentyten/loop.php

全てのファイルがない場合はなにもしません。

モジュールテンプレートHTMLの最初からヘッダー部（メインの開始タグ）までを表示する。

header.phpheader.php

31/111

01. <?php02. /**03. * The Header for our theme.04. *05. * Displays all of the <head> section and everything up till <div id="main">06. *07. * @package WordPress08. * @subpackage Twenty_Ten09. * @since Twenty Ten 1.010. */11. ?><!DOCTYPE html>12. <html <?php language_attributes(); ?>>13. <head>14. <meta charset="<?php bloginfo( 'charset' ); ?>" />15. <title><?php16. /*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="profi le" 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. <?php40. /* We add some JavaScript to pages with the comment form41. * 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, which48. * generally use this hook to add elements to <head> such49. * 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'; ?>62. <<?php echo $heading_tag; ?> id="site-title">61. 62. <<?php echo $heading_tag; ?> id="site-title">

サイトタイトルを括るタグがページによって変化トップページ：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. <?php70. // Check if this is a post or page, if it has a thumbnail, and if it's a

big one71. 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. <?php70. // Check if this is a post or page, if it has a thumbnail, and if it's a

big one71. 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; ?>

69. 70.

71. 72. 73. ( /* $src, $width, $height */ $image = wp_get_attachment_

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" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>

<?php /* Allow screen readers / text browsers to skip the navigation

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

<?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

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

スクリーンリーダのスキップ対応

◆ ナビゲーションメニュー表示

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)

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' );

if ( is_singular() && has_post_thumbnail( $post->ID ) && ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_

$image[1] >= HEADER_IMAGE_WIDTH ) : // Houston, we have a new header image! echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );

以下の条件がそろってる場合は、投稿サムネイル表示・単独ページ・投稿サムネイル（アイキャッチ）画像が指定してある・投稿サムネイル画像の幅が指定サイズ（940px）以上

else : ?> <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH;

?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /> <?php endif; ?>

else : ?> <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH;

<?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. <?php02. /**03. * The loop that displays posts.04. *05. * The loop displays the posts and the post content. See06. * http://codex.wordpress.org/The_Loop to understand it and07. * http://codex.wordpress.org/Template_Tags to understand08. * the tags used in it.09. *10. * This can be overridden in child themes with loop.php or11. * loop-template.php, where 'template' is the loop context12. * requested by a template. For example, loop-index.php would13. * be used if it exists and we ask for the loop with:14. * <code>get_template_part( 'loop', 'index' );</code>15. *16. * @package WordPress17. * @subpackage Twenty_Ten18. * @since Twenty Ten 1.019. */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 fi nd a related post.', 'twentyten' ); ?></p>36. <?php get_search_form(); ?>37. </div>38. </div>39. <?php endif; ?>40.

loop.php(2/10)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; ?>

<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span

1 ページ以上ある場合ナビゲーションリンク表示（空タグ対策用？）

43/111

41. <?php42. /* 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 displaying46. * posts that are in the gallery category, when we're displaying47. * posts in the asides category, and fi nally all other posts.48. *49. * Additionally, we sometimes check for whether we are on an50. * archive page, a search page, etc., allowing for small differences51. * in the loop on each template without actually duplicating52. * 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. <?php42. /* 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 displaying46. * posts that are in the gallery category, when we're displaying47. * posts in the asides category, and fi nally all other posts.48. *49. * Additionally, we sometimes check for whether we are on an50. * archive page, a search page, etc., allowing for small differences51. * in the loop on each template without actually duplicating52. * 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. 68. <div class="entry-content">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)

65. <?php twentyten_posted_on(); ?>

日付と投稿者を表示する Twenty Ten の独自関数functions.php（435-456 行）で定義

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. ?>

72. 73. $images = get_children( array( 'post_parent' => $post->ID, 'post_

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 gal lery 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_images85. ); ?></em></p>86. <?php endif; ?>87. <?php the_excerpt(); ?>88. <?php endif; ?>89. </div>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)80. <a class="size-thumbnail" href="<?php the_permalink();

?>"><?php echo $image_img_tag; ?></a>80. <a class="size-thumbnail" href="<?php the_permalink();

?>"><?php echo $image_img_tag; ?></a>

サムネイル画像表示

82. <p><em><?php printf( __( 'This gal lery 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

82. <p><em><?php printf( __( 'This gal lery contains <a

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') ) ) :

?>102. <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>103. 104. <?php if ( is_archive() || is_search() ) : // Display excerpts for archives and

search. ?>105. <div class="entry-summary">106. <?php the_excerpt(); ?>107. </div>108. <?php else : ?>109. <div class="entry-content">110. <?php the_content( __( 'Continue reading <span class="meta-

nav">→</span>', 'twentyten' ) ); ?>111. </div>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. 114. <div class="entry-utility">115. <?php twentyten_posted_on(); ?>116. <span class="meta-sep">|</span>117. <span class="comments-link"><?php comments_popup_link( __(



119. </div>120. </div>121. 122. <?php /* How to display all other posts. */ ?>123. 124. <?php else : ?>125. <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>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. 128. <div class="entry-meta">129. <?php twentyten_posted_on(); ?>

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">134. <?php the_excerpt(); ?>135. </div>136. <?php else : ?>137. <div class="entry-content">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>' ) ); ?>140. </div>141. <?php endif; ?>142. 143. <div class="entry-utility">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>148. <span class="meta-sep">|</span>149. <?php endif; ?>150. <?php151. $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>157. <span class="meta-sep">|</span>158. <?php endif; ?>159. <span class="comments-link"><?php comments_popup_link( __(



161. </div>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. 170. <?php /* Display navigation to next/previous pages when applicable */ ?>171. <?php if ( $wp_query->max_num_pages > 1 ) : ?>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>176. <?php endif; ?>

loop.php(10/10)166. <?php endif; // This was the if statement that broke the loop into three parts

based on categories. ?> <?php endif; // This was the if statement that broke the loop into three parts

based on categories. ?> 投稿表示の分岐終わり

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. <?php02. /**03. * The Sidebar containing the primary and secondary widget areas.04. *05. * @package WordPress06. * @subpackage Twenty_Ten07. * @since Twenty Ten 1.008. */09. ?>10. 11. <div id="primary" class="widget-area" role="complementary">12. <ul class="xoxo">13. 14. <?php15. /* When we call the dynamic_sidebar() function, it'll spit out16. * the widgets for that widget area. If it instead returns false,17. * then the sidebar simply doesn't exist, so we'll hard-code in18. * some default sidebar stuff just in case.19. */20. if ( ! dynamic_sidebar( 'primary-widget-area' ) ) : ?>21.

sidebar.php(1/3)

14. <?php15. /* When we call the dynamic_sidebar() function, it'll spit out16. * the widgets for that widget area. If it instead returns false,17. * then the sidebar simply doesn't exist, so we'll hard-code in18. * some default sidebar stuff just in case.19. */20. if ( ! dynamic_sidebar( 'primary-widget-area' ) ) : ?>

14. <?php15. 16. 17. 18. 19. 20. if ( ! dynamic_sidebar( 'primary-widget-area' ) ) : ?>

◆ ウィジェット 1 の表示

54/111

22. <li id="search" class="widget-container widget_search">23. <?php get_search_form(); ?>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">23. <?php get_search_form(); ?>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. <?php47. // 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">51. <ul class="xoxo">52. <?php dynamic_sidebar( 'secondary-widget-area' ); ?>53. </ul>54. </div>55. 56. <?php endif; ?>

sidebar.php(3/3)

46. <?php47. // 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">51. <ul class="xoxo">52. <?php dynamic_sidebar( 'secondary-widget-area' ); ?>53. </ul>54. </div>55. 56. <?php endif; ?>

46. <?php47. 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. <?php02. /**03. * The template for displaying the footer.04. *05. * Contains the closing of the id=main div and all content06. * after. Calls sidebar-footer.php for bottom widgets.07. *08. * @package WordPress09. * @subpackage Twenty_Ten10. * @since Twenty Ten 1.011. */12. ?>13. </div>14. 15. <div id="footer" role="contentinfo">16. <div id="colophon">17. 18. <?php19. /* A sidebar in the footer? Yep. You can can customize20. * your footer with four columns of widgets.21. */22. get_sidebar( 'footer' );

footer.php(1/3)

18. <?php19. /* A sidebar in the footer? Yep. You can can customize20. * 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. <?php45. /* Always have wp_footer() just before the closing </body>46. * tag of your theme, or you will break many plugins, which47. * generally use this hook to reference JavaScript fi les.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. <?php02. /**03. * The Footer widget areas.04. *05. * @package WordPress06. * @subpackage Twenty_Ten07. * @since Twenty Ten 1.008. */09. ?>10. 11. <?php12. /* The footer widget area is triggered if any of the areas13. * have widgets. So let's check that fi rst.14. *15. * If none of the sidebars have widgets, then let's bail early.16. */17. if ( ! is_active_sidebar( 'fi rst-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. <?php12. /* The footer widget area is triggered if any of the areas13. * have widgets. So let's check that fi rst.14. *15. * If none of the sidebars have widgets, then let's bail early.16. */17. if ( ! is_active_sidebar( 'fi rst-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( 'fi rst-footer-widget-area' ) ) : ?>29. <div id="fi rst" class="widget-area">30. <ul class="xoxo">31. <?php dynamic_sidebar( 'fi rst-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">38. <ul class="xoxo">39. <?php dynamic_sidebar( 'second-footer-widget-area' ); ?>40. </ul>41. </div>42. <?php endif; ?>

sidebar-footer.php(2/3)

28. <?php if ( is_active_sidebar( 'fi rst-footer-widget-area' ) ) : ?>29. <div id="fi rst" class="widget-area">30. <ul class="xoxo">31. <?php dynamic_sidebar( 'fi rst-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">38. <ul class="xoxo">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">46. <ul class="xoxo">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">54. <ul class="xoxo">55. <?php dynamic_sidebar( 'fourth-footer-widget-area' ); ?>56. </ul>57. </div>58. <?php endif; ?>59. 60. </div>

sidebar-footer.php(3/3)44. <?php if ( is_active_sidebar( 'third-footer-widget-area' ) ) : ?>45. <div id="third" class="widget-area">46. <ul class="xoxo">47. <?php dynamic_sidebar( 'third-footer-widget-area' ); ?>48. </ul>49. </div>50. <?php endif; ?>

44. <?php if ( is_active_sidebar( 'third-footer-widget-area' ) ) : ?>45. 46. 47. 48. 49. 50.

52. <?php if ( is_active_sidebar( 'fourth-footer-widget-area' ) ) : ?>53. <div id="fourth" class="widget-area">54. <ul class="xoxo">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. <?php02. /**03. * The Template for displaying all single posts.04. *05. * @package WordPress06. * @subpackage Twenty_Ten07. * @since Twenty Ten 1.008. */09. 10. get_header(); ?>11. 12. <div id="container">13. <div id="content" role="main">14. 15. <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>16. 17. <div id="nav-above" class="navigation">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. 22. <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>23. <h1 class="entry-title"><?php the_title(); ?></h1>24. 25. <div class="entry-meta">26. <?php twentyten_posted_on(); ?>27. </div>28. 29. <div class="entry-content">30. <?php the_content(); ?>31. <?php wp_link_pages( array( 'before' => '<div class="page-

link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>32. </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_fi lters( 'twentyten_author_bio_avatar_size', 60 ) ); ?>apply_fi lters( 'twentyten_author_bio_avatar_size', 60 ) ); ?>

アバター画像サイズを後から add_fi 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. 51. <div class="entry-utility">52. <?php twentyten_posted_in(); ?>53. <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span

class="edit-link">', '</span>' ); ?>54. </div>55. </div>

single.php (3/4)

52. <?php twentyten_posted_in(); ?> <div class="entry-utility">

記事のカテゴリー、タグ、パーマリンクを表示する Twenty Ten 独自関数functions.php（458-483行）で定義

69/111

56. 57. <div id="nav-below" class="navigation">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. 62. <?php comments_template( '', true ); ?>63. 64. <?php endwhile; // end of the loop. ?>65. 66. </div>67. </div>68. 69. <?php get_sidebar(); ?>70. <?php get_footer(); ?>

62. <?php comments_template( '', true ); ?>62.

コメントテンプレート読み込み

single.php (4/4)

モジュールテンプレートコメント一覧とコメントフォームを表示する。

comments.phpcomments.php

71/111

01. <?php02. /**03. * The template for displaying Comments.04. *05. * The area of the page that contains both current comments06. * and the comment form. The actual display of comments is07. * handled by a callback to twentyten_comment which is08. * located in the functions.php file.09. *10. * @package WordPress11. * @subpackage Twenty_Ten12. * @since Twenty Ten 1.013. */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. <?php21. /* Stop the rest of comments.php from being processed,22. * but don't kill the script entirely -- we still have23. * to fully load the template.24. */25. return;26. endif;27. ?>28. 29. <?php30. // You can start editing here -- including this comment!31. ?>32. 33. <?php if ( have_comments() ) : ?>34. <h3 id="comments-title"><?php35. 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. <?php48. /* 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 can51. * defi ne 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. 58. <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : //

Are there comments to navigate through? ?>59. <div class="navigation">

comments.php (3/4)

58. <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // Are there comments to navigate through? ?>

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. <?php02. /**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 pages07. * and that other 'pages' on your WordPress site will use a08. * different template.09. *10. * @package WordPress11. * @subpackage Twenty_Ten12. * @since Twenty Ten 1.013. */14. 15. get_header(); ?>16. 17. <div id="container">18. <div id="content" role="main">

page.php (1/3)

77/111

19. 20. <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>21. 22. <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>23. <?php if ( is_front_page() ) { ?>24. <h2 class="entry-title"><?php the_title(); ?></h2>25. <?php } else { ?>26. <h1 class="entry-title"><?php the_title(); ?></h1>27. <?php } ?>28. 29. <div class="entry-content">30. <?php the_content(); ?>31. <?php wp_link_pages( array( 'before' => '<div class="page-

link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>32. <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span

class="edit-link">', '</span>' ); ?>33. </div>34. </div>35. 36. <?php comments_template( '', true ); ?>

23. <?php if ( is_front_page() ) { ?>24. <h2 class="entry-title"><?php the_title(); ?></h2>25. <?php } else { ?>26. <h1 class="entry-title"><?php the_title(); ?></h1>27. <?php } ?>

フロントページに指定してあるページの場合は h2 要素でページタイトル表示。それ以外は h1 要素でページタイトル表示

page.php (1/3)

78/111

37. 38. <?php endwhile; ?>39. 40. </div>41. </div>42. 43. <?php get_sidebar(); ?>44. <?php get_footer(); ?>

page.php (1/3)

onecolumn-page.php

header.php

footer.php

テンプレートサイドバーのない1カラムの固定ページを表示する。

onecolumn-page.php

comments.php

80/111

01. <?php02. /**03. * Template Name: One column, no sidebar04. *05. * A custom page template without sidebar.06. *07. * The "Template Name:" bit above allows this to be selectable08. * from a dropdown menu on the edit page screen.09. *10. * @package WordPress11. * @subpackage Twenty_Ten12. * @since Twenty Ten 1.013. */14. 15. get_header(); ?>16. 17. <div id="container" class="one-column">18. <div id="content" role="main">

onecolumn-page.php (1/2)

81/111

19. 20. <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>21. 22. <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>23. <h1 class="entry-title"><?php the_title(); ?></h1>24. <div class="entry-content">25. <?php the_content(); ?>26. <?php wp_link_pages( array( 'before' => '<div class="page-

link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>27. <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span

class="edit-link">', '</span>' ); ?>28. </div>29. </div>30. 31. <?php comments_template( '', true ); ?>32. 33. <?php endwhile; ?>34. 35. </div>36. </div>37. 38. <?php get_footer(); ?>

onecolumn-page.php (1/2)

テンプレート検索結果一覧と検索フォームを表示する。

search.phpsearch.php

header.php

sidebar.php

footer.php

83/111

01. <?php02. /**03. * The template for displaying Search Results pages.04. *05. * @package WordPress06. * @subpackage Twenty_Ten07. * @since Twenty Ten 1.008. */09. 10. get_header(); ?>11. 12. <div id="container">13. <div id="content" role="main">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. <?php18. /* Run the loop for the search to output the results.19. * If you want to overload this in a child theme then include a fi le20. * 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>27. <div class="entry-content">28. <p><?php _e( 'Sorry, but nothing matched your search criteria.

Please try again with some different keywords.', 'twentyten' ); ?></p>29. <?php get_search_form(); ?>30. </div>31. </div>32. <?php endif; ?>33. </div>34. </div>35. 36. <?php get_sidebar(); ?>37. <?php get_footer(); ?>

22. get_template_part( 'loop', 'search' );

loop-search.php が同じテーマ内か子テーマにある場合はそれを読み込むない場合は、loop.php を読み込む

29. <?php get_search_form(); ?>

search.php (1/2)

検索フォームを読み込む

テンプレートアーカイブページの汎用テンプレート。

archive.phparchive.php

header.php

sidebar.php

footer.php

86/111

01. <?php02. /**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_Hierarchy09. *10. * @package WordPress11. * @subpackage Twenty_Ten12. * @since Twenty Ten 1.013. */14. 15. get_header(); ?>16. 17. <div id="container">18. <div id="content" role="main">19.

archive.php (1/3)

87/111

20. <?php21. /* Queue the fi rst post, that way we know22. * what date we're dealing with (if that is the case).23. *24. * We reset this later so we can run the loop25. * 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)

27. if ( have_posts() )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. <?php44. /* Since we called the_post() above, we need to45. * rewind the loop back to the beginning that way46. * 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.51. * If you want to overload this in a child theme then include a fi le52. * called loop-archives.php and that will be used instead.53. */54. get_template_part( 'loop', 'archive' );55. ?>56. 57. </div>58. </div>59. 60. <?php get_sidebar(); ?>61. <?php get_footer(); ?>

archive.php (1/3)

48. rewind_posts();48. rewind_posts();

loop-archive.php が同じテーマ内か子テーマにある場合はそれを読み込む。ない場合は、loop.php を読み込む

54. get_template_part( 'loop', 'archive' );

一度に the_post を呼んでいるため、ループカウンタのリセットをする

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

category.phpcategory.php

header.php

sidebar.php

footer.php

90/111

01. <?php02. /**03. * The template for displaying Category Archive pages.04. *05. * @package WordPress06. * @subpackage Twenty_Ten07. * @since Twenty Ten 1.008. */09. 10. get_header(); ?>11. 12. <div id="container">13. <div id="content" role="main">14. 15. <h1 class="page-title"><?php16. printf( __( 'Category Archives: %s', 'twentyten' ), '<span>' . single_

cat_title( '', false ) . '</span>' );17. ?></h1>

category.php (1/2)

91/111

18. <?php19. $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.24. * If you want to overload this in a child theme then include a fi le25. * called loop-category.php and that will be used instead.26. */27. get_template_part( 'loop', 'category' );28. ?>29. 30. </div>31. </div>32. 33. <?php get_sidebar(); ?>34. <?php get_footer(); ?>

category.php (2/2)

loop-category.php が同じテーマ内か子テーマにある場合はそれを読み込む。ない場合は、loop.php を読み込む

27. get_template_part( 'loop', 'category' ); get_template_part( 'loop', 'category' );

テンプレートタグ別投稿記事一覧

（アーカイブ）ページを表示する。

tag.phptag.php

header.php

sidebar.php

footer.php

93/111

01. <?php02. /**03. * The template for displaying Tag Archive pages.04. *05. * @package WordPress06. * @subpackage Twenty_Ten07. * @since Twenty Ten 1.008. */09. 10. get_header(); ?>11. 12. <div id="container">13. <div id="content" role="main">14. 15. <h1 class="page-title"><?php16. printf( __( 'Tag Archives: %s', 'twentyten' ), '<span>' . single_tag_

title( '', false ) . '</span>' );17. ?></h1>

tag.php (1/2)

94/111

18. 19. <?php20. /* Run the loop for the tag archive to output the posts21. * If you want to overload this in a child theme then include a fi le22. * called loop-tag.php and that will be used instead.23. */24. get_template_part( 'loop', 'tag' );25. ?>26. </div>27. </div>28. 29. <?php get_sidebar(); ?>30. <?php get_footer(); ?>

tag.php (2/2)

loop-tag.php が同じテーマ内か子テーマにある場合はそれを読み込む。ない場合は、loop.php を読み込む

24. get_template_part( 'loop', 'tag' );

テンプレート著者別投稿記事一覧

（アーカイブ）ページを表示する。

auther.phpauther.php

header.php

sidebar.php

footer.php

96/111

01. <?php02. /**03. * The template for displaying Author Archive pages.04. *05. * @package WordPress06. * @subpackage Twenty_Ten07. * @since Twenty Ten 1.008. */09. 10. get_header(); ?>11. 12. <div id="container">13. <div id="content" role="main">14. 15. <?php16. /* Queue the first post, that way we know who17. * 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 loop21. * properly with a call to rewind_posts().22. */

auther.php (1/3)

97/111

23. if ( have_posts() )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. <?php30. // If a user has fi lled 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_fi lters( '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_fi lters( 'twentyten_author_bio_avatar_size', 60 ) ); ?>apply_fi lters( 'twentyten_author_bio_avatar_size', 60 ) ); ?>

アバター画像サイズを後から add_fi lter で変えられるようにフック指定

auther.php (2/3)23. if ( have_posts() )24. the_post();23. if ( have_posts() )24. the_post();

投稿がある場合は、著者情報を取得するために、最初の投稿データをセットする。

98/111

41. <?php endif; ?>42. 43. <?php44. /* Since we called the_post() above, we need to45. * rewind the loop back to the beginning that way46. * 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 posts51. * If you want to overload this in a child theme then include a fi le52. * called loop-author.php and that will be used instead.53. */54. get_template_part( 'loop', 'author' );55. ?>56. </div>57. </div>58. 59. <?php get_sidebar(); ?>60. <?php get_footer(); ?>

loop-author.php が同じテーマ内か子テーマにある場合はそれを読み込む。ない場合は、loop.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. <?php02. /**03. * The template for displaying attachments.04. *05. * @package WordPress06. * @subpackage Twenty_Ten07. * @since Twenty Ten 1.008. */09. 10. get_header(); ?>11. 12. <div id="container" class="single-attachment">13. <div id="content" role="main">14. 15. <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>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. 24. <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>25. <h2 class="entry-title"><?php the_title(); ?></h2>26. 27. <div class="entry-meta">28. <?php29. 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. ?>38. <span class="meta-sep">|</span>


102/111

39. <?php40. 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() ) {

メディア（添付ファイル）が画像の場合

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. );

48. echo ' <span class="meta-sep">|</span> ';49. 50. 51.

52. 53. 54. 55. 56. 57. 画像ファイルへのリンクと画像サイズ表示

103/111

59. ?>60. <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span

class="meta-sep">|</span> <span class="edit-link">', '</span>' ); ?>61. </div>62. 63. <div class="entry-content">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 gallery73. if ( count( $attachments ) > 1 ) {74. if ( isset( $attachments[ $k ] ) )75. // get the URL of the next image attachment76. $next_attachment_url = get_attachment_link( $attachments[ $k ]->ID );77. else

104/111

78. // or get the URL of the fi rst image attachment79. $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 image82. $next_attachment_url = wp_get_attachment_url();83. }84. ?>85. <p class="attachment"><a href="<?php echo $next_

attachment_url; ?>" t it le="<?php echo esc_attr( get_the_tit le() ); ?>" 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. 90. <div id="nav-below" class="navigation">91. <div class="nav-previous"><?php previous_image_link( false

); ?></div>92. <div class="nav-next"><?php next_image_link( false ); ?></

div>


86. $attachment_size = apply_filters( 'twentyten_attachment_size', 900 );

86. $attachment_size = apply_filters( 'twentyten_attachment_

87. echo wp_get_attachment_image( $post->ID, array( $attachment_size, 9999 ) ); // filterable image width with, essentially, no limit for image height.

87. echo wp_get_attachment_image( $post->ID, array( $attachment_size, 9999 ) ); // filterable image width with, essentially, no limit for image height. 添付画像を表示。配列で表示サイズの上限指

定（幅：$attachment_size、高さ：9999）

表示画像サイズを後から add_fi lter で変えられるようにフック指定

105/111

93. </div>94. <?php else : ?>95. <a href="<?php echo wp_get_attachment_ur l(); ?>"

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. 103. </div>104. 105. <div class="entry-utility">106. <?php twentyten_posted_in(); ?>107. <?php edit_post_link( __( 'Edit', 'twentyten' ), ' <span

class="edit-link">', '</span>' ); ?>

106/111

108. </div>109. </div>110. 111. <?php comments_template(); ?>112. 113. <?php endwhile; ?>114. 115. </div>116. </div>117. 118. <?php get_footer(); ?>

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

404.php404.php

header.php

sidebar.php

footer.php

108/111

01. <?php02. /**03. * The template for displaying 404 pages (Not Found).04. *05. * @package WordPress06. * @subpackage Twenty_Ten07. * @since Twenty Ten 1.008. */09. 10. get_header(); ?>11. 12. <div id="container">13. <div id="content" role="main">14. 15. <div id="post-0" class="post error404 not-found">16. <h1 class="entry-title"><?php _e( 'Not Found', 'twentyten' ); ?></h1>17. <div class="entry-content">18. <p><?php _e( 'Apologies, but the page you requested could not be

found. Perhaps searching will help.', 'twentyten' ); ?></p>19. <?php get_search_form(); ?>20. </div>21. </div>

19. <?php get_search_form(); ?>

検索フォームを読み込む

404.php (1/2)

109/111

22. 23. </div>24. </div>25. <script type="text/javascript">26. // focus on search fi eld after it has loaded27. document.getElementById('s') && document.getElementById('s').focus();28. </script>29. 30. <?php get_footer(); ?>

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 大解剖！ ～秋バージョン～

Technology

wordpress3.0 新デフォルトテーマ twenty ten 大解剖！～秋バージョン～