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

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

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

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

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

Twenty Ten はどんなテーマ？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

index.php (1/2) 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. 26/111

index.php (2/2) 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(); ?> 27/111

テンプレートパーツの読み込み (1) get_template_part（WP3.0 から追加）ヘッダフッタサイドバー以外のテンプレートパーツ・・（モジュールテンプレート）を読み込むテンプレートタグ書式： <?php get_template_part( slug, name ) ?> slug ：一般テンプレートのスラッグ名 name ：特定テンプレートの名前（省略可） slug-name.php がなければ、slug.php を読み込む 28/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 全てのファイルがない場合はなにもしません。 29/111

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

header.php(1/5) 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. * 07. * @package WordPress 08. * @subpackage Twenty_Ten 09. * @since Twenty Ten 1.0 10. */ 11. ?><!DOCTYPE html> HTML5 ！ 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' ); 31/111

header.php(2/5) 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> 2 ページ目以降はページ数を表示 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. */ 32/111

javascript を適切な順番でロードしてくれる header.php(3/5) 便利関数。 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. トップページ：h1 タグ 58. <div id="header"> その他のページ：div タグ 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 33/111

header.php(4/5) 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> 34/111

header.php(5/5) スクリーンリーダのスキップ対応 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"> 35/111

ページによってヘッダ画像の変更 (1) 以下の条件がそろってる場合は、投稿サムネイル表示・単独ページ・投稿サムネイル（アイキャッチ）画像が指定してある <?php ・投稿サムネイル画像の幅が指定サイズ（940px）以上 // 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; ?> 条件がそろっていない場合は、管理画面で指定したカスタムヘッダー画像を表示 36/111

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

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

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

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

loop.php(1/10) 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. * 16. * @package WordPress 17. * @subpackage Twenty_Ten 18. * @since Twenty Ten 1.0 19. */ 20. ?> 21. 41/111

1 ページ以上ある場合ナビゲーショ 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; ?> 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. 42/111

投稿ループ開始 loop.php(3/10) カテゴリの種類によって表示方法変更・gallery 41. <?php ・asides 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(); ?> 名が gallery の場合の投稿表示開始 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 43/111

loop.php(4/10) 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"> Twenty Ten の独自関数 65. <?php twentyten_posted_on(); ?> functions.php （435-456 行） 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"> 44/111

loop.php(5/10) サムネイル画像表示 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; ?> 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> 45/111

loop.php(6/10) 95. <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="meta- sep">|</span> <span class="edit-link">', '</span>' ); ?> 96. </div> カテゴリー名かカテゴリースラッグ 97. </div> 名が asides の場合の投稿表示開始 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; ?> 46/111

loop.php(7/10) 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( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?></span> 118. <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="meta- sep">|</span> <span class="edit-link">', '</span>' ); ?> 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(); ?> 47/111

loop.php(8/10) 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( ', ' ) ); ?> 48/111

loop.php(9/10) 147. </span> 148. <span class="meta-sep">|</span> 149. <?php endif; ?> 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> 157. <span class="meta-sep">|</span> 158. <?php endif; ?> 159. <span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?></span> 160. <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="meta- sep">|</span> <span class="edit-link">', '</span>' ); ?> 161. </div> 162. </div> 163. 164. <?php comments_template( '', true ); ?> 49/111

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

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

sidebar.php sidebar.php モジュールテンプレートサイドバー（ウィジェットエリア）を表示する。

sidebar.php(1/3) 01. <?php 02. /** 03. * The Sidebar containing the primary and secondary widget areas. 04. * 05. * @package WordPress 06. * @subpackage Twenty_Ten 07. * @since Twenty Ten 1.0 08. */ 09. ?> 10. 11. <div id="primary" class="widget-area" role="complementary"> 12. <ul class="xoxo"> 13. ◆ ウィジェット 1 の表示 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. 53/111

sidebar.php(2/3) 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> ウェジェット 1 が設定されてない場合の表示 40. </li> 41. 42. <?php endif; // end primary widget area ?> 43. </ul> 54/111

sidebar.php(3/3) 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"> 51. <ul class="xoxo"> 52. <?php dynamic_sidebar( 'secondary-widget-area' ); ?> 53. </ul> 54. </div> 55. 56. <?php endif; ?> ◆ ウィジェット 2 が設定されているはウィジェット２を表示 55/111

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

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

footer.php(1/3) 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. * 08. * @package WordPress 09. * @subpackage Twenty_Ten 10. * @since Twenty Ten 1.0 11. */ 12. ?> 13. </div> 14. 15. <div id="footer" role="contentinfo"> 16. <div id="colophon"> sidebar-footer.php 読み込み 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' ); 58/111

footer.php(2/3) 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> 59/111

footer.php(3/3) 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> 60/111

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

sidebar-footer.php(1/3) 01. <?php 02. /** 03. * The Footer widget areas. 04. * 05. * @package WordPress 06. * @subpackage Twenty_Ten 07. * @since Twenty Ten 1.0 フッターウィジェットエリアが全て設定 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; 62/111

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

sidebar-footer.php(3/3) フッターウィジェットエリア 3 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. フッターウィジェットエリア 4 60. </div> 64/111

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

single.php (1/4) 01. <?php 02. /** 03. * The Template for displaying all single posts. 04. * 05. * @package WordPress 06. * @subpackage Twenty_Ten 07. * @since Twenty Ten 1.0 08. */ 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> 66/111

single.php (2/4) 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> Twenty Ten 独自関数 28. 29. <div class="entry-content"> functions.php （435-456 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 ?> アバター画像サイズを後から add_ 35. <div id="entry-author-info"> 36. <div id="author-avatar"> ﬁlter で変えられるようにフック指定 37. <?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'twentyten_author_bio_avatar_size', 60 ) ); ?> 67/111

single.php (3/4) 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> Twenty Ten 独自関数 49. <?php endif; ?> functions.php（458-483 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> 68/111

single.php (4/4) 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(); ?> 69/111

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

comments.php (1/4) 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. * 10. * @package WordPress 11. * @subpackage Twenty_Ten 12. * @since Twenty Ten 1.0 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> 71/111

comments.php (2/4) 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? ?> 72/111

comments.php (3/4) 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 functions.php（288-340 行）で定義 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> コメントのページが 2 ページ以上の場 57. 合は前後のナビゲーション表示 58. <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // Are there comments to navigate through? ?> 59. <div class="navigation"> 73/111

comments.php (4/4) 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> 74/111

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

page.php (1/3) 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. * 10. * @package WordPress 11. * @subpackage Twenty_Ten 12. * @since Twenty Ten 1.0 13. */ 14. 15. get_header(); ?> 16. 17. <div id="container"> 18. <div id="content" role="main"> 76/111

フロントページに指定してあるページの場 page.php (1/3) 合は h2 要素でページタイトル表示。それ 19. 以外は h1 要素でページタイトル表示 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 ); ?> 77/111

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

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

onecolumn-page.php (1/2) 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. * 10. * @package WordPress 11. * @subpackage Twenty_Ten 12. * @since Twenty Ten 1.0 13. */ 14. 15. get_header(); ?> 16. 17. <div id="container" class="one-column"> 18. <div id="content" role="main"> 80/111

onecolumn-page.php (1/2) 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(); ?> 81/111

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

search.php (1/2) 01. <?php 02. /** 03. * The template for displaying Search Results pages. 04. * 05. * @package WordPress 06. * @subpackage Twenty_Ten 07. * @since Twenty Ten 1.0 08. */ 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> 83/111

loop-search.php が同じテーマ内か子テーマに search.php (1/2) ある場合はそれを読み込むない場合は、loop.php を読み込む 17. <?php 18. /* Run the loop for the search to output the results. 19. * If you want to overload this in a child theme then include a file 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> 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(); ?> 84/111

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

archive.php (1/3) 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. * 10. * @package WordPress 11. * @subpackage Twenty_Ten 12. * @since Twenty Ten 1.0 13. */ 14. 15. get_header(); ?> 16. 17. <div id="container"> 18. <div id="content" role="main"> 19. 86/111

archive.php (1/3) 投稿がある場合は、年月日を取得するために、最初の投稿データをセットする。 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' ); ?> 87/111

archive.php (1/3) 40. <?php endif; ?> 41. </h1> 42. 一度に the_post を呼んでいるため、ループカウンタのリセッ 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. 51. * If you want to overload this in a child theme then include a file 52. * called loop-archives.php and that will be used instead. 53. */ 54. get_template_part( 'loop', 'archive' ); 55. ?> 56. 57. </div> loop-archive.php が同じテーマ内か子テー 58. </div> マにある場合はそれを読み込む。 59. ない場合は、loop.php を読み込む 60. <?php get_sidebar(); ?> 61. <?php get_footer(); ?> 88/111

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

category.php (1/2) 01. <?php 02. /** 03. * The template for displaying Category Archive pages. 04. * 05. * @package WordPress 06. * @subpackage Twenty_Ten 07. * @since Twenty Ten 1.0 08. */ 09. 10. get_header(); ?> 11. 12. <div id="container"> 13. <div id="content" role="main"> 14. 15. <h1 class="page-title"><?php 16. printf( __( 'Category Archives: %s', 'twentyten' ), '<span>' . single_ cat_title( '', false ) . '</span>' ); 17. ?></h1> 90/111

category.php (2/2) 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. 24. * If you want to overload this in a child theme then include a file 25. * called loop-category.php and that will be used instead. 26. */ 27. get_template_part( 'loop', 'category' ); 28. ?> 29. 30. </div> loop-category.php が同じテーマ内か子テー 31. </div> マにある場合はそれを読み込む。 32. ない場合は、loop.php を読み込む 33. <?php get_sidebar(); ?> 34. <?php get_footer(); ?> 91/111

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

tag.php (1/2) 01. <?php 02. /** 03. * The template for displaying Tag Archive pages. 04. * 05. * @package WordPress 06. * @subpackage Twenty_Ten 07. * @since Twenty Ten 1.0 08. */ 09. 10. get_header(); ?> 11. 12. <div id="container"> 13. <div id="content" role="main"> 14. 15. <h1 class="page-title"><?php 16. printf( __( 'Tag Archives: %s', 'twentyten' ), '<span>' . single_tag_ title( '', false ) . '</span>' ); 17. ?></h1> 93/111

tag.php (2/2) 18. 19. <?php 20. /* Run the loop for the tag archive to output the posts 21. * If you want to overload this in a child theme then include a file 22. * called loop-tag.php and that will be used instead. 23. */ 24. get_template_part( 'loop', 'tag' ); 25. ?> 26. </div> 27. </div> loop-tag.php が同じテーマ内か子テーマに 28. ある場合はそれを読み込む。 29. <?php get_sidebar(); ?> 30. <?php get_footer(); ?> ない場合は、loop.php を読み込む 94/111

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

auther.php (1/3) 01. <?php 02. /** 03. * The template for displaying Author Archive pages. 04. * 05. * @package WordPress 06. * @subpackage Twenty_Ten 07. * @since Twenty Ten 1.0 08. */ 09. 10. get_header(); ?> 11. 12. <div id="container"> 13. <div id="content" role="main"> 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. */ 96/111

auther.php (2/3) 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. <?php アバター画像サイズを後から add_ﬁlter で変えられるようにフック指定 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> 97/111

auther.php (3/3) 41. <?php endif; ?> 42. 一度に the_post を呼んでいるため、ループカウンタのリセッ 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 51. * If you want to overload this in a child theme then include a file 52. * called loop-author.php and that will be used instead. 53. */ 54. get_template_part( 'loop', 'author' ); 55. ?> 56. </div> 57. </div> loop-author.php が同じテーマ内か子テーマ 58. にある場合はそれを読み込む。 59. <?php get_sidebar(); ?> ない場合は、loop.php を読み込む 60. <?php get_footer(); ?> 98/111

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

attachment.php (1/7) 01. <?php 02. /** 03. * The template for displaying attachments. 04. * 05. * @package WordPress 06. * @subpackage Twenty_Ten 07. * @since Twenty Ten 1.0 08. */ 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 */ 100/111

attachment.php (2/7) 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. <?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. ?> 38. <span class="meta-sep">|</span> 101/111

attachment.php (3/7) 39. <?php 40. printf( __('<span class="%1$s">Published</span> %2$s', 'twentyten'), 41. 'meta-prep meta-prep-entry-date', 42. sprintf( '<span class="entry-date"><abbr 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. } 102/111

attachment.php (4/7) 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 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 103/111

attachment.php (5/7) 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. ?> 表示画像サイズを後から add_ﬁlter で変えられるようにフック指定 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. e c h o w p _ g e t _ a t t a c h m e n t _ i m a g e ( $ p o s t- > I D, a r ray ( $attachment_size, 9999 ) ); // filterable image width with, essentially, no limit for image height. 88. ?></a></p> 添付画像を表示。配列で表示サイズの上限指 89. 定（幅：$attachment_size、高さ：9999） 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> 104/111

attachment.php (6/7) 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. 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>' ); ?> 105/111

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

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

404.php (1/2) 01. <?php 02. /** 03. * The template for displaying 404 pages (Not Found). 04. * 05. * @package WordPress 06. * @subpackage Twenty_Ten 07. * @since Twenty Ten 1.0 08. */ 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> 検索フォームを読み込む 108/111

404.php (2/2) 22. 23. </div> ロード時に検索フォームに 24. </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. 30. <?php get_footer(); ?> 109/111

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

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

http://design-plus1.com	867
http://noteroll.com.local	35
http://d.hatena.ne.jp	30
http://s.deeeki.com	24
http://iteman.tumblr.com	6
https://si0.twimg.com	6
http://webcache.googleusercontent.com	2

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

by hokori matu on Nov 01, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 970

Statistics