0
WordPress3.0
新デフォルトテーマ
Twenty Ten 大解剖!
~秋バージョン~
2010年10月30日
WordCamp Nagoya 2010
松下 寛子@hokori
2/111
自己紹介
松下 寛子@hokori
http://hokori.net/
社内SEという名のDTPもWEBもやるなんでも屋さんです。
プライベートではイラストレーターでFlasherだったりし
ます。
実はWordCampは初参加!
3/111
こんな感じで進めます
・テーマとは?
・Twenty Tenってどんなテーマ?
・Twenty Tenの中身を見てみよう!
・テーマの基本
・Twenty Tenのテンプレートを読んでみよう!
4/111
テーマとは?
WordPressのブログの「見た目」と「表示内容」を
変更できる「着せ替え」機能です。
色や配置を変えるだけでなく、投稿記事の表示件
数を変えたり、ページ毎に表示を変えたりと、いろ
いろな操作ができます。
テーマは自...
Twenty Ten は
どんなテーマ?
6/111
Twenty Ten の概要
WordPres3.0から同梱された、WordPress Default、
WordPress Classicに変わる新しいデフォルトのテーマです。
カスタム背景などのWordPress3.0の新機能に...
7/111
Twenty Ten ここが新しい!
•	カスタム背景
•	カスタムメニュー
•	ヴィジュアルエディタ用のスタイル
8/111
•	ウェジェットエリアが増加
•	カスタムヘッダーで画像の指定
•	投稿画面でアイキャッチ画像の指定
•	ヘッダー画像がページによって変化
•	カテゴリーの種類によって投稿一覧表示変更
•	ドロップダウンメニュー
•	2カラムと1カ...
Twenty Ten の
中身を見てみよう!
10/111
Twenty Ten の場所
twentyten
themes
wp-content
wp-content/themes/twentyten にあります
11/111
Twenty Ten ファイル構成
index.php
single.php
page.php
onecolumn-page.php
search.php
archive.php
category.php
tag.php
atta...
12/111
テンプレート
トップページ、アーカイブ
ページ、カテゴリーページな
ど、要求があったページ全体
を表示するために使われる
PHPソースファイルです。
index.php
single.php
page.php
onecolumn-...
13/111
モジュールテンプレート
他のテンプレートから部品
(モジュール)として読み込
まれるPHPソースファイルで
す。
単にテンプレートと呼ばれた
り、テンプレートパーツとも
呼ばれたりします。
header.php
loop.php
...
14/111
スタイルシート
スタイルシートファイル
です。
style.cssだけはテーマ
に必須で、書式に従って、
テーマの説明が書かれて
います。
style.css
rtl.css
editor-style-rtl.css
editor...
15/111
テーマ内で使う設定や関
数を定義します。
自動的に WordPress の初
期化中に読み込まれます 。
テーマ内だけで使えるプ
ラグインのようなもので
す。
関数ファイル
functions.php
16/111
scrennshot.png
管理画面のテーマ選択ページに表
示される画像です。
license.txt
ライセンスが書かれています。
imagesフォルダ
テーマで使用する画像が入ってい
ます。
languagesフォルダ
語句...
ここでちょっと
テーマの基本をおさえる
18/111
テーマの最小構成は以下の2ファイル
index.php(汎用テンプレート)
style.css(テーマの説明+CSS)
いろいろやりたいなら、さらにファイルを追加する
・ページ毎のテンプレート
・functions.php
・画像...
19/111
ページとテンプレート
ページ毎に表示を変えたい場合は、ページ毎のテ
ンプレートを用意します。
	 トップページ		 :home.php
	 単独記事ページ	:single.php
	 個別ページ				 :page.php
	 カ...
20/111
テンプレートの優先順位
例えば、カテゴリー記事一覧ページを開いたとき。
	 1. category-slug.php
	 2. category-ID.php
	 3. category.php
	 4. archive.php
...
21/111
テンプレート階層
http://codex.wordpress.org/images/1/18/Template_Hierarchy.png
22/111
子テーマとは?
テーマをカスタマイズするときに、テーマを丸ご
とコピーして書き換えるのではなく、必要なファ
イルだけ追加・上書きしたテーマが作れるような
仕組みです。
style.cssで親テーマを指定するだけで使えます。
子テー...
Twenty Ten の
テンプレートを
読んでみよう!
24/111
10.	onecolumn-page.php
11.	search.php
12.	archive.php
13.	category.php
14.	tag.php
15.	author.php
16.	attachment.ph...
index.php
header.php
sidebar.php
footer.php
テンプレート
ページ毎のテンプレー
トが用意されていない
場合に適用される汎用
のテンプレート。
index.php
26/111
01.	<?php
02.	/**
03.	 * The main template file.
04.	 *
05.	 * This is the most generic template file in a WordPres...
27/111
21. <?php
22. /* Run the loop to output the posts.
23. * If you want to overload this in a child theme then include...
28/111
テンプレートパーツの読み込み (1)
get_template_part(WP3.0 から追加)
ヘッダ・フッタ・サイドバー以外のテンプレートパーツ(モ
ジュールテンプレート)を読み込むテンプレートタグ
書式:
<?php get...
29/111
テンプレートパーツの読み込み (2)
例:<?php get_template_part('loop', 'index' ) ?>
親テーマをtwentyten、子テーマをtwentyten-childとし
た場合、この順番で呼び...
モジュールテンプレート
HTMLの最初からヘッ
ダー部(メインの開始タ
グ)までを表示する。
header.phpheader.php
31/111
01. <?php
02. /**
03. * The Header for our theme.
04. *
05. * Displays all of the <head> section and everything up ...
32/111
22.
23. // Add the blog name.
24. bloginfo( 'name' );
25.
26. // Add the blog description for the home/front page.
...
33/111
43. if ( is_singular() && get_option( 'thread_comments' ) )
44. wp_enqueue_script( 'comment-reply' );
45.
46. /* Al...
34/111
esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' );
?></a>
65. </span>
66. </<?...
35/111
81.
82. <div id="access" role="navigation">
83. <?php /* Allow screen readers / text browsers to skip the navigatio...
36/111
<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_po...
37/111
ページによってヘッダ画像の変更(2)
◆投稿サムネイル(アイキャッチ画像)
実はWP2.9から追加済み。
functions.phpに設定項目を追加しないと動きま
せんでしたが、Twenty Ten では設定済みなので
何もしない...
38/111
ヘッダ画像の変更 (3)
◆カスタムヘッダー画像
WP3.0未満のデフォルトテーマでも使用できま
したが、機能的には少なめでした。
Twenty Tenでは画像の選択・アップロードなど
機能が増えました。
header_image...
39/111
ナビゲーションメニューの表示
wp_nav_menu(WP3.0 から追加 )
 ナビゲーションメニューを表示するテンプレートタグ
メニューが存在しない場合は、デフォルトで
wp_page_	menu	(個別ページを表示するテン
...
モジュールテンプレート
投稿一覧(ループ)を表示
する。
Gallery、Asides、その他
のカテゴリーで表示内容
を変えている。
loop.phploop.php
41/111
01.	<?php
02.	/**
03.	 * The loop that displays posts.
04.	 *
05.	 * The loop displays the posts and the post conte...
42/111
22. <?php /* Display navigation to next/previous pages when applicable */ ?>
23. <?php if ( $wp_query->max_num_page...
43/111
41. <?php
42. /* Start the Loop.
43. *
44. * In Twenty Ten we use the same loop in multiple contexts.
45. * It is b...
44/111
printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) );
?>" rel="bookmark"><?php t...
45/111
80. <a class="size-thumbnail" href="<?php the_permalink();
?>"><?php echo $image_img_tag; ?></a>
81. </div><!-- .ga...
46/111
95. <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="meta-
sep">|</span> <span class="edit-link">', '...
47/111
113.
114. <div class="entry-utility">
115. <?php twentyten_posted_on(); ?>
116. <span class="meta-sep">|</span>
117...
48/111
130.	 			 </div><!-- .entry-meta -->
131.	
132.	 	 <?php if ( is_archive() || is_search() ) : // Only display excer...
49/111
147.	 					 </span>
148.	 					 <span class="meta-sep">|</span>
149.	 				 <?php endif; ?>
150.	 				<?php
151.	 		...
50/111
165.
166. <?php endif; // This was the if statement that broke the loop into three parts
based on categories. ?>
16...
51/111
投稿一覧(ループ)は loop.php
loop.php は以下の7つのファイルから読み込まれています。
•	 archive.php
•	 author.php
•	 category.php
•	 index.php
•	 l...
モジュールテンプレート
サイドバー(ウィジェッ
トエリア)を表示する。
sidebar.phpsidebar.php
53/111
01. <?php
02. /**
03. * The Sidebar containing the primary and secondary widget areas.
04. *
05. * @package WordPre...
54/111
22. <li id="search" class="widget-container widget_search">
23. <?php get_search_form(); ?>
24. </li>
25.
26. <li i...
55/111
44. </div><!-- #primary .widget-area -->
45.
46. <?php
47. // A second sidebar for widgets, just because.
48. if ( ...
56/111
ウィジェットの表示
ウィジェット機能は、WP2.2から搭載されていま
す。(WP3.0未満のデフォルトテーマでも使用できまし
た)
Tentry Tenではウィジェットエリアも増えて、使
いやすいようにカスタマイズされています。
...
モジュールテンプレート
フッター部(メインの終
了タグとフッターのウィ
ジェット)からHTMLの
終わりまでを表示する。
footer.phpfooter.php
sidebar-footer.php
58/111
01. <?php
02. /**
03. * The template for displaying the footer.
04. *
05. * Contains the closing of the id=main div...
59/111
23.	?>
24.	
25.				 <div id="site-info">
26.					 <a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_att...
60/111
41.
42. </div><!-- #wrapper -->
43.
44. <?php
45. /* Always have wp_footer() just before the closing </body>
46. * ...
モジュールテンプレート
フッターのサイドバー
(ウィジェットエリア)を
表示する。
sidebar-footer.
php
sidebar-footer.php
62/111
01. <?php
02. /**
03. * The Footer widget areas.
04. *
05. * @package WordPress
06. * @subpackage Twenty_Ten
07. * ...
63/111
23. // If we get this far, we have widgets. Let do this.
24. ?>
25.
26. <div id="footer-widget-area" role="compleme...
64/111
43.
44. <?php if ( is_active_sidebar( 'third-footer-widget-area' ) ) : ?>
45. <div id="third" class="widget-area">
...
single.php
header.php
sidebar.php
footer.php
テンプレート
個別の投稿記事を表示
する。
single.php
comments.php
66/111
01.	<?php
02.	/**
03.	 * The Template for displaying all single posts.
04.	 *
05.	 * @package WordPress
06.	 * @sub...
67/111
20. </div><!-- #nav-above -->
21.
22. <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
23. <h1 class="entr...
68/111
38. </div><!-- #author-avatar -->
39. <div id="author-description">
40. <h2><?php printf( esc_attr__( 'About %s', '...
69/111
56.
57. <div id="nav-below" class="navigation">
58. <div class="nav-previous"><?php previous_post_link( '%link',
'<...
モジュールテンプレート
コメント一覧とコメント
フォームを表示する。
comments.phpcomments.php
71/111
01.	<?php
02.	/**
03.	 * The template for displaying Comments.
04.	 *
05.	 * The area of the page that contains bot...
72/111
20.	<?php
21.			 /* Stop the rest of comments.php from being processed,
22.			 * but don't kill the script entirely...
73/111
40. <div class="navigation">
41. <div class="nav-previous"><?php previous_comments_link( __( '<span
class="meta-nav...
74/111
60. <div class="nav-previous"><?php previous_comments_link( __( '<span
class="meta-nav">&larr;</span> Older Comment...
page.php
header.php
sidebar.php
footer.php
テンプレート
固定ページを表示する。
page.php
comments.php
76/111
01.	<?php
02.	/**
03.	 * The template for displaying all pages.
04.	 *
05.	 * This is the template that displays al...
77/111
19.
20. <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
21.
22. <div id="post-<?php the_ID(); ?>"...
78/111
37.	
38.	<?php endwhile; ?>
39.	
40.				 </div><!-- #content -->
41.			 </div><!-- #container -->
42.	
43.	<?php ge...
onecolumn-page.php
header.php
footer.php
テンプレート
サイドバーのない1カ
ラムの固定ページを表
示する。
onecolumn-
page.php
comments.php
80/111
01.	<?php
02.	/**
03.	 * Template Name: One column, no sidebar
04.	 *
05.	 * A custom page template without sidebar...
81/111
19.	
20.	<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
21.	
22.					 <div id="post-<?php the_ID...
テンプレート
検索結果一覧と検索
フォームを表示する。
search.php
search.php
header.php
sidebar.php
footer.php
83/111
01.	<?php
02.	/**
03.	 * The template for displaying Search Results pages.
04.	 *
05.	 * @package WordPress
06.	 * ...
84/111
17. <?php
18. /* Run the loop for the search to output the results.
19. * If you want to overload this in a child t...
テンプレート
アーカイブページの汎
用テンプレート。
archive.php
archive.php
header.php
sidebar.php
footer.php
86/111
01.	<?php
02.	/**
03.	 * The template for displaying Archive pages.
04.	 *
05.	 * Used to display archive-type page...
87/111
20. <?php
21. /* Queue the first post, that way we know
22. * what date we're dealing with (if that is the case).
2...
88/111
40. <?php endif; ?>
41. </h1>
42.
43. <?php
44. /* Since we called the_post() above, we need to
45. * rewind the lo...
テンプレート
カテゴリー別投稿記事
一覧(アーカイブ)ペー
ジを表示する。
category.php
category.php
header.php
sidebar.php
footer.php
90/111
01.	<?php
02.	/**
03.	 * The template for displaying Category Archive pages.
04.	 *
05.	 * @package WordPress
06.	 ...
91/111
18. <?php
19. $category_description = category_description();
20. if ( ! empty( $category_description ) )
21. echo ...
テンプレート
タグ別投稿記事一覧
(アーカイブ)ページを
表示する。
tag.php
tag.php
header.php
sidebar.php
footer.php
93/111
01.	<?php
02.	/**
03.	 * The template for displaying Tag Archive pages.
04.	 *
05.	 * @package WordPress
06.	 * @su...
94/111
18.
19. <?php
20. /* Run the loop for the tag archive to output the posts
21. * If you want to overload this in a c...
テンプレート
著者別投稿記事一覧
(アーカイブ)ページを
表示する。
auther.php
auther.php
header.php
sidebar.php
footer.php
96/111
01.	<?php
02.	/**
03.	 * The template for displaying Author Archive pages.
04.	 *
05.	 * @package WordPress
06.	 * ...
97/111
23. if ( have_posts() )
24. the_post();
25. ?>
26.
27. <h1 class="page-title author"><?php printf( __( 'Author Arch...
98/111
41. <?php endif; ?>
42.
43. <?php
44. /* Since we called the_post() above, we need to
45. * rewind the loop back to...
テンプレート
メディア(投稿に挿入す
る画像等の添付ファイ
ル)を表示する。
attachment.
php
attachment.php
header.php
comments.php
footer.php
100/111
01. <?php
02. /**
03. * The template for displaying attachments.
04. *
05. * @package WordPress
06. * @subpackage ...
101/111
20.							 printf( __( '<span class="meta-nav">&larr;</span> %s',
'twentyten' ), get_the_title( $post->post_parent...
102/111
39. <?php
40. printf( __('<span class="%1$s">Published</span> %2$s',
'twentyten'),
41. 'meta-prep meta-prep-entry-...
103/111
59.							 ?>
60.							 <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span
class="meta-sep">|</span> <span c...
104/111
78. // or get the URL of the first image attachment
79. $next_attachment_url = get_attachment_link( $attachments[ ...
105/111
93.							 </div><!-- #nav-below -->
94.	<?php else : ?>
95.							 <a href="<?php echo wp_get_attachment_url(); ?...
106/111
108.	 					 </div><!-- .entry-utility -->
109.	 				 </div><!-- #post-## -->
110.	
111.	 <?php comments_template()...
テンプレート
404エラー(ページが見
つからない)ページを表
示する。
404.php
404.php
header.php
sidebar.php
footer.php
108/111
01. <?php
02. /**
03. * The template for displaying 404 pages (Not Found).
04. *
05. * @package WordPress
06. * @s...
109/111
22.
23. </div><!-- #content -->
24. </div><!-- #container -->
25. <script type="text/javascript">
26. // focus on ...
Twenty Ten は、
読みやすい&カスタマイズし
やすいテーマです!
子テーマ作ってみたり、
新規テーマを作るときの参考
にしたりしてみてください。
ご静聴
ありがとうございました!
松下 寛子@hokori
Upcoming SlideShare
Loading in...5
×

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

84,674

Published on

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

Published in: Technology
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
84,674
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
135
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

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

  1. 1. WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~ 2010年10月30日 WordCamp Nagoya 2010 松下 寛子@hokori
  2. 2. 2/111 自己紹介 松下 寛子@hokori http://hokori.net/ 社内SEという名のDTPもWEBもやるなんでも屋さんです。 プライベートではイラストレーターでFlasherだったりし ます。 実はWordCampは初参加!
  3. 3. 3/111 こんな感じで進めます ・テーマとは? ・Twenty Tenってどんなテーマ? ・Twenty Tenの中身を見てみよう! ・テーマの基本 ・Twenty Tenのテンプレートを読んでみよう!
  4. 4. 4/111 テーマとは? WordPressのブログの「見た目」と「表示内容」を 変更できる「着せ替え」機能です。 色や配置を変えるだけでなく、投稿記事の表示件 数を変えたり、ページ毎に表示を変えたりと、いろ いろな操作ができます。 テーマは自分で作成したり、誰かが作ったテーマ を使用したりすることができます。
  5. 5. Twenty Ten は どんなテーマ?
  6. 6. 6/111 Twenty Ten の概要 WordPres3.0から同梱された、WordPress Default、 WordPress Classicに変わる新しいデフォルトのテーマです。 カスタム背景などのWordPress3.0の新機能に対応していた り、ウィジェット、アイキャッチ画像などの以前からある機能 をより使いやすくしています。 ファイル構成・ソースコードも整理されて、要所要所にコメン トが入っていて、とても読みやすくなっています。
  7. 7. 7/111 Twenty Ten ここが新しい! • カスタム背景 • カスタムメニュー • ヴィジュアルエディタ用のスタイル
  8. 8. 8/111 • ウェジェットエリアが増加 • カスタムヘッダーで画像の指定 • 投稿画面でアイキャッチ画像の指定 • ヘッダー画像がページによって変化 • カテゴリーの種類によって投稿一覧表示変更 • ドロップダウンメニュー • 2カラムと1カラムのページテンプレート • 印刷用スタイル Twenty Ten ここが使いやすい!
  9. 9. Twenty Ten の 中身を見てみよう!
  10. 10. 10/111 Twenty Ten の場所 twentyten themes wp-content wp-content/themes/twentyten にあります
  11. 11. 11/111 Twenty Ten ファイル構成 index.php single.php page.php onecolumn-page.php search.php archive.php category.php tag.php attachment.php author.php 404.php header.php loop.php sidebar.php footer.php sidebar-footer.php comments.php テンプレート モジュール テンプレート 関数ファイル スタイルシート 画像・言語ファ イル等 functions.php style.css rtl.css editor-style-rtl.css editor-style.css screenshot.png license.txt images/ languages/
  12. 12. 12/111 テンプレート トップページ、アーカイブ ページ、カテゴリーページな ど、要求があったページ全体 を表示するために使われる PHPソースファイルです。 index.php single.php page.php onecolumn-page.php search.php archive.php category.php tag.php attachment.php author.php 404.php
  13. 13. 13/111 モジュールテンプレート 他のテンプレートから部品 (モジュール)として読み込 まれるPHPソースファイルで す。 単にテンプレートと呼ばれた り、テンプレートパーツとも 呼ばれたりします。 header.php loop.php sidebar.php footer.php sidebar-footer.php comments.php
  14. 14. 14/111 スタイルシート スタイルシートファイル です。 style.cssだけはテーマ に必須で、書式に従って、 テーマの説明が書かれて います。 style.css rtl.css editor-style-rtl.css editor-style.css @charset "utf-8"; /* Theme Name: Twenty Ten Theme URI: http://wordpress.org/ Description: WordPress のテーマ「2010」は、スタイリッシュで、カスタマイズ可能 で、簡潔で、読みやすく -- カスタムメニュー、ヘッダー画像、背景でサイトを作れます。 Twenty Ten は6つのウィジェットエリア (サイドバーに2つ、フッターに4つ) …
  15. 15. 15/111 テーマ内で使う設定や関 数を定義します。 自動的に WordPress の初 期化中に読み込まれます 。 テーマ内だけで使えるプ ラグインのようなもので す。 関数ファイル functions.php
  16. 16. 16/111 scrennshot.png 管理画面のテーマ選択ページに表 示される画像です。 license.txt ライセンスが書かれています。 imagesフォルダ テーマで使用する画像が入ってい ます。 languagesフォルダ 語句の翻訳に使われる言語ファイ ルが入っています。 画像・言語ファイル等々 screenshot.png license.txt images/ languages/
  17. 17. ここでちょっと テーマの基本をおさえる
  18. 18. 18/111 テーマの最小構成は以下の2ファイル index.php(汎用テンプレート) style.css(テーマの説明+CSS) いろいろやりたいなら、さらにファイルを追加する ・ページ毎のテンプレート ・functions.php ・画像ファイル ・言語ファイル・その他いろいろ テーマの構成ファイル
  19. 19. 19/111 ページとテンプレート ページ毎に表示を変えたい場合は、ページ毎のテ ンプレートを用意します。 トップページ :home.php 単独記事ページ :single.php 個別ページ :page.php カテゴリーページ :category.php アーカイブページ :archive.php などなど…。 ページ毎のテンプレートは、名前と優先順位がき まっています。
  20. 20. 20/111 テンプレートの優先順位 例えば、カテゴリー記事一覧ページを開いたとき。 1. category-slug.php 2. category-ID.php 3. category.php 4. archive.php 5. index.php この順番でテンプレートを探して、見つかったも のだけが使用されます。 子テーマがある場合は、子テーマの方が優先され ます。
  21. 21. 21/111 テンプレート階層 http://codex.wordpress.org/images/1/18/Template_Hierarchy.png
  22. 22. 22/111 子テーマとは? テーマをカスタマイズするときに、テーマを丸ご とコピーして書き換えるのではなく、必要なファ イルだけ追加・上書きしたテーマが作れるような 仕組みです。 style.cssで親テーマを指定するだけで使えます。 子テーマのテンプレートは、親テーマのテンプ レートより先に呼び出されます。
  23. 23. Twenty Ten の テンプレートを 読んでみよう!
  24. 24. 24/111 10. onecolumn-page.php 11. search.php 12. archive.php 13. category.php 14. tag.php 15. author.php 16. attachment.php 17. 404.php 1. index.php 2. header.php 3. loop.php 4. sidebar.php 5. footer.php 6. sidebar-footer.php 7. single.php 8. comments.php 9. page.php この順番で読んでいきます 主に WordPress3.0 の新機能と、 Twenty Ten の独自機能について解説していきます。 あと気になったところ。 ※テンプレート ※モジュールテンプレート
  25. 25. index.php header.php sidebar.php footer.php テンプレート ページ毎のテンプレー トが用意されていない 場合に適用される汎用 のテンプレート。 index.php
  26. 26. 26/111 01. <?php 02. /** 03. * The main template file. 04. * 05. * This is the most generic template file in a WordPress theme 06. * and one of the two required files for a theme (the other being style.css). 07. * It is used to display a page when nothing more specific matches a query. 08. * E.g., it puts together the home page when no home.php file exists. 09. * Learn more: http://codex.wordpress.org/Template_Hierarchy 10. * 11. * @package WordPress 12. * @subpackage Twenty_Ten 13. * @since Twenty Ten 1.0 14. */ 15. 16. get_header(); ?> 17. 18. <div id="container"> 19. <div id="content" role="main"> 20. index.php (1/2)
  27. 27. 27/111 21. <?php 22. /* Run the loop to output the posts. 23. * If you want to overload this in a child theme then include a file 24. * called loop-index.php and that will be used instead. 25. */ 26. get_template_part( 'loop', 'index' ); 27. ?> 28. </div><!-- #content --> 29. </div><!-- #container --> 30. 31. <?php get_sidebar(); ?> 32. <?php get_footer(); ?> index.php (2/2) 26. get_template_part( 'loop', 'index' );26. get_template_part( 'loop', 'index' ); ◆ テンプレートパーツの読み込み
  28. 28. 28/111 テンプレートパーツの読み込み (1) get_template_part(WP3.0 から追加) ヘッダ・フッタ・サイドバー以外のテンプレートパーツ(モ ジュールテンプレート)を読み込むテンプレートタグ 書式: <?php get_template_part( slug, name ) ?> slug:一般テンプレートのスラッグ名 name:特定テンプレートの名前(省略可) slug-name.php がなければ、slug.php を読み込む
  29. 29. 29/111 テンプレートパーツの読み込み (2) 例:<?php get_template_part('loop', 'index' ) ?> 親テーマをtwentyten、子テーマをtwentyten-childとし た場合、この順番で呼び出されます。 1. wp-content/themes/twentyten-child/loop-index.php 2. wp-content/themes/twentyten-child/loop.php 3. wp-content/themes/twentyten/loop-index.php 4. wp-content/themes/twentyten/loop.php 全てのファイルがない場合はなにもしません。
  30. 30. モジュールテンプレート HTMLの最初からヘッ ダー部(メインの開始タ グ)までを表示する。 header.phpheader.php
  31. 31. 31/111 01. <?php 02. /** 03. * The Header for our theme. 04. * 05. * Displays all of the <head> section and everything up till <div id="main"> 06. * 07. * @package WordPress 08. * @subpackage Twenty_Ten 09. * @since Twenty Ten 1.0 10. */ 11. ?><!DOCTYPE html> 12. <html <?php language_attributes(); ?>> 13. <head> 14. <meta charset="<?php bloginfo( 'charset' ); ?>" /> 15. <title><?php 16. /* 17. * Print the <title> tag based on what is being viewed. 18. */ 19. global $page, $paged; 20. 21. wp_title( '|', true, 'right' ); header.php(1/5) 11. ?><!DOCTYPE html> 12. <html <?php language_attributes(); ?>> 13. <head> 14. <meta charset="<?php bloginfo( 'charset' ); ?>" /><meta charset="<?php bloginfo( 'charset' ); ?>" /> HTML5 !
  32. 32. 32/111 22. 23. // Add the blog name. 24. bloginfo( 'name' ); 25. 26. // Add the blog description for the home/front page. 27. $site_description = get_bloginfo( 'description', 'display' ); 28. if ( $site_description && ( is_home() || is_front_page() ) ) 29. echo " | $site_description"; 30. 31. // Add a page number if necessary: 32. if ( $paged >= 2 || $page >= 2 ) 33. echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) ); 34. 35. ?></title> 36. <link rel="profile" href="http://gmpg.org/xfn/11" /> 37. <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_ url' ); ?>" /> 38. <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> 39. <?php 40. /* We add some JavaScript to pages with the comment form 41. * to support sites with threaded comments (when in use). 42. */ header.php(2/5) 31. // Add a page number if necessary: 32. if ( $paged >= 2 || $page >= 2 ) 33. echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) ); 26. // Add the blog description for the home/front page. 27. $site_description = get_bloginfo( 'description', 'display' ); 28. if ( $site_description && ( is_home() || is_front_page() ) ) 29. echo " | $site_description";echo " | $site_description"; トップページの場合は、サイトの 説明(キャッチフレーズ)を表示 2 ページ目以降はページ数を表示
  33. 33. 33/111 43. if ( is_singular() && get_option( 'thread_comments' ) ) 44. wp_enqueue_script( 'comment-reply' ); 45. 46. /* Always have wp_head() just before the closing </head> 47. * tag of your theme, or you will break many plugins, which 48. * generally use this hook to add elements to <head> such 49. * as styles, scripts, and meta tags. 50. */ 51. wp_head(); 52. ?> 53. </head> 54. 55. <body <?php body_class(); ?>> 56. <div id="wrapper" class="hfeed"> 57. 58. <div id="header"> 59. <div id="masthead"> 60. <div id="branding" role="banner"> 61. <?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?> 62. <<?php echo $heading_tag; ?> id="site-title"> 63. <span> 64. <a href="<?php echo home_url( '/' ); ?>" title="<?php echo header.php(3/5) 61. <?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?> 62. <<?php echo $heading_tag; ?> id="site-title"> 61. 62. <<?php echo $heading_tag; ?> id="site-title"> サイトタイトルを括るタグがページに よって変化 トップページ:h1 タグ その他のページ:div タグ 44. wp_enqueue_script( 'comment-reply' ); javascript を適切な順番でロードしてくれる 便利関数。 51. wp_head();51. ヘッダの終わりを通知するフック。プラグインや 独自関数で使用。これを消すと、正常に動作しな くなるプラグインやテーマが出てくる
  34. 34. 34/111 esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a> 65. </span> 66. </<?php echo $heading_tag; ?>> 67. <div id="site-description"><?php bloginfo( 'description' ); ?></div> 68. 69. <?php 70. // Check if this is a post or page, if it has a thumbnail, and if it's a big one 71. if ( is_singular() && 72. has_post_thumbnail( $post->ID ) && 73. ( /* $src, $width, $height */ $image = wp_get_attachment_ image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) && 74. $image[1] >= HEADER_IMAGE_WIDTH ) : 75. // Houston, we have a new header image! 76. echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' ); 77. else : ?> 78. <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /> 79. <?php endif; ?> 80. </div><!-- #branding --> header.php(4/5) 69. <?php 70. // Check if this is a post or page, if it has a thumbnail, and if it's a big one 71. if ( is_singular() && 72. has_post_thumbnail( $post->ID ) && 73. ( /* $src, $width, $height */ $image = wp_get_attachment_ image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) && 74. $image[1] >= HEADER_IMAGE_WIDTH ) : 75. // Houston, we have a new header image! 76. echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' ); 77. else : ?> 78. <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /> 79. <?php endif; ?> 69. 70. 71. 72. 73. ( /* $src, $width, $height */ $image = wp_get_attachment_ 74. 75. 76. 77. 78. 79. ◆ ページによってヘッダ画像の変更
  35. 35. 35/111 81. 82. <div id="access" role="navigation"> 83. <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?> 84. <div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div> 85. <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?> 86. <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?> 87. </div><!-- #access --> 88. </div><!-- #masthead --> 89. </div><!-- #header --> 90. 91. <div id="main"> header.php(5/5) 83. <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?> 84. <div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div> <?php /* Allow screen readers / text browsers to skip the navigation <div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div> 85. <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?> 86. <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?> <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?> スクリーンリーダのスキップ対応 ◆ ナビゲーションメニュー表示
  36. 36. 36/111 <?php // Check if this is a post or page, if it has a thumbnail, and if it's a big one if ( is_singular() && has_post_thumbnail( $post->ID ) && ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_ thumbnail_id( $post->ID ), 'post-thumbnail' ) ) && $image[1] >= HEADER_IMAGE_WIDTH ) : // Houston, we have a new header image! echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' ); else : ?> <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /> <?php endif; ?> ページによってヘッダ画像の変更(1) if ( is_singular() && has_post_thumbnail( $post->ID ) && ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_ thumbnail_id( $post->ID ), 'post-thumbnail' ) ) && $image[1] >= HEADER_IMAGE_WIDTH ) : // Houston, we have a new header image! echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' ); if ( is_singular() && has_post_thumbnail( $post->ID ) && ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_ $image[1] >= HEADER_IMAGE_WIDTH ) : // Houston, we have a new header image! echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' ); 以下の条件がそろってる場合は、投稿サムネイル表示 ・単独ページ ・投稿サムネイル(アイキャッチ)画像が指定してある ・投稿サムネイル画像の幅が指定サイズ(940px)以上 else : ?> <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /> <?php endif; ?> else : ?> <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; <?php endif; ?> 条件がそろっていない場合は、管理画面で指定したカ スタムヘッダー画像を表示
  37. 37. 37/111 ページによってヘッダ画像の変更(2) ◆投稿サムネイル(アイキャッチ画像) 実はWP2.9から追加済み。 functions.phpに設定項目を追加しないと動きま せんでしたが、Twenty Ten では設定済みなので 何もしないでも使えます。 has_post_thumbnail(WP2.9 から追加 ) 投稿サムネイルがあるか確認するテンプレートタグ get_the_post_thumbnail(WP2.9 から追加 ) 投稿サムネイルを取得するテンプレートタグ
  38. 38. 38/111 ヘッダ画像の変更 (3) ◆カスタムヘッダー画像 WP3.0未満のデフォルトテーマでも使用できま したが、機能的には少なめでした。 Twenty Tenでは画像の選択・アップロードなど 機能が増えました。 header_image(WP2.1 から追加 ) ヘッダー画像を表示するテンプレートタグ
  39. 39. 39/111 ナビゲーションメニューの表示 wp_nav_menu(WP3.0 から追加 )  ナビゲーションメニューを表示するテンプレートタグ メニューが存在しない場合は、デフォルトで wp_page_ menu (個別ページを表示するテン プレートタグ)を呼び出します。 パラメータを変えることで、表示するメニューを 絞り込んだり、リンクの前後にテキストを追加し たりといろいろ表示が変えられます。
  40. 40. モジュールテンプレート 投稿一覧(ループ)を表示 する。 Gallery、Asides、その他 のカテゴリーで表示内容 を変えている。 loop.phploop.php
  41. 41. 41/111 01. <?php 02. /** 03. * The loop that displays posts. 04. * 05. * The loop displays the posts and the post content. See 06. * http://codex.wordpress.org/The_Loop to understand it and 07. * http://codex.wordpress.org/Template_Tags to understand 08. * the tags used in it. 09. * 10. * This can be overridden in child themes with loop.php or 11. * loop-template.php, where 'template' is the loop context 12. * requested by a template. For example, loop-index.php would 13. * be used if it exists and we ask for the loop with: 14. * <code>get_template_part( 'loop', 'index' );</code> 15. * 16. * @package WordPress 17. * @subpackage Twenty_Ten 18. * @since Twenty Ten 1.0 19. */ 20. ?> 21. loop.php(1/10)
  42. 42. 42/111 22. <?php /* Display navigation to next/previous pages when applicable */ ?> 23. <?php if ( $wp_query->max_num_pages > 1 ) : ?> 24. <div id="nav-above" class="navigation"> 25. <div class="nav-previous"><?php next_posts_link( __( '<span class="meta- nav">&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. 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; ?> <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span 1 ページ以上ある場合ナビゲーショ ンリンク表示(空タグ対策用?)
  43. 43. 43/111 41. <?php 42. /* Start the Loop. 43. * 44. * In Twenty Ten we use the same loop in multiple contexts. 45. * It is broken into three main parts: when we're displaying 46. * posts that are in the gallery category, when we're displaying 47. * posts in the asides category, and finally all other posts. 48. * 49. * Additionally, we sometimes check for whether we are on an 50. * archive page, a search page, etc., allowing for small differences 51. * in the loop on each template without actually duplicating 52. * the rest of the loop that is shared. 53. * 54. * Without further ado, the loop: 55. */ ?> 56. <?php while ( have_posts() ) : the_post(); ?> 57. 58. <?php /* How to display posts in the Gallery category. */ ?> 59. 60. <?php if ( in_category( _x('gallery', 'gallery category slug', 'twentyten') ) ) : ?> 61. <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 62. <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php loop.php(3/10) 41. <?php 42. /* Start the Loop. 43. * 44. * In Twenty Ten we use the same loop in multiple contexts. 45. * It is broken into three main parts: when we're displaying 46. * posts that are in the gallery category, when we're displaying 47. * posts in the asides category, and finally all other posts. 48. * 49. * Additionally, we sometimes check for whether we are on an 50. * archive page, a search page, etc., allowing for small differences 51. * in the loop on each template without actually duplicating 52. * the rest of the loop that is shared. 53. * 54. * Without further ado, the loop: 55. */ ?> 56. <?php while ( have_posts() ) : the_post(); ?> 41. 42. 43. 44. 45. 46. 47. 48. 49. 投稿ループ開始 カテゴリの種類によって表示方法変更 ・gallery ・asides ・それ以外のカテゴリー カテゴリー名かカテゴリースラッグ 名が gallery の場合の投稿表示開始 58. <?php /* How to display posts in the Gallery category. */ ?> 59. 60. <?php if ( in_category( _x('gallery', 'gallery category slug', 'twentyten') ) ) : ?> 58. 59. 60.
  44. 44. 44/111 printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2> 63. 64. <div class="entry-meta"> 65. <?php twentyten_posted_on(); ?> 66. </div><!-- .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"> loop.php(4/10) 65. <?php twentyten_posted_on(); ?> 日 付 と 投 稿 者 を 表 示 す る Twenty Ten の 独 自 関 数 functions.php(435-456 行) で定義 72. <?php 73. $images = get_children( array( 'post_parent' => $post->ID, 'post_ type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) ); 74. if ( $images ) : 75. $total_images = count( $images ); 76. $image = array_shift( $images ); 77. $image_img_tag = wp_get_attachment_image( $image->ID, 'thumbnail' ); 78. ?> 72. 73. $images = get_children( array( 'post_parent' => $post->ID, 'post_ 74. 75. 76. 77. 78. ?> 投稿と関連付けされている(投稿画面か らアップロードされた)画像情報取得
  45. 45. 45/111 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> loop.php(5/10) 80. <a class="size-thumbnail" href="<?php the_permalink(); ?>"><?php echo $image_img_tag; ?></a> 80. <a class="size-thumbnail" href="<?php the_permalink(); ?>"><?php echo $image_img_tag; ?></a> サムネイル画像表示 82. <p><em><?php printf( __( 'This 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 82. <p><em><?php printf( __( 'This gallery contains <a 83. 84. $total_images 投稿と関連付けされている 画像の枚数等表示
  46. 46. 46/111 95. <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="meta- sep">|</span> <span class="edit-link">', '</span>' ); ?> 96. </div><!-- .entry-utility --> 97. </div><!-- #post-## --> 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; ?> loop.php(6/10) カテゴリー名かカテゴリースラッグ 名が asides の場合の投稿表示開始 99. <?php /* How to display posts in the asides category */ ?> 100. 101. <?php elseif ( in_category( _x('asides', 'asides category slug', 'twentyten') ) ) : 99.
  47. 47. 47/111 113. 114. <div class="entry-utility"> 115. <?php twentyten_posted_on(); ?> 116. <span class="meta-sep">|</span> 117. <span class="comments-link"><?php comments_popup_link( __( '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(); ?> loop.php(7/10) 122. <?php /* How to display all other posts. */ ?> その他のカテゴリー の投稿表示開始
  48. 48. 48/111 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( ', ' ) ); ?> loop.php(8/10)
  49. 49. 49/111 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 ); ?> loop.php(9/10)
  50. 50. 50/111 165. 166. <?php endif; // This was the if statement that broke the loop into three parts based on categories. ?> 167. 168. <?php endwhile; // End the loop. Whew. ?> 169. 170. <?php /* Display navigation to next/previous pages when applicable */ ?> 171. <?php if ( $wp_query->max_num_pages > 1 ) : ?> 172. <div id="nav-below" class="navigation"> 173. <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&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; ?> loop.php(10/10) 166. <?php endif; // This was the if statement that broke the loop into three parts based on categories. ?> <?php endif; // This was the if statement that broke the loop into three parts based on categories. ?> 投稿表示の分岐終わり
  51. 51. 51/111 投稿一覧(ループ)は loop.php loop.php は以下の7つのファイルから読み込まれています。 • archive.php • author.php • category.php • index.php • loop.php • search.php • tag.php 今までのデフォルトテーマでは、投稿一覧(ループ)を表示す る部分は各ファイルにそれぞれ書かれていました。 Twenty Ten ではアーカイブ表示部分はすべてloop.phpにま とめられました。
  52. 52. モジュールテンプレート サイドバー(ウィジェッ トエリア)を表示する。 sidebar.phpsidebar.php
  53. 53. 53/111 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. 14. <?php 15. /* When we call the dynamic_sidebar() function, it'll spit out 16. * the widgets for that widget area. If it instead returns false, 17. * then the sidebar simply doesn't exist, so we'll hard-code in 18. * some default sidebar stuff just in case. 19. */ 20. if ( ! dynamic_sidebar( 'primary-widget-area' ) ) : ?> 21. sidebar.php(1/3) 14. <?php 15. /* When we call the dynamic_sidebar() function, it'll spit out 16. * the widgets for that widget area. If it instead returns false, 17. * then the sidebar simply doesn't exist, so we'll hard-code in 18. * some default sidebar stuff just in case. 19. */ 20. if ( ! dynamic_sidebar( 'primary-widget-area' ) ) : ?> 14. <?php 15. 16. 17. 18. 19. 20. if ( ! dynamic_sidebar( 'primary-widget-area' ) ) : ?> ◆ ウィジェット 1 の表示
  54. 54. 54/111 22. <li id="search" class="widget-container widget_search"> 23. <?php get_search_form(); ?> 24. </li> 25. 26. <li id="archives" class="widget-container"> 27. <h3 class="widget-title"><?php _e( 'Archives', 'twentyten' ); ?></h3> 28. <ul> 29. <?php wp_get_archives( 'type=monthly' ); ?> 30. </ul> 31. </li> 32. 33. <li id="meta" class="widget-container"> 34. <h3 class="widget-title"><?php _e( 'Meta', 'twentyten' ); ?></h3> 35. <ul> 36. <?php wp_register(); ?> 37. <li><?php wp_loginout(); ?></li> 38. <?php wp_meta(); ?> 39. </ul> 40. </li> 41. 42. <?php endif; // end primary widget area ?> 43. </ul> 22. <li id="search" class="widget-container widget_search"> 23. <?php get_search_form(); ?> 24. </li> 25. 26. <li id="archives" class="widget-container"> 27. <h3 class="widget-title"><?php _e( 'Archives', 'twentyten' ); ?></h3> 28. <ul> 29. <?php wp_get_archives( 'type=monthly' ); ?> 30. </ul> 31. </li> 32. 33. <li id="meta" class="widget-container"> 34. <h3 class="widget-title"><?php _e( 'Meta', 'twentyten' ); ?></h3> 35. <ul> 36. <?php wp_register(); ?> 37. <li><?php wp_loginout(); ?></li> 38. <?php wp_meta(); ?> 39. </ul> 40. </li>40. </li> sidebar.php(2/3) ウェジェット 1 が設定されてない場合の表示
  55. 55. 55/111 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; ?> sidebar.php(3/3) 46. <?php 47. // A second sidebar for widgets, just because. 48. if ( is_active_sidebar( 'secondary-widget-area' ) ) : ?> 49. 50. <div id="secondary" class="widget-area" role="complementary"> 51. <ul class="xoxo"> 52. <?php dynamic_sidebar( 'secondary-widget-area' ); ?> 53. </ul> 54. </div><!-- #secondary .widget-area --> 55. 56. <?php endif; ?> 46. <?php 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. ◆ ウィジェット 2 が設定されているは ウィジェット2を表示
  56. 56. 56/111 ウィジェットの表示 ウィジェット機能は、WP2.2から搭載されていま す。(WP3.0未満のデフォルトテーマでも使用できまし た) Tentry Tenではウィジェットエリアも増えて、使 いやすいようにカスタマイズされています。 dynamic_sidebar(WP2.2 から追加 )  ウィジェットを表示するテンプレートタグ
  57. 57. モジュールテンプレート フッター部(メインの終 了タグとフッターのウィ ジェット)からHTMLの 終わりまでを表示する。 footer.phpfooter.php sidebar-footer.php
  58. 58. 58/111 01. <?php 02. /** 03. * The template for displaying the footer. 04. * 05. * Contains the closing of the id=main div and all content 06. * after. Calls sidebar-footer.php for bottom widgets. 07. * 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"> 17. 18. <?php 19. /* A sidebar in the footer? Yep. You can can customize 20. * your footer with four columns of widgets. 21. */ 22. get_sidebar( 'footer' ); footer.php(1/3) 18. <?php 19. /* A sidebar in the footer? Yep. You can can customize 20. * your footer with four columns of widgets. 21. */ 22. get_sidebar( 'footer' ); 18. <?php sidebar-footer.php 読み込み
  59. 59. 59/111 23. ?> 24. 25. <div id="site-info"> 26. <a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"> 27. <?php bloginfo( 'name' ); ?> 28. </a> 29. </div><!-- #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 --> footer.php(2/3)
  60. 60. 60/111 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> footer.php(3/3) 50. wp_footer();50. フッタの終わりを通知するフック。プラグインや 独自関数で使用。これを消すと、正常に動作しな くなるプラグインやテーマが出てくる
  61. 61. モジュールテンプレート フッターのサイドバー (ウィジェットエリア)を 表示する。 sidebar-footer. php sidebar-footer.php
  62. 62. 62/111 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; sidebar-footer.php(1/3) 11. <?php 12. /* The footer widget area is triggered if any of the areas 13. * have widgets. So let's check that first. 14. * 15. * If none of the sidebars have widgets, then let's bail early. 16. */ 17. if ( ! is_active_sidebar( 'first-footer-widget-area' ) 18. && ! is_active_sidebar( 'second-footer-widget-area' ) 19. && ! is_active_sidebar( 'third-footer-widget-area' ) 20. && ! is_active_sidebar( 'fourth-footer-widget-area' ) 21. ) 22. return; フッターウィジェットエリアが全て設定 されていない場合は何もしない
  63. 63. 63/111 23. // If we get this far, we have widgets. Let do this. 24. ?> 25. 26. <div id="footer-widget-area" role="complementary"> 27. 28. <?php if ( is_active_sidebar( 'first-footer-widget-area' ) ) : ?> 29. <div id="first" class="widget-area"> 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; ?> sidebar-footer.php(2/3) 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; ?><?php endif; ?> フッターウィジェットエリア 1 が設定さ れている場合はウィジェット表示 以下2~ 4 まで同じ処理 36. <?php if ( is_active_sidebar( 'second-footer-widget-area' ) ) : ?> 37. <div id="second" class="widget-area"> 38. <ul class="xoxo"> 39. <?php dynamic_sidebar( 'second-footer-widget-area' ); ?> 40. </ul> 41. </div><!-- #second .widget-area --> 42. <?php endif; ?> 40. 41. 42. <?php endif; ?> フッターウィジェットエリア 2
  64. 64. 64/111 43. 44. <?php if ( is_active_sidebar( 'third-footer-widget-area' ) ) : ?> 45. <div id="third" class="widget-area"> 46. <ul class="xoxo"> 47. <?php dynamic_sidebar( 'third-footer-widget-area' ); ?> 48. </ul> 49. </div><!-- #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. 60. </div><!-- #footer-widget-area --> sidebar-footer.php(3/3) 44. <?php if ( is_active_sidebar( 'third-footer-widget-area' ) ) : ?> 45. <div id="third" class="widget-area"> 46. <ul class="xoxo"> 47. <?php dynamic_sidebar( 'third-footer-widget-area' ); ?> 48. </ul> 49. </div><!-- #third .widget-area --> 50. <?php endif; ?> 44. <?php if ( is_active_sidebar( 'third-footer-widget-area' ) ) : ?> 45. 46. 47. 48. 49. 50. 52. <?php if ( is_active_sidebar( 'fourth-footer-widget-area' ) ) : ?> 53. <div id="fourth" class="widget-area"> 54. <ul class="xoxo"> 55. <?php dynamic_sidebar( 'fourth-footer-widget-area' ); ?> 56. </ul> 57. </div><!-- #fourth .widget-area --> 58. <?php endif; ?> 52. 53. 54. 55. 56. 57. 58. <?php endif; ?> フッターウィジェットエリア 3 フッターウィジェットエリア 4
  65. 65. single.php header.php sidebar.php footer.php テンプレート 個別の投稿記事を表示 する。 single.php comments.php
  66. 66. 66/111 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> single.php (1/4)
  67. 67. 67/111 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 --> 28. 29. <div class="entry-content"> 30. <?php the_content(); ?> 31. <?php wp_link_pages( array( 'before' => '<div class="page- link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?> 32. </div><!-- .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 ?> 35. <div id="entry-author-info"> 36. <div id="author-avatar"> 37. <?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'twentyten_author_bio_avatar_size', 60 ) ); ?>apply_filters( 'twentyten_author_bio_avatar_size', 60 ) ); ?> アバター画像サイズを後から add_ filter で変えられるようにフック指定 single.php (2/4) 26. <?php twentyten_posted_on(); ?> 日付と投稿者を表示する Twenty Ten 独自関数 functions.php(435-456 行)で定義
  68. 68. 68/111 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 --> 49. <?php endif; ?> 50. 51. <div class="entry-utility"> 52. <?php twentyten_posted_in(); ?> 53. <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?> 54. </div><!-- .entry-utility --> 55. </div><!-- #post-## --> single.php (3/4) 52. <?php twentyten_posted_in(); ?> <div class="entry-utility"> 記事のカテゴリー、タグ、 パーマリンクを表示する Twenty Ten 独自関数 functions.php(458-483 行)で定義
  69. 69. 69/111 56. 57. <div id="nav-below" class="navigation"> 58. <div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '&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(); ?> 62. <?php comments_template( '', true ); ?>62. コメントテンプレート読み込み single.php (4/4)
  70. 70. モジュールテンプレート コメント一覧とコメント フォームを表示する。 comments.phpcomments.php
  71. 71. 71/111 01. <?php 02. /** 03. * The template for displaying Comments. 04. * 05. * The area of the page that contains both current comments 06. * and the comment form. The actual display of comments is 07. * handled by a callback to twentyten_comment which is 08. * located in the functions.php file. 09. * 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 --> comments.php (1/4)
  72. 72. 72/111 20. <?php 21. /* Stop the rest of comments.php from being processed, 22. * but don't kill the script entirely -- we still have 23. * to fully load the template. 24. */ 25. return; 26. endif; 27. ?> 28. 29. <?php 30. // You can start editing here -- including this comment! 31. ?> 32. 33. <?php if ( have_comments() ) : ?> 34. <h3 id="comments-title"><?php 35. printf( _n( 'One Response to %2$s', '%1$s Responses to %2$s', get_ comments_number(), 'twentyten' ), 36. number_format_i18n( get_comments_number() ), '<em>' . get_the_title() . '</em>' ); 37. ?></h3> 38. 39. <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // Are there comments to navigate through? ?> comments.php (2/4)
  73. 73. 73/111 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 48. /* Loop through and list the comments. Tell wp_list_comments() 49. * to use twentyten_comment() to format the comments. 50. * If you want to overload this in a child theme then you can 51. * define twentyten_comment() and that will be used instead. 52. * See twentyten_comment() in twentyten/functions.php for more. 53. */ 54. wp_list_comments( array( 'callback' => 'twentyten_comment' ) ); 55. ?> 56. </ol> 57. 58. <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // Are there comments to navigate through? ?> 59. <div class="navigation"> comments.php (3/4) 58. <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // Are there comments to navigate through? ?> 58. コメント一覧表示のカスタマイズ指定 functions.php(288-340 行)で定義 54. wp_list_comments( array( 'callback' => 'twentyten_comment' ) ); コメントのページが 2 ページ以上の場 合は前後のナビゲーション表示
  74. 74. 74/111 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 --> comments.php (4/4) 77. <?php comment_form(); ?> コメントフォームを読み込む
  75. 75. page.php header.php sidebar.php footer.php テンプレート 固定ページを表示する。 page.php comments.php
  76. 76. 76/111 01. <?php 02. /** 03. * The template for displaying all pages. 04. * 05. * This is the template that displays all pages by default. 06. * Please note that this is the WordPress construct of pages 07. * and that other 'pages' on your WordPress site will use a 08. * different template. 09. * 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"> page.php (1/3)
  77. 77. 77/111 19. 20. <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> 21. 22. <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 23. <?php if ( is_front_page() ) { ?> 24. <h2 class="entry-title"><?php the_title(); ?></h2> 25. <?php } else { ?> 26. <h1 class="entry-title"><?php the_title(); ?></h1> 27. <?php } ?> 28. 29. <div class="entry-content"> 30. <?php the_content(); ?> 31. <?php wp_link_pages( array( 'before' => '<div class="page- link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?> 32. <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?> 33. </div><!-- .entry-content --> 34. </div><!-- #post-## --> 35. 36. <?php comments_template( '', true ); ?> 23. <?php if ( is_front_page() ) { ?> 24. <h2 class="entry-title"><?php the_title(); ?></h2> 25. <?php } else { ?> 26. <h1 class="entry-title"><?php the_title(); ?></h1> 27. <?php } ?> フロントページに指定してあるページの場 合は h2 要素でページタイトル表示。それ 以外は h1 要素でページタイトル表示 page.php (1/3)
  78. 78. 78/111 37. 38. <?php endwhile; ?> 39. 40. </div><!-- #content --> 41. </div><!-- #container --> 42. 43. <?php get_sidebar(); ?> 44. <?php get_footer(); ?> page.php (1/3)
  79. 79. onecolumn-page.php header.php footer.php テンプレート サイドバーのない1カ ラムの固定ページを表 示する。 onecolumn- page.php comments.php
  80. 80. 80/111 01. <?php 02. /** 03. * Template Name: One column, no sidebar 04. * 05. * A custom page template without sidebar. 06. * 07. * The "Template Name:" bit above allows this to be selectable 08. * from a dropdown menu on the edit page screen. 09. * 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"> onecolumn-page.php (1/2)
  81. 81. 81/111 19. 20. <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> 21. 22. <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 23. <h1 class="entry-title"><?php the_title(); ?></h1> 24. <div class="entry-content"> 25. <?php the_content(); ?> 26. <?php wp_link_pages( array( 'before' => '<div class="page- link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?> 27. <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?> 28. </div><!-- .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(); ?> onecolumn-page.php (1/2)
  82. 82. テンプレート 検索結果一覧と検索 フォームを表示する。 search.php search.php header.php sidebar.php footer.php
  83. 83. 83/111 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> search.php (1/2)
  84. 84. 84/111 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(); ?> 22. get_template_part( 'loop', 'search' ); loop-search.php が同じテーマ内か子テーマに ある場合はそれを読み込む ない場合は、loop.php を読み込む 29. <?php get_search_form(); ?> search.php (1/2) 検索フォームを読み込む
  85. 85. テンプレート アーカイブページの汎 用テンプレート。 archive.php archive.php header.php sidebar.php footer.php
  86. 86. 86/111 01. <?php 02. /** 03. * The template for displaying Archive pages. 04. * 05. * Used to display archive-type pages if nothing more specific matches a query. 06. * For example, puts together date-based pages if no date.php file exists. 07. * 08. * Learn more: http://codex.wordpress.org/Template_Hierarchy 09. * 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. archive.php (1/3)
  87. 87. 87/111 20. <?php 21. /* Queue the first post, that way we know 22. * what date we're dealing with (if that is the case). 23. * 24. * We reset this later so we can run the loop 25. * properly with a call to rewind_posts(). 26. */ 27. if ( have_posts() ) 28. the_post(); 29. ?> 30. 31. <h1 class="page-title"> 32. <?php if ( is_day() ) : ?> 33. <?php printf( __( 'Daily Archives: <span>%s</span>', 'twentyten' ), get_the_date() ); ?> 34. <?php elseif ( is_month() ) : ?> 35. <?php printf( __( 'Monthly Archives: <span>%s</span>', 'twentyten' ), get_the_date('F Y') ); ?> 36. <?php elseif ( is_year() ) : ?> 37. <?php printf( __( 'Yearly Archives: <span>%s</span>', 'twentyten' ), get_the_date('Y') ); ?> 38. <?php else : ?> 39. <?php _e( 'Blog Archives', 'twentyten' ); ?> archive.php (1/3) 27. if ( have_posts() ) 28. the_post();the_post(); 投稿がある場合は、年月日を取得するために、 最初の投稿データをセットする。 32. <?php if ( is_day() ) : ?> 33. <?php printf( __( 'Daily Archives: <span>%s</span>', 'twentyten' ), get_the_date() ); ?> 34. <?php elseif ( is_month() ) : ?> 35. <?php printf( __( 'Monthly Archives: <span>%s</span>', 'twentyten' ), get_the_date('F Y') ); ?> 36. <?php elseif ( is_year() ) : ?> 37. <?php printf( __( 'Yearly Archives: <span>%s</span>', 'twentyten' ), get_the_date('Y') ); ?> 38. <?php else : ?> 39. <?php _e( 'Blog Archives', 'twentyten' ); ?> <?php printf( __( 'Daily Archives: <span>%s</span>', 'twentyten' ), <?php printf( __( 'Monthly Archives: <span>%s</span>', 'twentyten' ), <?php printf( __( 'Yearly Archives: <span>%s</span>', 'twentyten' ), <?php _e( 'Blog Archives', 'twentyten' ); ?> 年月日のページ別でタイトルを変える
  88. 88. 88/111 40. <?php endif; ?> 41. </h1> 42. 43. <?php 44. /* Since we called the_post() above, we need to 45. * rewind the loop back to the beginning that way 46. * we can run the loop properly, in full. 47. */ 48. rewind_posts(); 49. 50. /* Run the loop for the archives page to output the posts. 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 --> 58. </div><!-- #container --> 59. 60. <?php get_sidebar(); ?> 61. <?php get_footer(); ?> archive.php (1/3) 48. rewind_posts();48. rewind_posts(); loop-archive.php が同じテーマ内か子テー マにある場合はそれを読み込む。 ない場合は、loop.php を読み込む 54. get_template_part( 'loop', 'archive' ); 一度に the_post を呼んでいるため、ループカウンタのリセッ トをする
  89. 89. テンプレート カテゴリー別投稿記事 一覧(アーカイブ)ペー ジを表示する。 category.php category.php header.php sidebar.php footer.php
  90. 90. 90/111 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> category.php (1/2)
  91. 91. 91/111 18. <?php 19. $category_description = category_description(); 20. if ( ! empty( $category_description ) ) 21. echo '<div class="archive-meta">' . $category_description . '</ div>'; 22. 23. /* Run the loop for the category page to output the posts. 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 --> 31. </div><!-- #container --> 32. 33. <?php get_sidebar(); ?> 34. <?php get_footer(); ?> category.php (2/2) loop-category.php が同じテーマ内か子テー マにある場合はそれを読み込む。 ない場合は、loop.php を読み込む 27. get_template_part( 'loop', 'category' );get_template_part( 'loop', 'category' );
  92. 92. テンプレート タグ別投稿記事一覧 (アーカイブ)ページを 表示する。 tag.php tag.php header.php sidebar.php footer.php
  93. 93. 93/111 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> tag.php (1/2)
  94. 94. 94/111 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 --> 28. 29. <?php get_sidebar(); ?> 30. <?php get_footer(); ?> tag.php (2/2) loop-tag.php が同じテーマ内か子テーマに ある場合はそれを読み込む。 ない場合は、loop.php を読み込む 24. get_template_part( 'loop', 'tag' );
  95. 95. テンプレート 著者別投稿記事一覧 (アーカイブ)ページを 表示する。 auther.php auther.php header.php sidebar.php footer.php
  96. 96. 96/111 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. */ auther.php (1/3)
  97. 97. 97/111 23. if ( have_posts() ) 24. the_post(); 25. ?> 26. 27. <h1 class="page-title author"><?php printf( __( 'Author Archives: %s', 'twentyten' ), "<span class='vcard'><a class='url fn n' href='" . get_author_posts_url( get_the_author_meta( 'ID' ) ) . "' title='" . esc_attr( get_the_author() ) . "' rel='me'>" . get_the_author() . "</a></span>" ); ?></h1> 28. 29. <?php 30. // If a user has filled out their description, show a bio on their entries. 31. if ( get_the_author_meta( 'description' ) ) : ?> 32. <div id="entry-author-info"> 33. <div id="author-avatar"> 34. <?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'twentyten_author_bio_avatar_size', 60 ) ); ?> 35. </div><!-- #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 --> apply_filters( 'twentyten_author_bio_avatar_size', 60 ) ); ?>apply_filters( 'twentyten_author_bio_avatar_size', 60 ) ); ?> アバター画像サイズを後から add_filter で変えられるようにフック指定 auther.php (2/3) 23. if ( have_posts() ) 24. the_post(); 23. if ( have_posts() ) 24. the_post(); 投稿がある場合は、著者情報を取得するため に、最初の投稿データをセットする。
  98. 98. 98/111 41. <?php endif; ?> 42. 43. <?php 44. /* Since we called the_post() above, we need to 45. * rewind the loop back to the beginning that way 46. * we can run the loop properly, in full. 47. */ 48. rewind_posts(); 49. 50. /* Run the loop for the author archive page to output the authors posts 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 --> 58. 59. <?php get_sidebar(); ?> 60. <?php get_footer(); ?> loop-author.php が同じテーマ内か子テーマ にある場合はそれを読み込む。 ない場合は、loop.php を読み込む 54. get_template_part( 'loop', 'author' ); auther.php (3/3) 48. rewind_posts(); 一度に the_post を呼んでいるため、ループカウンタのリセッ トをする
  99. 99. テンプレート メディア(投稿に挿入す る画像等の添付ファイ ル)を表示する。 attachment. php attachment.php header.php comments.php footer.php
  100. 100. 100/111 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 */ attachment.php (1/7) 17. <?php if ( ! empty( $post->post_parent ) ) : ?> 親の投稿(メディアのリンク先)がある場合は、親の投稿の リンクを表示開始
  101. 101. 101/111 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> attachment.php (2/7)
  102. 102. 102/111 39. <?php 40. printf( __('<span class="%1$s">Published</span> %2$s', 'twentyten'), 41. 'meta-prep meta-prep-entry-date', 42. s p r i n t f ( ' < s p a n c l a s s = " e n t r y - d a t e " > < a b b r class="published" title="%1$s">%2$s</abbr></span>', 43. esc_attr( get_the_time() ), 44. get_the_date() 45. ) 46. ); 47. if ( wp_attachment_is_image() ) { 48. echo ' <span class="meta-sep">|</span> '; 49. $metadata = wp_get_attachment_metadata(); 50. printf( __( 'Full size is %s pixels', 'twentyten'), 51. sprintf( '<a href="%1$s" title="%2$s">%3$s &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. } attachment.php (3/7) 47. if ( wp_attachment_is_image() ) {47. if ( wp_attachment_is_image() ) { メディア(添付ファイル)が画像の場合 48. echo ' <span class="meta-sep">|</span> '; 49. $metadata = wp_get_attachment_metadata(); 50. printf( __( 'Full size is %s pixels', 'twentyten'), 51. sprintf( '<a href="%1$s" title="%2$s">%3$s &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. ); 48. echo ' <span class="meta-sep">|</span> '; 49. 50. 51. 52. 53. 54. 55. 56. 57. 画像ファイルへのリンクと画像サイズ表示
  103. 103. 103/111 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 attachment.php (4/7)
  104. 104. 104/111 78. // or get the URL of the first image attachment 79. $next_attachment_url = get_attachment_link( $attachments[ 0 ]->ID ); 80. } else { 81. // or, if there's only 1 image attachment, get the URL of the image 82. $next_attachment_url = wp_get_attachment_url(); 83. } 84. ?> 85. <p class="attachment"><a href="<?php echo $next_ attachment_url; ?>" title="<?php echo esc_attr( get_the_title() ); ?>" rel="attachment"><?php 86. $attachment_size = apply_filters( 'twentyten_attachment_ size', 900 ); 87. echo wp_get_attachment_image( $post->ID, array( $attachment_size, 9999 ) ); // filterable image width with, essentially, no limit for image height. 88. ?></a></p> 89. 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> attachment.php (5/7) 86. $attachment_size = apply_filters( 'twentyten_attachment_ size', 900 ); 86. $attachment_size = apply_filters( 'twentyten_attachment_ 87. echo wp_get_attachment_image( $post->ID, array( $attachment_size, 9999 ) ); // filterable image width with, essentially, no limit for image height. 87. echo wp_get_attachment_image( $post->ID, array( $attachment_size, 9999 ) ); // filterable image width with, essentially, no limit for image height. 添付画像を表示。配列で表示サイズの上限指 定(幅:$attachment_size、高さ:9999) 表示画像サイズを後から add_filter で変えられるようにフック指定
  105. 105. 105/111 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>' ); ?> attachment.php (6/7)
  106. 106. 106/111 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(); ?> attachment.php (7/7)
  107. 107. テンプレート 404エラー(ページが見 つからない)ページを表 示する。 404.php 404.php header.php sidebar.php footer.php
  108. 108. 108/111 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 --> 19. <?php get_search_form(); ?> 検索フォームを読み込む 404.php (1/2)
  109. 109. 109/111 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(); ?> 27. document.getElementById('s') && document.getElementById('s').focus();document.getElementById('s') && document.getElementById('s').focus(); ロ ー ド 時 に 検 索 フ ォ ー ム に フォーカス合わせる 404.php (2/2)
  110. 110. Twenty Ten は、 読みやすい&カスタマイズし やすいテーマです! 子テーマ作ってみたり、 新規テーマを作るときの参考 にしたりしてみてください。
  111. 111. ご静聴 ありがとうございました! 松下 寛子@hokori
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×