WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖！

WordPress3.0
新デフォルトテーマ
Twenty Ten
大解剖！
松下寛子@hokori

2010年8月21日
WordBench Nagoya
1/82

講師の人のこと
松下寛子@hokori
http://hokori.net/

社内SEという名のDTPもWEBもやるなんでも屋さんです。
お勤めは本日の会場でございます。
今日お話することになったのは、OSC Nagoya 2010の帰
り道でお喋りしてたらなんだかそういう流れになってし
まいましたとさ。

2/82

アジェンダ

• WordPress のテンプレートきほん
• Twenty Ten はどんなテーマ？
• Twenty Ten のテンプレートファイルを
読んでみましょう
• おまけ子テーマを作る
：

3/82

WordPress の
テンプレートきほん

4/82

WordPress のテーマ構造 (1)
WordPress テーマは、wp-content/themes/ の
中のサブディレクトリに存在します。
Twenty Ten のテーマは、wp-content/themes/
twentyten にあります。

WordPressのテーマは大まかに3種類のファイル
からなります。
1. style.css
2. functions.php
3. テンプレートファイル
5/82

WordPress のテーマ構造 (2)
1. style.css
スタイルシートファイルです。
テーマの詳細情報とレイアウトのスタイルを記載します。

2. functions.php
独自の処理や関数を定義できる、PHPソースファイルです。
テーマ内だけで使えるプラグインのようなことができます。

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

6/82

テンプレートファイル
テンプレートファイルは、ページ全体を出力するのに使われ
るファイルと、モジュールとして他のファイルから呼び出さ
れるファイルがあります。
ページ全体モジュール
• index.php • header.php
• home.php • sidebar.php
• single.php • footer.php
• page.php • loop.php
• category.php • comments.php
etc… etc…
7/82

WordPress のテンプレート階層 (1)
WordPressではテンプレート階層という、サイトにアクセス
したときに、テーマのどのテンプレート優先的に使うかとい
う順序が決められています。

例えば、カテゴリー一覧のページを開いたときは、以下の順番で
テンプレート探し、最初に見つかったファイルを使用します。
1. category-slug.php
2. category-ID.php
3. category.php
4. archive.php
5. index.php
8/82

WordPress のテンプレート階層 (2)

http://codex.wordpress.org/images/1/18/Template_Hierarchy.png
9/82

Twenty Ten
はどんなテーマ？

10/82

Twenty Ten のファイル群
404.php loop.php
archive.php onecolumn-page.php
attachment.php page.php
author.php rtl.css
category.php screenshot.png
comments.php search.php
editor-style-rtl.css sidebar-footer.php
editor-style.css sidebar.php
footer.php single.php
functions.php style.css
header.php tag.php
index.php /images
license.txt /languages
11/82

style.css にはこう書いてあります
WordPress のテーマ「2010」スタイリッシュで、
は、カスタマ
イズ可能で、簡潔で、読みやすく -- カスタムメニュー、ヘッ
ダー画像、背景でサイトを作れます。 Twenty Ten は6つのウィ
ジェットエリア (サイドバーに2つ、フッターに4つ) と、アイ
キャッチ画像 (ギャラリー投稿のサムネイルと、投稿やページ
のカスタムヘッダー画像) に対応しています。印刷用、管理のビ
ジュアルエディター用、 "Asides" と "Gallery" カテゴリー用の
スタイルシートが用意されています。また、サイドバーを取り
去った1カラムのページのテンプレートもあります。

12/82

WordPressP3.0 の新機能に対応
• カスタム背景
• カスタムメニュー
• ヴィジュアルエディタ用のスタイル

13/82

以前からある機能をより使いやすく
• ウェジェットエリアが増加
• カスタムヘッダーで画像の指定
• 投稿画面でアイキャッチ画像の指定
• ヘッダー画像がページによって変化
• カテゴリーの種類によって投稿一覧表示変更
• ドロップダウンメニュー
• 2カラムと1カラムのページテンプレート
• 印刷用スタイル
14/82

カスタム背景
管理画面で背景画像と背景色の指定ができます。

15/82

カスタムメニュー
管理画面でリンクページカテゴリーの混在したメニューが作
・・
成できます。

16/82

ヴィジュアルエディタ用のスタイル
editor-style.css を使って、ヴィジュアルエディタのレイア
ウトを調整できます。

編集画面

表示画面

17/82

ウィジェットエリアが増加
ウィジェットエリア1～2、フッターウィジェットエリア1～
4に増えました。

18/82

カスタムヘッダーで画像を指定
管理画面からカスタムヘッダー画像を指定できます。画像
のアップロードにも対応。

19/82

投稿画面でアイキャッチ画像の指定
投稿画面からアイキャッチ画像（投稿サムネイル）の指定が
できるようになりました。

20/82

ヘッダー画像がページによって変化
単独ページで特定サイズ以上のアイキャッチ画像を指定し
てある場合は、ヘッダー画像がアイキャッチ画像に切り替
わります。

21/82

カテゴリーの種類によって投稿一覧表示変更
・カテゴリー「asides」の投稿
・カテゴリー「gallery」の投稿
・その他のカテゴリーの投稿
それぞれ別々の適切なレイア
ウトスタイルで表示されます。

22/82

ドロップダウンメニュー
階層構造を持つメニューはドロップダウン表示されます。

23/82

2 カラムと 1 カラムのページテンプレート
サイドバーのある2カラムのページテンプレートと、記事だ
けの1カラムのページテンプレートが用意されています。

24/82

印刷用スタイル
style.cssに
@media print で指定
された印刷用のスタイ
ルが用意されていま
す。

25/82

Twenty Ten の
テンプレートファイルを
読んでみましょう

26/82

まずは index.php
index.phpは5つのファイルを読み込んでいます
index.php
header.php

loop.php

sidebar.php

footer.php

sidebar-footer.php

上から順にファイルを読んでいきます

27/82

index.php
メインのテンプレート

28/82

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.

29/82

index.php (2/2)
21. <?php
22. /* Run the loop to output the posts.
23. * If you want to overload this in a child theme then include a file
24. * called loop-index.php and that will be used instead.
25. */
26. get_template_part( 'loop', 'index' );
27. ?> ◆ テンプレートパーツの読み込み
28. </div>
29. </div>
30.
31. <?php get_sidebar(); ?>
32. <?php get_footer(); ?>

30/82

テンプレートパーツの読み込み (1)
get_template_part（WP3.0 から追加）
ヘッダフッタサイドバー以外のテンプレートパーツを読み
・・
込むテンプレートタグ

書式：
<?php get_template_part( slug, name ) ?>
slug ：一般テンプレートのスラッグ名
name ：特定テンプレートの名前（省略可）

slug-name.php がなければ、slug.php を読み込む

31/82

テンプレートパーツの読み込み (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

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

32/82

header.php
ヘッダ部分の
モジュールテンプレート

33/82

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

34/82

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. */

35/82

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

36/82

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>

37/82

header.php(5/5)
スクリーンリーダのスキップ対応
81.
82. <div id="access" role="navigation">
83. <?php /* Allow screen readers / text browsers to skip the navigation
menu and get right to the good stuff */ ?>
84. <div class="skip-link screen-reader-text"><a href="#content"
title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to
content', 'twentyten' ); ?></a></div>
85. <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu
falls back to wp_page_menu. The menu assiged to the primary position is the one
used. If none is assigned, the menu with the lowest ID is used. */ ?>
86. <?php wp_nav_menu( array( 'container_class' => 'menu-header',
'theme_location' => 'primary' ) ); ?>
87. </div>
88. </div>
89. </div> ◆ ナビゲーションメニュー表示
90.
91. <div id="main">

38/82

ページによってヘッダ画像の変更 (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; ?>

条件がそろっていない場合は、管理画面で指定したカ
スタムヘッダー画像を表示

39/82

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

40/82

ヘッダ画像の変更 (3)
◆カスタムヘッダー画像
WP3.0未満のデフォルトテーマでも使用できま
したが、機能的には少なめでした。
Twenty Tenでは画像の選択アップロードなど
・
機能が増えました。

header_image（WP2.1 から追加 )
ヘッダー画像を表示するテンプレートタグ

41/82

ナビゲーションメニューの表示
wp_nav_menu（WP3.0 から追加 )
　ナビゲーションメニューを表示するテンプレートタグ

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

42/82

loop.php
アーカイブ（投稿一覧）部分の

43/82

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. *
19. */
20. ?>
21.

44/82

1 ページ以上ある場合ナビゲーショ
loop.php(2/10) ンリンク表示（空タグ対策用？）
22. <?php /* Display navigation to next/previous pages when applicable */ ?>
23. <?php if ( $wp_query->max_num_pages > 1 ) : ?>
24. <div id="nav-above" class="navigation">
25. <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-
nav">←</span> Older posts', 'twentyten' ) ); ?></div>
26. <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span
class="meta-nav">→</span>', 'twentyten' ) ); ?></div>
27. </div>
28. <?php endif; ?>
29.
30. <?php /* If there are no posts to display, such as an empty archive page */ ?>
31. <?php if ( ! have_posts() ) : ?>
32. <div id="post-0" class="post error404 not-found">
33. <h1 class="entry-title"><?php _e( 'Not Found', 'twentyten' ); ?></h1>
34. <div class="entry-content">
35. <p><?php _e( 'Apologies, but no results were found for the requested
archive. Perhaps searching will help find a related post.', 'twentyten' ); ?></p>
36. <?php get_search_form(); ?>
37. </div>
38. </div>
39. <?php endif; ?>
40.

45/82

投稿ループ開始
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

46/82

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(); ?>
66. </div>
67.
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">

47/82

loop.php(5/10) サムネイル画像表示
80. <a class="size-thumbnail" href="<?php the_permalink();
?>"><?php echo $image_img_tag; ?></a>
81. </div>
82. <p><em><?php printf( __( 'This gallery contains <a
%1$s>%2$s photos</a>.', 'twentyten' ),
83. 'href="' . get_permalink() . '" title="' . sprintf( esc_attr__(
'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ) . '" rel="bookmark"',
84. $total_images
85. ); ?></em></p>
86. <?php endif; ?> 投稿と関連付けされている
87. <?php the_excerpt(); ?>
画像の枚数等表示
88. <?php endif; ?>
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>

48/82

loop.php(6/10)
95. <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="meta-
sep">|</span> <span class="edit-link">', '</span>' ); ?>
96. </div> カテゴリー名かカテゴリースラッグ
97. </div> 名が asides の場合の投稿表示開始
98.
99. <?php /* How to display posts in the asides category */ ?>
100.
101. <?php elseif ( in_category( _x('asides', 'asides category slug', 'twentyten') ) ) :
?>
103.
104. <?php if ( is_archive() || is_search() ) : // Display excerpts for archives and
search. ?>
105. <div class="entry-summary">
107. </div>
108. <?php else : ?>
110. <?php the_content( __( 'Continue reading <span class="meta-
nav">→</span>', 'twentyten' ) ); ?>
112. <?php endif; ?>

49/82

loop.php(7/10)
113.
119. </div>
120. </div> その他のカテゴリー
121.
の投稿表示開始
122. <?php /* How to display all other posts. */ ?>
123.
124. <?php else : ?>
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">

50/82

loop.php(8/10)
130. </div>
131.
132. <?php if ( is_archive() || is_search() ) : // Only display excerpts for archives
and search. ?>
133. <div class="entry-summary">
135. </div>
136. <?php else : ?>
138. <?php the_content( __( 'Continue reading <span class="meta-
nav">→</span>', 'twentyten' ) ); ?>
139. <?php wp_link_pages( array( 'before' => '<div class="page-link">' .
__( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
142.
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( ', ' ) ); ?>

51/82

loop.php(9/10)
147. </span>
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>
161. </div>
162. </div>
163.
164. <?php comments_template( '', true ); ?>

52/82

loop.php(10/10)
165.
166. <?php endif; // This was the if statement that broke the loop into three parts
based on categories. ?>
投稿表示の分岐終わり
167.
168. <?php endwhile; // End the loop. Whew. ?>
169.
170. <?php /* Display navigation to next/previous pages when applicable */ ?>
171. <?php if ( $wp_query->max_num_pages > 1 ) : ?>
172. <div id="nav-below" class="navigation">
173. <div class="nav-previous"><?php next_posts_link( __( '<span
class="meta-nav">←</span> Older posts', 'twentyten' ) ); ?></div>
174. <div class="nav-next"><?php previous_posts_link( __( 'Newer
posts <span class="meta-nav">→</span>', 'twentyten' ) ); ?></div>
175. </div>

53/82

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

sidebar.php
サイドバー部分の

55/82

sidebar.php(1/3)
01. <?php
02. /**
03. * The Sidebar containing the primary and secondary widget areas.
04. *
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.

56/82

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>

57/82

sidebar.php(3/3)
44. </div>
45.
46. <?php
47. // A second sidebar for widgets, just because.
48. if ( is_active_sidebar( 'secondary-widget-area' ) ) : ?>
49.
50. <div id="secondary" class="widget-area" role="complementary">
52. <?php dynamic_sidebar( 'secondary-widget-area' ); ?>
53. </ul>
54. </div>
55.
56. <?php endif; ?>

◆ ウィジェット 2 が設定されているは
ウィジェット２を表示

58/82

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

dynamic_sidebar（WP2.2 から追加 )
　ウィジェットを表示するテンプレートタグ

59/82

footer.php
フッター部分の

60/82

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. *
11. */
12. ?>
13. </div>
14.
15. <div id="footer" role="contentinfo">
16. <div id="colophon">
sidebar-footer.php 読み込み
17.
18. <?php
19. /* A sidebar in the footer? Yep. You can can customize
20. * your footer with four columns of widgets.
21. */
22. get_sidebar( 'footer' );

61/82

footer.php(2/3)
23. ?>
24.
25. <div id="site-info">
26. <a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr(
get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
27. <?php bloginfo( 'name' ); ?>
28. </a>
29. </div>
30.
31. <div id="site-generator">
32. <?php do_action( 'twentyten_credits' ); ?>
33. <a href="<?php echo esc_url( __('http://wordpress.org/', 'twentyten') );
?>"
34. title="<?php esc_attr_e('Semantic Personal Publishing Platform',
'twentyten'); ?>" rel="generator">
35. <?php printf( __('Proudly powered by %s.', 'twentyten'), 'WordPress'
); ?>
36. </a>
37. </div>
38.
39. </div>
40. </div>

62/82

footer.php(3/3)
41.
42. </div>
43.
44. <?php
45. /* Always have wp_footer() just before the closing </body>
46. * tag of your theme, or you will break many plugins, which
47. * generally use this hook to reference JavaScript files.
48. */
49.
50. wp_footer();
51. ?>
52. </body>
53. </html>

63/82

sidebar-footer.php
フッター部分の
ウィジェット表示用

64/82

sidebar-footer.php(1/3)
01. <?php
02. /**
03. * The Footer widget areas.
04. *
フッターウィジェットエリアが全て設定
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;

65/82

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

フッターウィジェットエリア 2
66/82

フッターウィジェットエリア 3
43.
44. <?php if ( is_active_sidebar( 'third-footer-widget-area' ) ) : ?>
45. <div id="third" class="widget-area">
47. <?php dynamic_sidebar( 'third-footer-widget-area' ); ?>
48. </ul>
49. </div>
50. <?php endif; ?>
51.
52. <?php if ( is_active_sidebar( 'fourth-footer-widget-area' ) ) : ?>
53. <div id="fourth" class="widget-area">
55. <?php dynamic_sidebar( 'fourth-footer-widget-area' ); ?>
56. </ul>
57. </div>
58. <?php endif; ?>
59. フッターウィジェットエリア 4
60. </div>

67/82

あとこれだけ残ってますが…。
archive.php attachment.php
category.php auther.php
tag.php 404.php
search.php comments.php
single.php functions.php
page.php
onecolumn-page.php

残りのファイルは
宿題ということで…。
68/82

おまけ：子テーマを作る！

69/82

子テーマとは？
WordPressの子テーマとは、
別のテーマ（親テーマ）の機能を継承し、
その機能にさらに機能を追加したり
その機能を調整したりすることのできる
テーマです。
http://wpdocs.sourceforge.jp/Child_Themes

70/82

子テーマの利点
テーマをコピーして作成
テーマAをコピーしてカスタマイズしたテーマBを作る
↓
テーマAがバージョンアップ！
→テーマBのバージョンアップどうしよう！めんどう！

子テーマを使って作成
テーマAを親テーマとして、子テーマのテーマBを作る
↓
テーマAがバージョンアップ！
→テーマAだけバージョンアップ、
テーマBはそのまま修正せず使える！
※ ただし、テーマAが大幅に変更された場合は修正が必要なことも…。

71/82

子テーマを作る (1)
親テーマと同じ階層に子テーマのディレクトリを
作ります。
その中にstyle.cssとscreenshot.pngを置きます。
wp-content
themes
twentyten

twentyten-child
style.css
screenshot.png

72/82

子テーマのstyle.cssを開いて、
Template行を追加して親テーマの指定をします。
/*
Theme Name: 子テーマ名
Theme URI: http://example.net/
Description: 子テーマの説明
Author: 子テーマ作った人名
Version: 1.0
Template: twentyten
Tags: hoge 親テーマのディレクトリ名
*/
※大文字小文字を区別します

73/82

上書き追加したいテンプレートファイルを
・
子テーマのディレクトリの下に置きます。
wp-content
themes
twentyten

twentyten-child
style.css
screenshot.png
loop-category.php
category.php
loop-index.php
74/82

後は普通のテーマと同じように、
管理画面からテーマの有効化。
子テーマの設定完了！
簡単！
ただし、注意事項がいくつかあります。

75/82

子テーマの functions.php(1)
親と同じファイル名のテンプレートファイルは上
書きされますが、functions.php だけは挙動が違
います。

子テーマのfunctions.php が読み込まれた後、
親テーマの functions.php が読み込まれます

親テーマの関数を上書きする場合は注意が必要！

76/82

子テーマの functions.php(2)
206. /**
207. * Get our wp_nav_menu() fallback, wp_page_menu(), to show a home link.
208. *
209. * To override this in a child theme, remove the filter and optionally add
210. * your own function tied to the wp_page_menu_args filter hook.
211. *
212. * @since Twenty Ten 1.0 Twenty Ten の functions.php には子テーマで
213. */ 関数を上書きしたい場合どうすればいいかちゃ
214. んと書いてあります。
function twentyten_page_menu_args( $args ) {

288. if ( ! function_exists( 'twentyten_comment' ) ) :
289. /**
290. * Template for comments and pingbacks.
291. *
292. * To override this walker in a child theme without modifying the comments template
293. * simply create your own twentyten_comment(), and that function will be used
instead.
294. *
295. * Used as a callback by wp_list_comments() for displaying the comments.

親テーマのfunctions.php をよく読みましょう！
77/82

テーマディレクトリのパス (1)
テーマディレクトリのURL 絶対パスの取得方法は、
・親テーマ
と子テーマで違います。

URL の出力
親テーマ
bloginfo('template_directory');
http://home.matu-win-local.com/wp/wp-content/themes/twentyten

子テーマ
bloginfo('stylesheet_directory')
http://example.net/wp/wp-content/themes/twentyten-child

78/82

テーマディレクトリのパス (2)
絶対パスを取得
親テーマ
定数 TEMPLATEPATH
：
/home/hoge/www/wp-content/themes/twentyten

子テーマ
定数 STYLESHEETPATH
：
/home/hoge/www/wp-content/themes/twentyten-child

79/82

参考サイト
：Version 3.0 - WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/Version_3.0

：WordPress バージョン3.0の特徴（新機能など）について（２）-
WordPress3.0の新デフォルトテーマ「Twenty Ten」| WordPress ワードプレス）
（コミュニティ
http://wp3.jp/2010/06/11/wordpress3-2/

：新テーマ: Twenty Ten - ブログ - WordPress.com
http://ja.blog.wordpress.com/2010/04/27/new-theme-twenty-ten/

：新デフォルトテーマ TwentyTen を理解しよう
http://www.slideshare.net/yorozu/about-twentyten-on-wordpress3

：子テーマ - WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/Child_Themes

：Duotone の子テーマを作ろう、そうしよう - Wordcamp Fukuoka 2010
http://www.slideshare.net/odysseygate/duotone-wordcamp-fukuoka-2010

80/82

WordCamp Nagoya 2010
http://nagoya2010.wordcamp.jp/
81/82

ご静聴
ありがとうございました

松下寛子@hokori
http://hokori.net/

82/82

WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖！

Recommended

Recommended

More Related Content

Featured

Featured (20)

WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖！