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.

Like this presentation? Why not share!

Like this? Share it with your network

Share

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

on

  • 37,954 views

2010年8月に開催されたWordBench名古屋勉強会「Twenty ...

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

Statistics

Views

Total Views
37,954
Views on SlideShare
35,300
Embed Views
2,654

Actions

Likes
15
Downloads
132
Comments
0

10 Embeds 2,654

http://design-plus1.com 2415
http://pascal.plustar.jp 119
http://noteroll.com.local 42
http://d.hatena.ne.jp 35
http://s.deeeki.com 24
https://si0.twimg.com 6
http://iteman.tumblr.com 6
http://localhost 3
http://webcache.googleusercontent.com 2
http://instructorblog-slide.biz 2
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~ Presentation 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