• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

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

  • 82,319 views
Uploaded on

2010年8月に開催されたWordBench名古屋勉強会「Twenty Ten大解剖」の秋バージョンとしまして、テーマの構成とテンプレートの中身を解読&解説していきます。

2010年8月に開催されたWordBench名古屋勉強会「Twenty Ten大解剖」の秋バージョンとしまして、テーマの構成とテンプレートの中身を解読&解説していきます。

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
82,319
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
135
Comments
0
Likes
15

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~ 松下 寛子@hokori 2010年10月30日 WordCamp Nagoya 2010
  • 2. 自己紹介 松下 寛子@hokori http://hokori.net/ 社内SEという名のDTPもWEBもやるなんでも屋さんです。 プライベートではイラストレーターでFlasherだったりし ます。 実はWordCampは初参加! 2/111
  • 3. こんな感じで進めます ・テーマとは? ・Twenty Tenってどんなテーマ? ・Twenty Tenの中身を見てみよう! ・テーマの基本 ・Twenty Tenのテンプレートを読んでみよう! 3/111
  • 4. テーマとは? WordPressのブログの「見た目」「表示内容」 と を 変更できる 「着せ替え」機能です。 色や配置を変えるだけでなく、投稿記事の表示件 数を変えたり、ページ毎に表示を変えたりと、いろ いろな操作ができます。 テーマは自分で作成したり、誰かが作ったテーマ を使用したりすることができます。 4/111
  • 5. Twenty Ten は どんなテーマ?
  • 6. Twenty Ten の概要 WordPres3.0から同梱された、 WordPress Default、 WordPress Classicに変わる新しいデフォルトのテーマです。 カスタム背景などのWordPress3.0の新機能に対応していた り、ウィジェット、アイキャッチ画像などの以前からある機能 をより使いやすくしています。 ファイル構成 ソースコードも整理されて、 ・ 要所要所にコメン トが入っていて、とても読みやすくなっています。 6/111
  • 7. Twenty Ten ここが新しい! • カスタム背景 • カスタムメニュー • ヴィジュアルエディタ用のスタイル 7/111
  • 8. Twenty Ten ここが使いやすい! • ウェジェットエリアが増加 • カスタムヘッダーで画像の指定 • 投稿画面でアイキャッチ画像の指定 • ヘッダー画像がページによって変化 • カテゴリーの種類によって投稿一覧表示変更 • ドロップダウンメニュー • 2カラムと1カラムのページテンプレート • 印刷用スタイル 8/111
  • 9. Twenty Ten の 中身を見てみよう!
  • 10. Twenty Ten の場所 wp-content/themes/twentyten にあります wp-content themes twentyten 10/111
  • 11. 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
  • 12. テンプレート 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
  • 13. モジュールテンプレート header.php 他のテンプレートから部品 loop.php (モジュール) として読み込 sidebar.php まれるPHPソースファイルで footer.php sidebar-footer.php す。 comments.php 単にテンプレートと呼ばれた り、テンプレートパーツとも 呼ばれたりします。 13/111
  • 14. スタイルシート 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
  • 15. 関数ファイル functions.php テーマ内で使う設定や関 数を定義します。 自動的に WordPress の初 期化中に読み込まれます 。 テーマ内だけで使えるプ ラグインのようなもので す。 15/111
  • 16. 画像・言語ファイル等々 screenshot.png scrennshot.png license.txt 管理画面のテーマ選択ページに表 images/ 示される画像です。 languages/ license.txt ライセンスが書かれています。 imagesフォルダ テーマで使用する画像が入ってい ます。 languagesフォルダ 語句の翻訳に使われる言語ファイ ルが入っています。 16/111
  • 17. ここでちょっと テーマの基本をおさえる
  • 18. テーマの構成ファイル テーマの最小構成は以下の2ファイル index.php(汎用テンプレート) style.css(テーマの説明+CSS) いろいろやりたいなら、さらにファイルを追加する ・ページ毎のテンプレート ・functions.php ・画像ファイル ・言語ファイル ・ その他いろいろ 18/111
  • 19. ページとテンプレート ページ毎に表示を変えたい場合は、ページ毎のテ ンプレートを用意します。 トップページ :home.php 単独記事ページ :single.php 個別ページ :page.php カテゴリーページ :category.php アーカイブページ :archive.php などなど…。 ページ毎のテンプレートは、名前と優先順位がき まっています。 19/111
  • 20. テンプレートの優先順位 例えば、カテゴリー記事一覧ページを開いたとき。 1. category-slug.php 2. category-ID.php 3. category.php 4. archive.php 5. index.php この順番でテンプレートを探して、 見つかったも のだけが使用されます。 子テーマがある場合は、 子テーマの方が優先され ます。 20/111
  • 21. テンプレート階層 http://codex.wordpress.org/images/1/18/Template_Hierarchy.png 21/111
  • 22. 子テーマとは? テーマをカスタマイズするときに、テーマを丸ご とコピーして書き換えるのではなく、必要なファ イルだけ追加 上書きしたテーマが作れるような ・ 仕組みです。 style.cssで親テーマを指定するだけで使えます。 子テーマのテンプレートは、親テーマのテンプ レートより先に呼び出されます。 22/111
  • 23. Twenty Ten の テンプレートを 読んでみよう!
  • 24. この順番で読んでいきます 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
  • 25. index.php index.php header.php テンプレート ページ毎のテンプレー sidebar.php トが用意されていない footer.php 場合に適用される汎用 のテンプレート。
  • 26. 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
  • 27. 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><!-- #content --> 29. </div><!-- #container --> 30. 31. <?php get_sidebar(); ?> 32. <?php get_footer(); ?> 27/111
  • 28. テンプレートパーツの読み込み (1) get_template_part(WP3.0 から追加) ヘッダ フッタ サイドバー以外のテンプレートパーツ ・ ・ (モ ジュールテンプレート) を読み込むテンプレートタグ 書式 : <?php get_template_part( slug, name ) ?> slug : 一般テンプレートのスラッグ名 name : 特定テンプレートの名前(省略可) slug-name.php がなければ、slug.php を読み込む 28/111
  • 29. テンプレートパーツの読み込み (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
  • 30. header.php header.php モジュールテンプレート HTMLの最初からヘッ ダー部 (メインの開始タ グ)までを表示する。
  • 31. 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
  • 32. 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
  • 33. 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
  • 34. 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><!-- #branding --> 34/111
  • 35. 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><!-- #access --> 88. </div><!-- #masthead --> 89. </div><!-- #header --> ◆ ナビゲーションメニュー表示 90. 91. <div id="main"> 35/111
  • 36. ページによってヘッダ画像の変更 (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
  • 37. ページによってヘッダ画像の変更 (2) ◆投稿サムネイル(アイキャッチ画像) 実はWP2.9から追加済み。 functions.phpに設定項目を追加しないと動きま せんでしたが、 Twenty Ten では設定済みなので 何もしないでも使えます。 has_post_thumbnail(WP2.9 から追加 ) 投稿サムネイルがあるか確認するテンプレートタグ get_the_post_thumbnail(WP2.9 から追加 ) 投稿サムネイルを取得するテンプレートタグ 37/111
  • 38. ヘッダ画像の変更 (3) ◆カスタムヘッダー画像 WP3.0未満のデフォルトテーマでも使用できま したが、 機能的には少なめでした。 Twenty Tenでは画像の選択 アップロードなど ・ 機能が増えました。 header_image(WP2.1 から追加 ) ヘッダー画像を表示するテンプレートタグ 38/111
  • 39. ナビゲーションメニューの表示 wp_nav_menu(WP3.0 から追加 )  ナビゲーションメニューを表示するテンプレートタグ メニューが存在しない場合は、 デフォルトで wp_page_ menu (個別ページを表示するテン プレートタグ) を呼び出します。 パラメータを変えることで、表示するメニューを 絞り込んだり、リンクの前後にテキストを追加し たりといろいろ表示が変えられます。 39/111
  • 40. loop.php loop.php モジュールテンプレート 投稿一覧 (ループ) を表示 する。 Gallery、Asides、その他 のカテゴリーで表示内容 を変えている。
  • 41. 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
  • 42. 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">&larr;</span> Older posts', 'twentyten' ) ); ?></div> 26. <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div> 27. </div><!-- #nav-above --> 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><!-- .entry-content --> 38. </div><!-- #post-0 --> 39. <?php endif; ?> 40. 42/111
  • 43. 投稿ループ開始 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
  • 44. 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><!-- .entry-meta --> で定義 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
  • 45. loop.php(5/10) サムネイル画像表示 80. <a class="size-thumbnail" href="<?php the_permalink(); ?>"><?php echo $image_img_tag; ?></a> 81. </div><!-- .gallery-thumb --> 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><!-- .entry-content --> 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
  • 46. loop.php(6/10) 95. <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="meta- sep">|</span> <span class="edit-link">', '</span>' ); ?> 96. </div><!-- .entry-utility --> カテゴリー名かカテゴリースラッグ 97. </div><!-- #post-## --> 名が 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><!-- .entry-summary --> 108. <?php else : ?> 109. <div class="entry-content"> 110. <?php the_content( __( 'Continue reading <span class="meta- nav">&rarr;</span>', 'twentyten' ) ); ?> 111. </div><!-- .entry-content --> 112. <?php endif; ?> 46/111
  • 47. 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><!-- .entry-utility --> 120. </div><!-- #post-## --> その他のカテゴリー 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
  • 48. loop.php(8/10) 130. </div><!-- .entry-meta --> 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><!-- .entry-summary --> 136. <?php else : ?> 137. <div class="entry-content"> 138. <?php the_content( __( 'Continue reading <span class="meta- nav">&rarr;</span>', 'twentyten' ) ); ?> 139. <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?> 140. </div><!-- .entry-content --> 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
  • 49. 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><!-- .entry-utility --> 162. </div><!-- #post-## --> 163. 164. <?php comments_template( '', true ); ?> 49/111
  • 50. 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">&larr;</span> Older posts', 'twentyten' ) ); ?></div> 174. <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div> 175. </div><!-- #nav-below --> 176. <?php endif; ?> 50/111
  • 51. 投稿一覧(ループ) loop.php は loop.php は以下の7つのファイルから読み込まれています。 • archive.php • author.php • category.php • index.php • loop.php • search.php • tag.php 今までのデフォルトテーマでは、 投稿一覧(ループ)を表示す る部分は各ファイルにそれぞれ書かれていました。 Twenty Ten ではアーカイブ表示部分はすべてloop.phpにま とめられました。 51/111
  • 52. sidebar.php sidebar.php モジュールテンプレート サイドバー(ウィジェッ トエリア)を表示する。
  • 53. 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
  • 54. 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
  • 55. sidebar.php(3/3) 44. </div><!-- #primary .widget-area --> 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><!-- #secondary .widget-area --> 55. 56. <?php endif; ?> ◆ ウィジェット 2 が設定されているは ウィジェット2を表示 55/111
  • 56. ウィジェットの表示 ウィジェット機能は、 WP2.2から搭載されていま す。WP3.0未満のデフォルトテーマでも使用できまし ( た) Tentry Tenではウィジェットエリアも増えて、使 いやすいようにカスタマイズされています。 dynamic_sidebar(WP2.2 から追加 )  ウィジェットを表示するテンプレートタグ 56/111
  • 57. footer.php footer.php sidebar-footer.php モジュールテンプレート フッター部(メインの終 了タグとフッターのウィ ジェット)からHTMLの 終わりまでを表示する。
  • 58. 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><!-- #main --> 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
  • 59. 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><!-- #site-info --> 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><!-- #site-generator --> 38. 39. </div><!-- #colophon --> 40. </div><!-- #footer --> 59/111
  • 60. footer.php(3/3) 41. 42. </div><!-- #wrapper --> 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
  • 61. sidebar-footer.php sidebar-footer. php モジュールテンプレート フッターのサイドバー (ウィジェットエリア) を 表示する。
  • 62. 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
  • 63. 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. 以下2~ 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><!-- #first .widget-area --> 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><!-- #second .widget-area --> 42. <?php endif; ?> フッターウィジェットエリア 2 63/111
  • 64. 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><!-- #third .widget-area --> 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><!-- #fourth .widget-area --> 58. <?php endif; ?> 59. フッターウィジェットエリア 4 60. </div><!-- #footer-widget-area --> 64/111
  • 65. single.php header.php single.php comments.php テンプレート 個別の投稿記事を表示 する。 sidebar.php footer.php
  • 66. 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( '&larr;', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?></div> 19. <div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', 'twentyten' ) . '</span>' ); ?></ div> 66/111
  • 67. single.php (2/4) 20. </div><!-- #nav-above --> 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><!-- .entry-meta --> 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><!-- .entry-content --> 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"> filter で変えられるようにフック指定 37. <?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'twentyten_author_bio_avatar_size', 60 ) ); ?> 67/111
  • 68. single.php (3/4) 38. </div><!-- #author-avatar --> 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">&rarr;</span>', 'twentyten' ), get_the_author() ); ?> 45. </a> 46. </div><!-- #author-link --> 記事のカテゴリー、 タグ、 47. </div><!-- #author-description --> パーマリンクを表示する 48. </div><!-- #entry-author-info --> 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><!-- .entry-utility --> 55. </div><!-- #post-## --> 68/111
  • 69. 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( '&larr;', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?></div> 59. <div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', 'twentyten' ) . '</span>' ); ?></ div> 60. </div><!-- #nav-below --> 61. 62. <?php comments_template( '', true ); ?> 63. 64. <?php endwhile; // end of the loop. ?> コメントテンプレート読み込み 65. 66. </div><!-- #content --> 67. </div><!-- #container --> 68. 69. <?php get_sidebar(); ?> 70. <?php get_footer(); ?> 69/111
  • 70. comments.php comments.php モジュールテンプレート コメント一覧とコメント フォームを表示する。
  • 71. 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><!-- #comments --> 71/111
  • 72. 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
  • 73. comments.php (3/4) 40. <div class="navigation"> 41. <div class="nav-previous"><?php previous_comments_link( __( '<span class="meta-nav">&larr;</span> Older Comments', 'twentyten' ) ); ?></div> 42. <div class="nav-next"><?php next_comments_link( __( 'Newer Comments <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div> 43. </div> <!-- .navigation --> 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
  • 74. comments.php (4/4) 60. <div class="nav-previous"><?php previous_comments_link( __( '<span class="meta-nav">&larr;</span> Older Comments', 'twentyten' ) ); ?></div> 61. <div class="nav-next"><?php next_comments_link( __( 'Newer Comments <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div> 62. </div><!-- .navigation --> 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 --> 74/111
  • 75. page.php header.php page.php comments.php テンプレート 固定ページを表示する。 sidebar.php footer.php
  • 76. 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
  • 77. フロントページに指定してあるページの場 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><!-- .entry-content --> 34. </div><!-- #post-## --> 35. 36. <?php comments_template( '', true ); ?> 77/111
  • 78. page.php (1/3) 37. 38. <?php endwhile; ?> 39. 40. </div><!-- #content --> 41. </div><!-- #container --> 42. 43. <?php get_sidebar(); ?> 44. <?php get_footer(); ?> 78/111
  • 79. onecolumn-page.php onecolumn- header.php page.php comments.php テンプレート サイドバーのない1カ ラムの固定ページを表 footer.php 示する。
  • 80. 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
  • 81. 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><!-- .entry-content --> 29. </div><!-- #post-## --> 30. 31. <?php comments_template( '', true ); ?> 32. 33. <?php endwhile; ?> 34. 35. </div><!-- #content --> 36. </div><!-- #container --> 37. 38. <?php get_footer(); ?> 81/111
  • 82. search.php search.php header.php テンプレート 検索結果一覧と検索 sidebar.php フォームを表示する。 footer.php
  • 83. 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
  • 84. 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><!-- .entry-content --> 31. </div><!-- #post-0 --> 32. <?php endif; ?> 検索フォームを読み込む 33. </div><!-- #content --> 34. </div><!-- #container --> 35. 36. <?php get_sidebar(); ?> 37. <?php get_footer(); ?> 84/111
  • 85. archive.php archive.php header.php テンプレート アーカイブページの汎 sidebar.php 用テンプレート。 footer.php
  • 86. 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
  • 87. 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
  • 88. 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><!-- #content --> loop-archive.php が同じテーマ内か子テー 58. </div><!-- #container --> マにある場合はそれを読み込む。 59. ない場合は、loop.php を読み込む 60. <?php get_sidebar(); ?> 61. <?php get_footer(); ?> 88/111
  • 89. category.php category.php header.php テンプレート カテゴリー別投稿記事 sidebar.php 一覧(アーカイブ)ペー footer.php ジを表示する。
  • 90. 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
  • 91. 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><!-- #content --> loop-category.php が同じテーマ内か子テー 31. </div><!-- #container --> マにある場合はそれを読み込む。 32. ない場合は、loop.php を読み込む 33. <?php get_sidebar(); ?> 34. <?php get_footer(); ?> 91/111
  • 92. tag.php tag.php header.php テンプレート タグ別投稿記事一覧 sidebar.php (アーカイブ) ページを footer.php 表示する。
  • 93. 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
  • 94. 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><!-- #content --> 27. </div><!-- #container --> loop-tag.php が同じテーマ内か子テーマに 28. ある場合はそれを読み込む。 29. <?php get_sidebar(); ?> 30. <?php get_footer(); ?> ない場合は、loop.php を読み込む 94/111
  • 95. auther.php auther.php header.php テンプレート 著者別投稿記事一覧 sidebar.php (アーカイブ) ページを footer.php 表示する。
  • 96. 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
  • 97. 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_filter で変えられるようにフック指定 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><!-- #author-avatar --> 36. <div id="author-description"> 37. <h2><?php printf( __( 'About %s', 'twentyten' ), get_the_ author() ); ?></h2> 38. <?php the_author_meta( 'description' ); ?> 39. </div><!-- #author-description --> 40. </div><!-- #entry-author-info --> 97/111
  • 98. 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><!-- #content --> 57. </div><!-- #container --> loop-author.php が同じテーマ内か子テーマ 58. にある場合はそれを読み込む。 59. <?php get_sidebar(); ?> ない場合は、loop.php を読み込む 60. <?php get_footer(); ?> 98/111
  • 99. attachment.php attachment. header.php php テンプレート comments.php メディア(投稿に挿入す る画像等の添付ファイ footer.php ル)を表示する。
  • 100. 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
  • 101. attachment.php (2/7) 20. printf( __( '<span class="meta-nav">&larr;</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
  • 102. 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 &times; %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
  • 103. attachment.php (4/7) 59. ?> 60. <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="meta-sep">|</span> <span class="edit-link">', '</span>' ); ?> 61. </div><!-- .entry-meta --> 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
  • 104. 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_filter で変えられるようにフック指定 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
  • 105. attachment.php (6/7) 93. </div><!-- #nav-below --> 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><!-- .entry-attachment --> 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">&rarr;</ span>', 'twentyten' ) ); ?> 101. <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?> 102. 103. </div><!-- .entry-content --> 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
  • 106. attachment.php (7/7) 108. </div><!-- .entry-utility --> 109. </div><!-- #post-## --> 110. 111. <?php comments_template(); ?> 112. 113. <?php endwhile; ?> 114. 115. </div><!-- #content --> 116. </div><!-- #container --> 117. 118. <?php get_footer(); ?> 106/111
  • 107. 404.php 404.php header.php テンプレート 404エラー(ページが見 sidebar.php つからない) ページを表 footer.php 示する。
  • 108. 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><!-- .entry-content --> 21. </div><!-- #post-0 --> 検索フォームを読み込む 108/111
  • 109. 404.php (2/2) 22. 23. </div><!-- #content --> ロード時に検索フォームに 24. </div><!-- #container --> 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
  • 110. Twenty Ten は、 読みやすい&カスタマイズし やすいテーマです! 子テーマ作ってみたり、 新規テーマを作るときの参考 にしたりしてみてください。
  • 111. ご静聴 ありがとうございました! 松下 寛子@hokori