8bitodyssey.com » 3.0

特定のページにカスタム投稿タイプを表示する[WordPress 3.0]

おで — Sat, 25 Sep 2010 14:13:00 +0000

カスタム投稿タイプ(Custom Post Type)の導入と使い方 [WordPress 3.0] では、index.php にカスタム投稿タイプを表示してみました。では、特定のページにカスタム投稿タイプを表示するにはどうしたらよいのでしょうか？※誤解のないように、本記事での「ページ」は WordPress の投稿ではない「ページ（Pages）」を指しています。

ちょうど質問もあったので試してみました。

何もしていないページ

特定のページ”だけ”に表示する、というのが今回の目的なので、とりあえず、プロフィールのページに”のみ”表示してみることにします。上のスクリーンショットが何もしていない状態のプロフィールページです。

ページテンプレートの仕組みを理解する

ページの仕様では、ページのテンプレートは以下の順番で決まるようになっています（参考：ページテンプレート - Pages - WordPress Codex 日本語版）。

選択したカスタムWordPressページテンプレート

page.php

index.php

使用しているテーマにもよりますが、通常は 1 がなく、2 が使われている場合が多いでしょう。

例としてあげたスクリーンショットで使っているテーマ「Twenty Ten」においても、page.php が用意されており、プロフィールページもまた『デフォルトテンプレート』を使用していました。

特定のページにカスタム投稿タイプを表示するためには、カスタム投稿タイプを表示するカスタム WordPress ページテンプレートを作成し、特定のページに対して、そのカスタム WordPress ページテンプレートを適用してあげればよさそうです。

カスタム投稿タイプを表示するページテンプレートを作成する

では、カスタム投稿タイプを表示できるカスタム WordPress ページテンプレートを作成してみます。

カスタム WordPress ページテンプレートのルールとしては

[php][/php]

というテンプレート名の宣言があれば、あとはどのように書いてもよいのですが、ここでは説明を簡単にするために、Twenty Ten テーマに用意されていたカスタムページテンプレート「onecolumn-page.php」を書き換えてみます。

このファイルをコピーして、custom-onecolumn-page.php という名前にして、テーマディレクトリに置きます。

テンプレート名を

[php]のように書き換えて、

[php]

[/php]

の下に、index.php の際にも書いた、

[php] 'headline', 'posts_per_page' => 5 ) ); ?> have_posts() ) : $loop->the_post(); ?>

[/php]

を挿入します。

※このコードを page.php に挿入すれば、すべてのページにカスタム投稿タイプが表示されます。

カスタムページテンプレートを特定のページに適用する

最後に特定のページ、であるところの「プロフィールページ」にさきほど作成した「Custom One column, no sidebar」テンプレートを適用します。

カスタム投稿タイプを表示するようにしたテンプレートに変更

ページ属性のところにあるテンプレートを「デフォルトテンプレート」から「Custom One column, no sidebar」へと変更するだけです。

特定のページにカスタム投稿タイプを表示できる

プロフィールの上にカスタム投稿タイプが表示されました。「Custom One column, no sidebar」を適用しているページはプロフィールページだけなので、このページのみにカスタム投稿タイプが表示されます。

意外と簡単でしたね。

© 2012 Odysseygate.com This Feed is for personal non-commercial use only. If you are not reading this material in your news aggregator, the site you are looking at is guilty of copyright infringement. Please contact odysseygate@gmail.com so we can take legal action immediately.

鼻からカフェモカ。

Twenty Ten 1.1 の変更点とアップデートの注意点

おで — Sat, 24 Jul 2010 16:36:09 +0000

Twenty Ten がバージョンアップして、1.1 になりました。どこが変わったんだろう、と思っている方も多いかと思いますので、ソースを拾って変更点をまとめてみました。また、アップデートの際の注意点も合わせて書いてみたいと思います。

Twenty Ten 1.1 アップデートの注意点

変更点は長いので、まずはこちらから（笑）WordPress 3.0 日本語版を使っている場合、「ダッシュボード」の「アップデート」や、「テーマの管理」から Twenty Ten をアップデートすると、Twenty Ten テーマに関係するテキスト（メッセージ）の多くが英語になってしまいます。

これは、アップデートの際に、/wp-content/themes/twentyten/ 内のファイルはすべて削除されてしまうため、/wp-content/themes/twentyten/languages 内にある ja.mo ファイルもまた削除されてしまうためです。（これはテーマに限ったことではなく、プラグインでも同様です。プラグインでもともと用意されたものではない、画像などファイルをアップロードして利用するときは、プラグインディレクトリとは別のディレクトリに入れておくほうが良いでしょう。）

Twenty Ten 1.1 では、上の画像にも載っている、「テーマの管理」のところに表示されるテーマの説明文以外のメッセージは変更されていませんので、WordPress 3.0 日本語版にも入っている Twenty Ten 1.0 の ja.mo ファイルを /wp-content/themes/twentyten/languages にアップロードすれば問題ないと思います。

Twenty Ten 1.0 の ja.mo ファイルはこちらからダウンロードすることもできます。

Twenty Ten 1.1 の変更点

まとめ：wp_title の処理を functions.php から header.php に移植しています。残りはコードの整形が大半で、style.css の変更も含めて、大きく機能や表示に影響を及ぼす変更は見受けられません。

twentyten
├/images
├/languages/twentyten.pot
├404.php
├archive.php
├attachment.php
├author.php
├category.php
├comments.php
├editor-style.css
├editor-style-rtl.css
├footer.php
├functions.php
├header.php
├index.php
├license.txt
├loop.php
├onecolumn-page.php
├page.php
├rtl.css
├search.php
├sidebar.php
├sidebar-footer.php
├single.php
├style.css
└tag.php

/images

変更なし

/languages/twentyten.pot

テーマの管理で使われるテーマの説明文を以下の通り変更

[text firstline="421"]The 2010 default theme for WordPress.[/text]

↓

[text firstline="416"]The 2010 theme for WordPress is stylish, customizable, simple, and readable — make it yours with a custom menu, header image, and background. Twenty Ten supports six widgetized areas (two in the sidebar, four in the footer) and featured images (thumbnails for gallery posts and custom header images for posts and pages). It includes stylesheets for print and the admin Visual Editor, special styles for posts in the “Asides” and “Gallery” categories, and has an optional one-column page template that removes the sidebar. （訳：WordPress のテーマ「2010」は、スタイリッシュで、カスタマイズ可能で、簡潔で、読みやすく -- カスタムメニュー、ヘッダー画像、背景でサイトを作れます。Twenty Ten は6つのウィジェットエリア (サイドバーに2つ、フッターに4つ) と、アイキャッチ画像 (ギャラリー投稿のサムネイルと、投稿やページのカスタムヘッダー画像) に対応しています。印刷用、管理のビジュアルエディター用、"Asides" と "Gallery" カテゴリー用のスタイルシートが用意されています。また、サイドバーを取り去った1カラムのページのテンプレートもあります。） [/text]

404.php

変更なし

archive.php

変更なし

attachment.php

class 指定の追加

[html firstline="12"]

[/html]

↓

[html firstline="12"]

[/html]

親ページの ID が空でない場合に実行するよう、変更

[php firstline="17"]

← %s', 'twentyten' ), get_the_title( $post->post_parent ) ); ?>

[/php]

↓

[php firstline="17"] post_parent ) ) : ?>

← %s', 'twentyten' ), get_the_title( $post->post_parent ) ); ?>

[/php]

author.php

変更なし

category.php

変更なし

comments.php

変更なし

editor-style.css

プロパティの色指定が大文字から小文字に変更

[css firstline="42"]background-color: #E7E7E7;[/css]

↓

[css firstline="42"]background-color: #e7e7e7;[/css] [css firstline="98"]background: #FFFFCC;[/css]

↓

[css firstline="98"]background: #ffffcc;[/css] [css firstline="145"]color:#0066CC;[/css]

↓

[css firstline="145"]color:#0066cc;[/css] [css firstline="152"]color: #FF4B33;[/css]

↓

[css firstline="152"]color: #ff4b33;[/css]

editor-style-rtl.css

変更なし

footer.php

変更なし

functions.php

記事やページに合わせて wp_title を出し分けする処理をごっそり削除し、header.php に移植

[php firstline="207"] * Makes some changes to the tag, by filtering the output of wp_title(). * * If we have a site description and we're viewing the home page or a blog posts * page (when using a static front page), then we will add the site description. * * If we're viewing a search result, then we're going to recreate the title entirely. * We're going to add page numbers to all titles as well, to the middle of a search * result title and the end of all other titles. * * The site title also gets added to all titles. * * @since Twenty Ten 1.0 * * @param string $title Title generated by wp_title() * @param string $separator The separator passed to wp_title(). Twenty Ten uses a * vertical bar, "|", as a separator in header.php. * @return string The new title, ready for the <title> tag. */ function twentyten_filter_wp_title( $title, $separator ) { // Don't affect wp_title() calls in feeds. if ( is_feed() ) return $title; // The $paged global variable contains the page number of a listing of posts. // The $page global variable contains the page number of a single post that is paged. // We'll display whichever one applies, if we're not looking at the first page. global $paged, $page; if ( is_search() ) { // If we're a search, let's start over: $title = sprintf( __( 'Search results for %s', 'twentyten' ), '"' . get_search_query() . '"' ); // Add a page number if we're on page 2 or more: if ( $paged >= 2 ) $title .= " $separator " . sprintf( __( 'Page %s', 'twentyten' ), $paged ); // Add the site name to the end: $title .= " $separator " . get_bloginfo( 'name', 'display' ); // We're done. Let's send the new title back to wp_title(): return $title; } // Otherwise, let's start by adding the site name to the end: $title .= get_bloginfo( 'name', 'display' ); // If we have a site description and we're on the home/front page, add the description: $site_description = get_bloginfo( 'description', 'display' ); if ( $site_description && ( is_home() || is_front_page() ) ) $title .= " $separator " . $site_description; // Add a page number if necessary: if ( $paged >= 2 || $page >= 2 ) $title .= " $separator " . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) ); // Return the new title to wp_title(): return $title; } add_filter( 'wp_title', 'twentyten_filter_wp_title', 10, 2 ); /** [/php] <p style="text-align: center;">↓</p> [php firstline="207"]// 削除[/php] <h3><a id="tt_header">header.php</a></h3> <p>functions.php より wp_title 処理を移植</p> [php firstline="18"] * We filter the output of wp_title() a bit -- see （wp_title() の出力をフィルターします。詳しくは * twentyten_filter_wp_title() in functions.php. （functions.php の twentyten_filter_wp_title() を参照してください。 */ wp_title( '|', true, 'right' ); [/php] <p style="text-align: center;">↓</p> [php firstline="18"] */ global $page, $paged; wp_title( '|', true, 'right' ); // Add the blog name. （ブログ名を追加します） bloginfo( 'name' ); // Add the blog description for the home/front page. （ホーム/フロントページにブログの説明を追加します） $site_description = get_bloginfo( 'description', 'display' ); if ( $site_description && ( is_home() || is_front_page() ) ) echo " | $site_description"; // Add a page number if necessary: （必要であればページナンバーを追加します） if ( $paged >= 2 || $page >= 2 ) echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) ); [/php] <h3><a id="tt_index">index.php</a></h3> <p>変更なし</p> <h3><a id="tt_license">license.txt</a></h3> <p>変更なし</p> <h3><a id="tt_loop">loop.php</a></h3> <p>HTML 部分と PHP 部分のコードを整理してまとめた模様</p> [php firstline="71"] <?php else : ?> <div class="gallery-thumb"> <?php $images = get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) ); $total_images = count( $images ); $image = array_shift( $images ); $image_img_tag = wp_get_attachment_image( $image->ID, 'thumbnail' ); ?> <a class="size-thumbnail" href="<?php the_permalink(); ?>"><?php echo $image_img_tag; ?></a> </div> <p><em><?php printf( __( 'This gallery contains <a %1$s>%2$s photos</a>.', 'twentyten' ), 'href="' . get_permalink() . '" title="' . sprintf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ) . '" rel="bookmark"', $total_images ); ?></em></p> <?php the_excerpt(); ?> [/php] <p style="text-align: center;">↓</p> [php firstline="71"] <?php else : ?> <?php $images = get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) ); if ( $images ) : $total_images = count( $images ); $image = array_shift( $images ); $image_img_tag = wp_get_attachment_image( $image->ID, 'thumbnail' ); ?> <div class="gallery-thumb"> <a class="size-thumbnail" href="<?php the_permalink(); ?>"><?php echo $image_img_tag; ?></a> </div> <p><em><?php printf( __( 'This gallery contains <a %1$s>%2$s photos</a>.', 'twentyten' ), 'href="' . get_permalink() . '" title="' . sprintf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ) . '" rel="bookmark"', $total_images ); ?></em></p> <?php endif; ?> <?php the_excerpt(); ?> [/php] <h3><a id="tt_onecolumn-page">onecolumn-page.php</a></h3> <p>変更なし</p> <h3><a id="tt_page">page.php</a></h3> <p>どこが変わったのか、コアコミッター達のこだわりを感じてください（笑</p> [php firstline="6"] * Please note that this is the wordpress construct of pages * and that other 'pages' on your wordpress site will use a [/php] <p style="text-align: center;">↓</p> [php firstline="6"] * Please note that this is the WordPress construct of pages * and that other 'pages' on your WordPress site will use a [/php] <p>?>の背後に大量のスペースがあったものを削除</p> [php firstline="25"] <?php } else { ?> <h1 class="entry-title"><?php the_title(); ?></h1> <?php } ?> [/php] <p style="text-align: center;">↓</p> [php firstline="25"] <?php } else { ?> <h1 class="entry-title"><?php the_title(); ?></h1> <?php } ?> [/php] <h3><a id="tt_rtl">rtl.css</a></h3> <p>変更なし</p> <h3><a id="tt_search">search.php</a></h3> <p>変更なし</p> <h3><a id="tt_sidebar">sidebar.php</a></h3> <p>変更なし</p> <h3><a id="tt_sidebar-footer">sidebar-footer.php</a></h3> <p>変更なし</p> <h3><a id="tt_single">single.php</a></h3> <p>変更なし</p> <h3><a id="tt_style">style.css</a></h3> <p>@charset の削除</p> [css firstline="1"]@charset "utf-8";[/css] <p>↓</p> [css firstline="1"]/* 削除 */[/css] <p>width: 928px の指定を追加</p> [css firstline="383"] div.menu { font-size: 13px; margin-left: 12px; } [/css] <p>↓</p> [css firstline="377"] div.menu { font-size: 13px; margin-left: 12px; width: 928px; } [/css] <p>clear: both; の指定を追加</p> [css firstline="456"] #main { overflow: hidden; padding: 40px 0 0 0; } [/css] <p>↓</p> [css firstline="451"] #main { clear: both; overflow: hidden; padding: 40px 0 0 0; } [/css] <p>class 指定の変更</p> [css firstline="663"] .page .edit-link { clear: both; display: block; } [/css] <p>↓</p> [css firstline="659"] body.page .edit-link { clear: both; display: block; } [/css] <p>指定の丸ごと削除</p> [css firstline="737"] .category-gallery { margin-bottom: 48px; } .category-gallery h2 { margin-top: 10px; } .category-gallery .entry-meta { } [/css] <p>↓</p> [css firstline="729"] /* 削除 */ [/css] [css firstline="754"] .home #content .category-gallery .entry-content p { display: inline; } [/css] <p>↓</p> [css firstline="739"] /* 削除 */ [/css] [css firstline="765"] .entry-content .attachment img { margin-bottom: 0; } [/css] <p>↓</p> [css firstline="746"] /* 削除 */ [/css] <p>width、height の指定追加</p> [css firstline="784"] #content img { margin: 0; max-width: 640px; } [/css] <p>↓</p> [css firstline="762"] #content img { margin: 0; height: auto; max-width: 640px; width: auto; } [/css] <p>margin 指定の変更</p> [css firstline="835"] #content .gallery { margin: auto; } [/css] <p>↓</p> [css firstline="815"] #content .gallery { margin: 0 auto 18px; } [/css] <p>プロパティ指定の追加（添付画像がセンタリングされるように）</p> [css firstline="861"] [/css] <p>↓</p> [css firstline="841"] #content .attachment img { /* single attachment images should be centered */ display: block; margin: 0 auto; } [/css] <p>上記以外の指定についても大量に変更されていますが、レイアウトやスタイルに影響するものはありません。以下のいずれかに該当するようになっていますので、例には初出の行を例として表示しておきます。</p> <p>=の追加</p> [css firstline="12"]/* Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html [/css] <p>↓</p> [css firstline="11"]/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html [/css] <p>プロパティの指定をアルファベット順に変更</p> [css firstline="24"] margin: 0; padding: 0; border: 0; vertical-align: baseline; background: transparent; [/css] <p>↓</p> [css firstline="23"] background: transparent; border: 0; margin: 0; padding: 0; vertical-align: baseline; [/css] <p>プロパティの指定をフォーマット（改行）</p> [css firstline="55"] a img { border: none; } [/css] <p>↓</p> [css firstline="54"] a img { border: none; } [/css] <p>見出しの追加</p> [css firstline="55"] [/css] <p>↓</p> [css firstline="58"] /* =Layout -------------------------------------------------------------- */ [/css] <p>スペースを削除</p> [css firstline="202"] /* Main global 'theme' and typographic styles */ [/css] <p>↓</p> [css firstline="200"] /* Main global 'theme' and typographic styles */ [/css] <p>プロパティをフォーマット（:の後にスペースを挿入）</p> [css firstline="235"] list-style:upper-alpha; [/css] <p>↓</p> [css firstline="232"] list-style: upper-alpha; [/css] <p>プロパティの色指定が大文字から小文字に変更</p> [css firstline="318"] color:#0066CC; [/css] <p>↓</p> [css firstline="314"] color: #0066cc; [/css] <p>プロパティの指定をアルファベット順に変更。但しサイズだけは width→height の順</p> [css firstline="423"] #access ul ul a { background:#333; height:auto; line-height:1em; padding:10px; width: 160px; } #access li:hover > a, #access ul ul :hover > a { color:#fff; background:#333; } [/css] <p>↓</p> [css firstline="418"] #access ul ul a { background: #333; line-height: 1em; padding: 10px; width: 160px; height: auto; } #access li:hover > a, #access ul ul :hover > a { background: #333; color: #fff; } [/css] <h3><a id="tt_tag">tag.php</a></h3> <p>変更なし</p><p>© 2012 <a href="http://www.odysseygate.com/" title="Odysseygate.com">Odysseygate.com</a> This Feed is for personal non-commercial use only. If you are not reading this material in your news aggregator, the site you are looking at is guilty of copyright infringement. Please contact odysseygate@gmail.com so we can take legal action immediately.</p><p>鼻からカフェモカ。</p> </article> <article> <h1>Twenty Ten テーマのコード内の説明を日本語化しました</h1> <p>おで — Sat, 17 Jul 2010 05:00:00 +0000</p> <p></p> <p></a></p> <p>WordPress 3.0 より『Twenty Ten』がデフォルトテーマとなりましたが、<a href="http://ja.wordpress.org/2010/06/22/wordpress-30-ja/" target="_blank">WordPress 3.0 日本語版</a>でもソースコードに併記されている説明は諸々の理由で英語のままとなっています。</p> <p>『Twenty Ten』は 3.0 の特徴となる機能がいくつも盛り込まれているのに加え、WordPress のテーマを理解する上でとても良いお手本となるものだと思いますので、より理解が深まることも願って、日本語化をしてみました。</p> <p>（ただし例によって突貫工事＋眠気と闘いながら訳しましたので、若干 WordPress 日本語版と訳語がずれている箇所がありそうな気がします。もし見つけたらこっそり教えてくださいね^^;）</p> <span id="more-1651"></span> <h2>翻訳ファイル名一覧</h2> <p><strong>twentyten</strong><br /> ├ <a href="#tt_404">404.php</a> <br /> ├<a href="#tt_archive">archive.php</a> <br /> ├<a href="#tt_attachment">attachment.php</a></br /> ├<a href="#tt_author">author.php</a></br /> ├<a href="#tt_category">category.php</a></br /> ├<a href="#tt_comments">comments.php</a></br /> ├<a href="#tt_editor-style">editor-style.css</a></br /> ├<a href="#tt_editor-style-rtl">editor-style-rtl.css</a></br /> ├<a href="#tt_footer">footer.php</a></br /> ├<a href="#tt_functions">functions.php</a></br /> ├<a href="#tt_header">header.php</a></br /> ├<a href="#tt_index">index.php</a></br /> ├<a href="#tt_license">license.txt</a></br /> ├<a href="#tt_loop">loop.php</a></br /> ├<a href="#tt_onecolumn-page">onecolumn-page.php</a></br /> ├<a href="#tt_page">page.php</a></br /> ├<a href="#tt_rtl">rtl.css</a></br /> ├<a href="#tt_search">search.php</a></br /> ├<a href="#tt_sidebar">sidebar.php</a></br /> ├<a href="#tt_sidebar-footer">sidebar-footer.php</a></br /> ├<a href="#tt_single">single.php</a></br /> ├<a href="#tt_style">style.css</a></br /> └<a href="#tt_tag">tag.php</a></br /> </p> <h3><a id="tt_404">404.php</a></h3> [php] <?php /** * 404ページ（見つかりません) を表示するためのテンプレート。 * * @package WordPress * @subpackage Twenty_Ten * @since Twenty Ten 1.0 */ get_header(); ?> <div id="container"> <div id="content" role="main"> <div id="post-0" class="post error404 not-found"> <h1 class="entry-title"><?php _e( 'Not Found', 'twentyten' ); ?></h1> <div class="entry-content"> <p><?php _e( 'Apologies, but the page you requested could not be found. Perhaps searching will help.', 'twentyten' ); ?></p> <?php get_search_form(); ?> </div> </div> </div> </div> <script type="text/javascript"> // ロード後に検索フィールドにフォーカスさせる document.getElementById('s') && document.getElementById('s').focus(); </script> <?php get_footer(); ?> [/php] <h3><a id="tt_archive">archive.php</a></h3> [php] <?php /** * アーカイブページを表示するためのテンプレート。 * * 問合せに一致するものが特にない場合にアーカイブページを表示するのに使用されます。 * 例えば、date.php ファイルがない場合に日付ベースのページとなります。 * * 詳しくは: http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4 * * @package WordPress * @subpackage Twenty_Ten * @since Twenty Ten 1.0 */ get_header(); ?> <div id="container"> <div id="content" role="main"> <?php /* 最初の記事を待ち行列に並べます。こうして、 * 扱う時間がいつであるのか分かるのです。 * * rewind_posts() へのコールで適切に * ループを走らせられるように、後でこれをリセットします。 */ if ( have_posts() ) the_post(); ?> <h1 class="page-title"> <?php if ( is_day() ) : ?> <?php printf( __( 'Daily Archives: <span>%s</span>', 'twentyten' ), get_the_date() ); ?> <?php elseif ( is_month() ) : ?> <?php printf( __( 'Monthly Archives: <span>%s</span>', 'twentyten' ), get_the_date('F Y') ); ?> <?php elseif ( is_year() ) : ?> <?php printf( __( 'Yearly Archives: <span>%s</span>', 'twentyten' ), get_the_date('Y') ); ?> <?php else : ?> <?php _e( 'Blog Archives', 'twentyten' ); ?> <?php endif; ?> </h1> <?php /* 先に the_post() を呼んでいるので、 * 適切に全部のループを走らせられるように、 * ループを最初まで巻き戻す必要があります。 */ rewind_posts(); /* アーカイブページの記事を出力するためにループを走らせます。 * もし、子テーマでこれを上書きするなら、 * loop-archives.php ファイルを含めると、そのファイルが代わりに使われます。 */ get_template_part( 'loop', 'archive' ); ?> </div> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> [/php] <h3><a id="tt_attachment">attachment.php</a></h3> [php] <?php /** * 添付ファイルを表示するためのテンプレート。 * * @package WordPress * @subpackage Twenty_Ten * @since Twenty Ten 1.0 */ get_header(); ?> <div id="container"> <div id="content" role="main"> <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <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 /* 翻訳する人へ: %s には親記事のタイトルが入る */ printf( __( '<span class="meta-nav">←</span> %s', 'twentyten' ), get_the_title( $post->post_parent ) ); ?></a></p> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <h2 class="entry-title"><?php the_title(); ?></h2> <div class="entry-meta"> <?php printf(__('<span class="%1$s">By</span> %2$s', 'twentyten'), 'meta-prep meta-prep-author', sprintf( '<span class="author vcard"><a class="url fn n" href="%1$s" title="%2$s">%3$s</a></span>', get_author_posts_url( get_the_author_meta( 'ID' ) ), sprintf( esc_attr__( 'View all posts by %s', 'twentyten' ), get_the_author() ), get_the_author() ) ); ?> <span class="meta-sep">|</span> <?php printf( __('<span class="%1$s">Published</span> %2$s', 'twentyten'), 'meta-prep meta-prep-entry-date', sprintf( '<span class="entry-date"><abbr class="published" title="%1$s">%2$s</abbr></span>', esc_attr( get_the_time() ), get_the_date() ) ); if ( wp_attachment_is_image() ) { echo ' <span class="meta-sep">|</span> '; $metadata = wp_get_attachment_metadata(); printf( __( 'Full size is %s pixels', 'twentyten'), sprintf( '<a href="%1$s" title="%2$s">%3$s × %4$s</a>', wp_get_attachment_url(), esc_attr( __('Link to full-size image', 'twentyten') ), $metadata['width'], $metadata['height'] ) ); } ?> <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="meta-sep">|</span> <span class="edit-link">', '</span>' ); ?> </div> <div class="entry-content"> <div class="entry-attachment"> <?php if ( wp_attachment_is_image() ) : $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' ) ) ); foreach ( $attachments as $k => $attachment ) { if ( $attachment->ID == $post->ID ) break; } $k++; // ギャラリーにひとつ以上の添付画像がある場合 if ( count( $attachments ) > 1 ) { if ( isset( $attachments[ $k ] ) ) // 次の添付画像の URL を取得します $next_attachment_url = get_attachment_link( $attachments[ $k ]->ID ); else // あるいは最初の添付画像の URL を取得します $next_attachment_url = get_attachment_link( $attachments[ 0 ]->ID ); } else { // あるいは、添付画像がたったひとつの場合、その添付画像の URL を取得します $next_attachment_url = wp_get_attachment_url(); } ?> <p class="attachment"><a href="<?php echo $next_attachment_url; ?>" title="<?php echo esc_attr( get_the_title() ); ?>" rel="attachment"><?php $attachment_size = apply_filters( 'twentyten_attachment_size', 900 ); echo wp_get_attachment_image( $post->ID, array( $attachment_size, 9999 ) ); // 基本的に画像の高さは制限せず、画像の長さをフィルターで変更できます。 ?></a></p> <div id="nav-below" class="navigation"> <div class="nav-previous"><?php previous_image_link( false ); ?></div> <div class="nav-next"><?php next_image_link( false ); ?></div> </div> <?php else : ?> <a href="<?php echo wp_get_attachment_url(); ?>" title="<?php echo esc_attr( get_the_title() ); ?>" rel="attachment"><?php echo basename( get_permalink() ); ?></a> <?php endif; ?> </div> <div class="entry-caption"><?php if ( !empty( $post->post_excerpt ) ) the_excerpt(); ?></div> <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentyten' ) ); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?> </div> <div class="entry-utility"> <?php twentyten_posted_in(); ?> <?php edit_post_link( __( 'Edit', 'twentyten' ), ' <span class="edit-link">', '</span>' ); ?> </div> </div> <?php comments_template(); ?> <?php endwhile; ?> </div> </div> <?php get_footer(); ?> [/php] <h3><a id="tt_author">author.php</a></h3> [php] <?php /** * 作者別アーカイブページを表示するテンプレート。 * * @package WordPress * @subpackage Twenty_Ten * @since Twenty Ten 1.0 */ get_header(); ?> <div id="container"> <div id="content" role="main"> <?php /* 最初の記事を待ち行列に並べます。こうして、 * 作者の名前、URL、説明、アバターなどを知ろうとするときに * 作者が誰であるか分かるのです。 * * rewind_posts() へのコールで適切に * ループを走らせられるように、後でこれをリセットします。 */ if ( have_posts() ) the_post(); ?> <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> <?php // ユーザが説明を記入している場合、エントリーに略歴を表示します。 if ( get_the_author_meta( 'description' ) ) : ?> <div id="entry-author-info"> <div id="author-avatar"> <?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'twentyten_author_bio_avatar_size', 60 ) ); ?> </div> <div id="author-description"> <h2><?php printf( __( 'About %s', 'twentyten' ), get_the_author() ); ?></h2> <?php the_author_meta( 'description' ); ?> </div> </div> <?php endif; ?> <?php /* 先に the_post() を呼んでいるので、 * 適切に全部のループを走らせられるように、 * ループを最初まで巻き戻す必要があります。 */ rewind_posts(); /* 作者のアーカイブページの記事を出力するためにループを走らせます。 * もし、子テーマでこれを上書きするなら、 * loop-author.php ファイルを含めると、そのファイルが代わりに使われます。 */ get_template_part( 'loop', 'author' ); ?> </div> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> [/php] <h3><a id="tt_category">category.php</a></h3> [php] <?php /** * カテゴリー別アーカイブページを表示するテンプレート。 * * @package WordPress * @subpackage Twenty_Ten * @since Twenty Ten 1.0 */ get_header(); ?> <div id="container"> <div id="content" role="main"> <h1 class="page-title"><?php printf( __( 'Category Archives: %s', 'twentyten' ), '<span>' . single_cat_title( '', false ) . '</span>' ); ?></h1> <?php $category_description = category_description(); if ( ! empty( $category_description ) ) echo '<div class="archive-meta">' . $category_description . '</div>'; /* カテゴリーページの記事を出力するためにループを走らせます。 * もし、子テーマでこれを上書きするなら、 * loop-category.php ファイルを含めると、そのファイルが代わりに使われます。 */ get_template_part( 'loop', 'category' ); ?> </div> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> [/php] <h3><a id="tt_comments">comments.php</a></h3> [php] <?php /** * コメントを表示するためのテンプレート。 * * いまあるコメントとコメントフォームの両方を含むページのエリア。 * 実際のコメント表示は * functions.php ファイルにある twentyten_comment への呼び戻し * によって処理されます。 * * @package WordPress * @subpackage Twenty_Ten * @since Twenty Ten 1.0 */ ?> <div id="comments"> <?php if ( post_password_required() ) : ?> <p class="nopassword"><?php _e( 'This post is password protected. Enter the password to view any comments.', 'twentyten' ); ?></p> </div> <?php /* comments.php の残りが処理されるのを止めます。 * でないと、スクリプトを丸ごと殺せず、つまり依然として * テンプレートを完全に読み込まなくてはならないからです。 */ return; endif; ?> <?php // ここは編集することができます。このコメントを含めて！ ?> <?php if ( have_comments() ) : ?> <h3 id="comments-title"><?php printf( _n( 'One Response to %2$s', '%1$s Responses to %2$s', get_comments_number(), 'twentyten' ), number_format_i18n( get_comments_number() ), '<em>' . get_the_title() . '</em>' ); ?></h3> <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // 検索するためにコメントがありますか？ ?> <div class="navigation"> <div class="nav-previous"><?php previous_comments_link( __( '<span class="meta-nav">←</span> Older Comments', 'twentyten' ) ); ?></div> <div class="nav-next"><?php next_comments_link( __( 'Newer Comments <span class="meta-nav">→</span>', 'twentyten' ) ); ?></div> </div>  <?php endif; // コメントナビゲージョンのためのチェック ?> <ol class="commentlist"> <?php /* コメントをループし、並べます。コメントをフォーマットするため * wp_list_comments() に twentyten_comment() を使うようにさせます。 * 子テーマでこれを上書きしたいなら、 * twentyten_comment() を定義すると、それが代わりに使われます。 * 詳しくは、twentyten/functions.php の twentyten_comment() を見てください。 */ wp_list_comments( array( 'callback' => 'twentyten_comment' ) ); ?> </ol> <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // 検索するためにコメントがありますか？ ?> <div class="navigation"> <div class="nav-previous"><?php previous_comments_link( __( '<span class="meta-nav">←</span> Older Comments', 'twentyten' ) ); ?></div> <div class="nav-next"><?php next_comments_link( __( 'Newer Comments <span class="meta-nav">→</span>', 'twentyten' ) ); ?></div> </div> <?php endif; // コメントナビゲージョンのためのチェック ?> <?php else : // あるいは、コメントがない場合: /* コメントが全くない場合や、コメントが閉じられている場合、 * ささやかな注釈を残しましょう、ですよね？ */ if ( ! comments_open() ) : ?> <p class="nocomments"><?php _e( 'Comments are closed.', 'twentyten' ); ?></p> <?php endif; // comments_open() の最後 ?> <?php endif; // have_comments() の最後 ?> <?php comment_form(); ?> </div> [/php] <h3><a id="tt_editor-style">editor-style.css</a></h3> [css] /* Theme Name: Twenty Ten */ /* TinyMCE エディターにスタイルを設定するのに使用される。 */ html .mceContentBody { max-width:640px; } * { font-family: Georgia, "Bitstream Charter", serif; color: #444; line-height: 1.5; } p, dl, td, th, ul, ol, blockquote { font-size: 16px; } tr th, thead th, label, tr th, thead th { font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif; } pre { font-family: "Courier 10 Pitch", Courier, monospace; } code, code var { font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; } body, input, textarea { font-size: 12px; line-height: 18px; } hr { background-color: #E7E7E7; border:0; height: 1px; margin-bottom: 18px; clear:both; } /* テキスト要素 */ p { margin-bottom: 18px; } ul { list-style: square; margin: 0 0 18px 1.5em; } ol { list-style: decimal; margin: 0 0 18px 1.5em; } ol ol { list-style:upper-alpha; } ol ol ol { list-style:lower-roman; } ol ol ol ol { list-style:lower-alpha; } ul ul, ol ol, ul ol, ol ul { margin-bottom:0; } dl { margin:0 0 24px 0; } dt { font-weight: bold; } dd { margin-bottom: 18px; } strong { font-weight: bold; color: #000; } cite, em, i { font-style: italic; border: none; } big { font-size: 131.25%; } ins { background: #FFFFCC; border: none; color: #333; } del { text-decoration: line-through; color: #555; } blockquote { font-style: italic; padding: 0 3em; } blockquote cite, blockquote em, blockquote i { font-style: normal; } pre { background: #f7f7f7; color: #222; line-height: 18px; margin-bottom: 18px; padding: 1.5em; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } ins { text-decoration: none; } sup, sub { height: 0; line-height: 1; vertical-align: baseline; position: relative; font-size: 10px; } sup { bottom: 1ex; } sub { top: .5ex; } a:link { color:#0066CC; } a:visited { color:#743399; } a:active, a:hover { color: #FF4B33; } p, ul, ol, dd, pre, hr { margin-bottom:24px; } ul ul, ol ol, ul ol, ol ul { margin-bottom:0; } pre, kbd, tt, var { font-size: 15px; line-height: 21px; } code { font-size: 13px; } strong, b, dt, th { color: #000; } h1, h2, h3, h4, h5, h6 { color: #000; margin: 0 0 20px 0; line-height: 1.5em; font-weight: normal; } h1 { font-size: 2.4em; } h2 { font-size: 1.8em; } h3 { font-size: 1.4em; } h4 { font-size: 1.2em; } h5 { font-size: 1em; } h6 { font-size: 0.9em; } table { border: 1px solid #e7e7e7 !important; text-align: left; margin: 0 -1px 24px 0; width: 100%; border-collapse: collapse; border-spacing: 0; } tr th, thead th { border: none !important; color: #888; font-size: 12px; font-weight: bold; line-height: 18px; padding: 9px 24px; } tr td { border: none !important; border-top: 1px solid #e7e7e7 !important; padding: 6px 24px; } img { margin: 0; max-width: 640px; } .alignleft, img.alignleft { display: inline; float: left; margin-right: 24px; margin-top: 4px; } .alignright, img.alignright { display: inline; float: right; margin-left: 24px; margin-top: 4px; } .aligncenter, img.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } img.alignleft, img.alignright, img.aligncenter { margin-bottom: 12px; } .wp-caption { border: none; background: #f1f1f1; color: #888; font-size: 12px; line-height: 18px; text-align: center; margin-bottom: 20px; padding: 4px; -moz-border-radius: 0; -khtml-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } .wp-caption img { margin: 5px; } .wp-caption p.wp-caption-text { margin: 0 0 4px; } .wp-smiley { margin:0; } [/css] <h3><a id="tt_editor-style-rtl">editor-style-rtl.css</a></h3> [php] /* Theme Name: Twenty Ten */ /* TinyMCE エディターにスタイルを設定するのに使用される。 */ html .mceContentBody{ direction:rtl; unicode-bidi:embed; float:right; } * { font-family: Arial, Tahoma, sans-serif; } /* テキスト要素 */ ul { margin: 0 -18px 18px 0; } ol { margin: 0 -18px 18px 0; } dd { margin-right: 0; } blockquote { font-style: normal; } table { text-align: right; margin: 0 0 24px -1px; } html .mceContentBody{ direction:rtl; unicode-bidi:embed; float:right; } * { font-family: Arial, Tahoma, sans-serif; } /* テキスト要素 */ ul { margin: 0 -18px 18px 0; } ol { margin: 0 -18px 18px 0; } dd { margin-right: 0; } blockquote { font-style: normal; } table { text-align: right; margin: 0 0 24px -1px; } [/php] <h3><a id="tt_footer">footer.php</a></h3> [php] <?php /** * フッターを表示するためのテンプレート。 * * id=main の div 要素を閉じ、すべての要素の後にきます。 * 底部のウィジェットを表示するための sidebar-footer.php を呼び出します。 * * @package WordPress * @subpackage Twenty_Ten * @since Twenty Ten 1.0 */ ?> </div> <div id="footer" role="contentinfo"> <div id="colophon"> <?php /* フッターにサイドバーですって？その通り。 * 四列のウィジェットでフッターをカスタマイズできるんです。 */ get_sidebar( 'footer' ); ?> <div id="site-info"> <a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"> <?php bloginfo( 'name' ); ?> </a> </div> <div id="site-generator"> <?php do_action( 'twentyten_credits' ); ?> <a href="<?php echo esc_url( __('http://wordpress.org/', 'twentyten') ); ?>" title="<?php esc_attr_e('Semantic Personal Publishing Platform', 'twentyten'); ?>" rel="generator"> <?php printf( __('Proudly powered by %s.', 'twentyten'), 'WordPress' ); ?> </a> </div> </div> </div> </div> <?php /* wp_footer() はいつも、テーマの </body> タグの直後にあります。 * そうでないと、このフックを使って JavaScript ファイルを参照する * 多くのプラグインの動作を止めてしまうでしょう。 */ wp_footer(); ?> </body> </html> [/php] <h3><a id="tt_functions">functions.php</a></h3> [php] <?php /** * TwentyTen の機能と定義 * * テーマをセットアップし、ヘルパー機能を提供します。一部のヘルパー機能は * テーマの中でカスタムテンプレートタグとして使用されます。それ以外のものは、 * WordPress のコア機能を変更するアクションとフィルターフックに取り付けられます。 * * 最初の機能は、 twentyten_setup() で、投稿サムネイルやナビゲーションメニューなど、 * WordPress の様々な機能のサポートをすることによってテーマを設定します。 * * 子テーマを使うときは (詳しくは http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E4%BD%9C%E6%88%90 と * http://wpdocs.sourceforge.jp/Child_Themes を見てください。)、子テーマの functions.php ファイルで機能を定義することで * 上書きすることが出来ます(機能は、 function_exists() 呼び出しで囲われています) 。 * 子テーマの functions.php ファイルは親テーマファイルの前にインクルードされ、 * 子テーマの機能が使われます。 * * 取り外せない機能（function_exists()で囲われていないもの）は、代わりに * フィルターあるいはアクションフックに割り当てられています。フックは、remove_action() あるいは * remove_filter() を使うことによって取り除くことができ、各自必要な機能をフックに割り当てることが出来ます。 * * 親テーマのフックは割り当てられた後のみ取り外すことができます。これはつまり、子テーマの * セットアップを終わるまで待つ必要があるということです。: * * <code> * add_action( 'after_setup_theme', 'my_child_theme_setup' ); * function my_child_theme_setup() { * // excerpt_length （あるいは、フィルターされていない値）に独自のフィルターをかけています。 * remove_filter( 'excerpt_length', 'twentyten_excerpt_length' ); * ... * } * </code> * * フック、アクション、フィルターに関するさらに詳しい情報は、 http://wpdocs.sourceforge.jp/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3_API を御覧ください。 * * @package WordPress * @subpackage Twenty_Ten * @since Twenty Ten 1.0 */ /** * テーマデザインとスタイルシートに基づいて、コンテンツの長さを設定します。 * * 画像とコンテンツの長さを設定するのに使われます。一般に style.css スタイルシートを通して * テーマデザインにあった長さと同じにするべきでしょう。 */ if ( ! isset( $content_width ) ) $content_width = 640; /** 'after_setup_theme' フックが走ったら、twentyten_setup() を走らせます。 */ add_action( 'after_setup_theme', 'twentyten_setup' ); if ( ! function_exists( 'twentyten_setup' ) ): /** * 様々な WordPress の特徴をサポートするテーマデフォルトとレジスタをセットアップします。 * * この function が after_setup_theme にフックされていて、init フックの前に走ることに注意してください。 * この init フックは、例えば投稿サムネイルのサポートの表示など、いくつかの特徴によっては * 遅すぎるかもしれません（訳注：実行順を早めてあげる必要がある、ということだと思います）。 * * 子テーマで twentyten_setup() を上書きするには、子テーマの functions.php ファイルに * 独自の twentyten_setup を追加してください。 * * @uses add_theme_support() 投稿サムネイルと自動フィードリンクをサポートします。 * @uses register_nav_menus() To ナビゲーションメニューをサポートします。 * @uses add_custom_background() カスタム背景をサポートします。 * @uses add_editor_style() ビジュアルエディターのスタイル変更をサポートします。 * @uses load_theme_textdomain() 翻訳／国際化をサポートします。 * @uses add_custom_image_header() カスタムヘッダーをサポートします。 * @uses register_default_headers() テーマに用意されるデフォルトのカスタムヘッダー画像を登録します。 * @uses set_post_thumbnail_size() 投稿サムネイルのサイズを設定します。 * * @since Twenty Ten 1.0 */ function twentyten_setup() { // このテーマでは、テーマスタイルに合うように、editor-style.css でビジュアルエディタをスタイル付けします。 add_editor_style(); // このテーマでは投稿サムネイルを使用します。 add_theme_support( 'post-thumbnails' ); // デフォルトの記事 RSS フィードと、コメント RSS フィードを <head> 内に追加します。 add_theme_support( 'automatic-feed-links' ); // テーマを翻訳できるようにします。 // 翻訳ファイルは /languages/ ディレクトリ内に置くことが出来ます。 load_theme_textdomain( 'twentyten', TEMPLATEPATH . '/languages' ); $locale = get_locale(); $locale_file = TEMPLATEPATH . "/languages/$locale.php"; if ( is_readable( $locale_file ) ) require_once( $locale_file ); // このテーマはある位置で、 wp_nav_menu() を使います。 register_nav_menus( array( 'primary' => __( 'Primary Navigation', 'twentyten' ), ) ); // このテーマでは、カスタム背景を設定できます。 add_custom_background(); // ヘッダーの変更はここから始まります。 define( 'HEADER_TEXTCOLOR', '' ); // CSSはなく、IMG を呼び出します。%s は、テーマテンプレートディレクトリの URL に取って代わります。 define( 'HEADER_IMAGE', '%s/images/headers/path.jpg' ); // カスタムヘッダーの高さと長さ。テーマ独自のフィルターを使って、この値を変更できます。 // この値を変更するには、twentyten_header_image_width と twentyten_header_image_height にフィルターを追加します。 define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 940 ) ); define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 198 ) ); // 記事とページのカスタムヘッダー画像に投稿サムネイルを使っています。 // 画像の大きさは長さ940ピクセル、高さ198ピクセルが望ましいです。 // それより大きな画像はフィットするように自動的にトリミングし、小さな画像は無視されます。詳しくは header.php ファイルを見てください。 set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true ); // ヘッダー画像の中にテキストを入れないようにします。 define( 'NO_HEADER_TEXT', true ); // カスタムヘッダーの管理画面で、カスタムヘッダーを装飾できるようにします。 // 詳しくは下の twentyten_admin_header_style() を見てください。 add_custom_image_header( '', 'twentyten_admin_header_style' ); // ... ヘッダーの変更関連はここまでです。 // テーマにパッケージされたデフォルトのカスタムヘッダーです。%s は、テーマテンプレートディレクトリの URL に取って代わります。 register_default_headers( array( 'berries' => array( 'url' => '%s/images/headers/berries.jpg', 'thumbnail_url' => '%s/images/headers/berries-thumbnail.jpg', /* 翻訳者へ: ヘッダー画像の説明 */ 'description' => __( 'Berries', 'twentyten' ) ), 'cherryblossom' => array( 'url' => '%s/images/headers/cherryblossoms.jpg', 'thumbnail_url' => '%s/images/headers/cherryblossoms-thumbnail.jpg', /* 翻訳者へ: ヘッダー画像の説明 */ 'description' => __( 'Cherry Blossoms', 'twentyten' ) ), 'concave' => array( 'url' => '%s/images/headers/concave.jpg', 'thumbnail_url' => '%s/images/headers/concave-thumbnail.jpg', /* 翻訳者へ: ヘッダー画像の説明 */ 'description' => __( 'Concave', 'twentyten' ) ), 'fern' => array( 'url' => '%s/images/headers/fern.jpg', 'thumbnail_url' => '%s/images/headers/fern-thumbnail.jpg', /* 翻訳者へ: ヘッダー画像の説明 */ 'description' => __( 'Fern', 'twentyten' ) ), 'forestfloor' => array( 'url' => '%s/images/headers/forestfloor.jpg', 'thumbnail_url' => '%s/images/headers/forestfloor-thumbnail.jpg', /* 翻訳者へ: ヘッダー画像の説明 */ 'description' => __( 'Forest Floor', 'twentyten' ) ), 'inkwell' => array( 'url' => '%s/images/headers/inkwell.jpg', 'thumbnail_url' => '%s/images/headers/inkwell-thumbnail.jpg', /* 翻訳者へ: ヘッダー画像の説明 */ 'description' => __( 'Inkwell', 'twentyten' ) ), 'path' => array( 'url' => '%s/images/headers/path.jpg', 'thumbnail_url' => '%s/images/headers/path-thumbnail.jpg', /* 翻訳者へ: ヘッダー画像の説明 */ 'description' => __( 'Path', 'twentyten' ) ), 'sunset' => array( 'url' => '%s/images/headers/sunset.jpg', 'thumbnail_url' => '%s/images/headers/sunset-thumbnail.jpg', /* 翻訳者へ: ヘッダー画像の説明 */ 'description' => __( 'Sunset', 'twentyten' ) ) ) ); } endif; if ( ! function_exists( 'twentyten_admin_header_style' ) ) : /** * 外観 > ヘッダーに表示されるヘッダー画像をスタイル付けします。 * * twentyten_setup() の add_custom_image_header() を通して参照します。 * * @since Twenty Ten 1.0 */ function twentyten_admin_header_style() { ?> <style type="text/css"> /* フロンドエンドと同じボーダーを表示します。 #headimg { border-bottom: 1px solid #000; border-top: 4px solid #000; } /* NO_HEADER_TEXT が false であれば、このセレクターでテキストをスタイル付けできます。: #headimg #name { } #headimg #desc { } */ </style> <?php } endif; /** * wp_title() の出力をフィルターすることで、<title> タグを変更します。 * * サイトの説明があり、ホームページかブログの記事のページを表示しているなら、 * （つまり、固定のフロントページを使っているとき）、サイトの説明を追加します。 * * もし、検索結果を表示しているなら、タイトルをまるごと再現します。 * すべてのタイトルに、検索結果のタイトルの中程と、すべてのタイトルの終りに、 * ページ番号を追加します。 * * サイト名もすべてのタイトルに追加します。 * * @since Twenty Ten 1.0 * * @param string $title wp_title() によって作られるタイトル * @param string $separator wp_title() を通る区切り。 Twenty Ten は * header.php にて垂直の棒 "|", を区切りとして使います。 * @return string <title> タグ用の新しいタイトル */ function twentyten_filter_wp_title( $title, $separator ) { // フィードの wp_title() 呼び出しには影響しません。 if ( is_feed() ) return $title; // グローバル変数 $paged は記事を並べる際のページ番号を含みます。 // グローバル変数 $page は番号を振られた記事のページ番号を含みます。 // 最初のページを見ているのでなければ、どちらが適用されていても表示します。 global $paged, $page; if ( is_search() ) { // 検索であれば、やり直します。: $title = sprintf( __( 'Search results for %s', 'twentyten' ), '"' . get_search_query() . '"' ); // 2ページ目以降であれば、ページ番号を追加します。: if ( $paged >= 2 ) $title .= " $separator " . sprintf( __( 'Page %s', 'twentyten' ), $paged ); // 終りにサイト名を追加します。: $title .= " $separator " . get_bloginfo( 'name', 'display' ); // おしまい。wp_title() に新しいタイトルを送ります : return $title; } // そうでなければ、終りにサイト名を追加します。: $title .= get_bloginfo( 'name', 'display' ); // サイトの説明があって、ホーム/フロントページであれば、説明を追加します。: $site_description = get_bloginfo( 'description', 'display' ); if ( $site_description && ( is_home() || is_front_page() ) ) $title .= " $separator " . $site_description; // 必要であれば、ページ番号を追加します。: if ( $paged >= 2 || $page >= 2 ) $title .= " $separator " . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) ); // 新しいタイトルを wp_title() に返します。: return $title; } add_filter( 'wp_title', 'twentyten_filter_wp_title', 10, 2 ); /** * ホームリンクを表示するのに、 wp_nav_menu() 、 wp_page_menu() を引っ込めます。 * * 子テーマでこれを上書きするには、フィルターを削除し、 * wp_page_menu_args フィルターフックへと結ばれる function を追加してください。 * * @since Twenty Ten 1.0 */ function twentyten_page_menu_args( $args ) { $args['show_home'] = true; return $args; } add_filter( 'wp_page_menu_args', 'twentyten_page_menu_args' ); /** * 記事の抜粋の長さを40文字に設定します。 * * これを子テーマで上書きするには、フィルターを削除し、 * excerpt_length フィルターフックと結ばれる function を追加してください。 * * @since Twenty Ten 1.0 * @return int */ function twentyten_excerpt_length( $length ) { return 40; } add_filter( 'excerpt_length', 'twentyten_excerpt_length' ); /** * 抜粋に "続きを読む" リンクを返します。 * * @since Twenty Ten 1.0 * @return string "続きを読む" リンク */ function twentyten_continue_reading_link() { return ' <a href="'. get_permalink() . '">' . __( 'Continue reading <span class="meta-nav">→</span>', 'twentyten' ) . '</a>'; } /** * 省略記号と twentyten_continue_reading_link() で "[...]" を置き換えます（自動的に作られる抜粋に付け加えて）。 * * これを子テーマで上書きするには、フィルターを取り除き、excerpt_more フィルターフックと結ばれる * function を追加してください。 * * @since Twenty Ten 1.0 * @return string An ellipsis */ function twentyten_auto_excerpt_more( $more ) { return ' …' . twentyten_continue_reading_link(); } add_filter( 'excerpt_more', 'twentyten_auto_excerpt_more' ); /** * カスタム投稿の抜粋に "続きを読む" リンクを加えます。 * * これを子テーマで上書きするには、フィルターを取り除き、get_the_excerpt フィルターフックと結ばれる * function を追加してください。 * * @since Twenty Ten 1.0 * @return string Excerpt with a pretty "Continue Reading" link */ function twentyten_custom_excerpt_more( $output ) { if ( has_excerpt() && ! is_attachment() ) { $output .= twentyten_continue_reading_link(); } return $output; } add_filter( 'get_the_excerpt', 'twentyten_custom_excerpt_more' ); /** * ギャラリーのショートコードが使われるときに印字されるインラインスタイルを除去します。 * * ギャラリーは Twenty Ten の style.css でスタイル付されています。 * * @since Twenty Ten 1.0 * @return string ギャラリースタイルフィルターで、スタイルは除去されます。 */ function twentyten_remove_gallery_css( $css ) { return preg_replace( "#<style type='text/css'>(.*?)</style>#s", '', $css ); } add_filter( 'gallery_style', 'twentyten_remove_gallery_css' ); if ( ! function_exists( 'twentyten_comment' ) ) : /** * コメントとピンバックのテンプレート。 * * コメントテンプレートを修正することなく子テーマでこれを上書きするには * 独自の twentyten_comment() を作ると、その function が代わりに使用されます。 * * コメントを表示するための wp_list_comments() による呼び戻しとして使われています。 * * @since Twenty Ten 1.0 */ function twentyten_comment( $comment, $args, $depth ) { $GLOBALS['comment'] = $comment; switch ( $comment->comment_type ) : case '' : ?> <li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>"> <div id="comment-<?php comment_ID(); ?>"> <div class="comment-author vcard"> <?php echo get_avatar( $comment, 40 ); ?> <?php printf( __( '%s <span class="says">says:</span>', 'twentyten' ), sprintf( '<cite class="fn">%s</cite>', get_comment_author_link() ) ); ?> </div> <?php if ( $comment->comment_approved == '0' ) : ?> <em><?php _e( 'Your comment is awaiting moderation.', 'twentyten' ); ?></em> <br /> <?php endif; ?> <div class="comment-meta commentmetadata"><a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>"> <?php /* 翻訳者へ: 1: 日付, 2: 時間 */ printf( __( '%1$s at %2$s', 'twentyten' ), get_comment_date(), get_comment_time() ); ?></a><?php edit_comment_link( __( '(Edit)', 'twentyten' ), ' ' ); ?> </div> <div class="comment-body"><?php comment_text(); ?></div> <div class="reply"> <?php comment_reply_link( array_merge( $args, array( 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?> </div> </div> <?php break; case 'pingback' : case 'trackback' : ?> <li class="post pingback"> <p><?php _e( 'Pingback:', 'twentyten' ); ?> <?php comment_author_link(); ?><?php edit_comment_link( __('(Edit)', 'twentyten'), ' ' ); ?></p> <?php break; endswitch; } endif; /** * 2つのサイドバーとフッターにあるウィジェットを配置可能な4列を含む、ウィジェット化できる領域を登録します。 * * 子テーマで twentyten_widgets_init() を上書きするには、アクションフックを取り除き、 * init フックに結び付けられた独自の function を追加してください。 * * @since Twenty Ten 1.0 * @uses register_sidebar */ function twentyten_widgets_init() { // エリア1、サイドバーの頭に位置します。 register_sidebar( array( 'name' => __( 'Primary Widget Area', 'twentyten' ), 'id' => 'primary-widget-area', 'description' => __( 'The primary widget area', 'twentyten' ), 'before_widget' => '<li id="%1$s" class="widget-container %2$s">', 'after_widget' => '</li>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); // エリア2、サイドバーのウィジェットエリア1の下に位置します。デフォルトでは空です。 register_sidebar( array( 'name' => __( 'Secondary Widget Area', 'twentyten' ), 'id' => 'secondary-widget-area', 'description' => __( 'The secondary widget area', 'twentyten' ), 'before_widget' => '<li id="%1$s" class="widget-container %2$s">', 'after_widget' => '</li>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); // エリア3、フッターに位置します。デフォルトでは空です。 register_sidebar( array( 'name' => __( 'First Footer Widget Area', 'twentyten' ), 'id' => 'first-footer-widget-area', 'description' => __( 'The first footer widget area', 'twentyten' ), 'before_widget' => '<li id="%1$s" class="widget-container %2$s">', 'after_widget' => '</li>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); // エリア4、フッターに位置します。デフォルトでは空です。 register_sidebar( array( 'name' => __( 'Second Footer Widget Area', 'twentyten' ), 'id' => 'second-footer-widget-area', 'description' => __( 'The second footer widget area', 'twentyten' ), 'before_widget' => '<li id="%1$s" class="widget-container %2$s">', 'after_widget' => '</li>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); // エリア5、フッターに位置します。デフォルトでは空です。 register_sidebar( array( 'name' => __( 'Third Footer Widget Area', 'twentyten' ), 'id' => 'third-footer-widget-area', 'description' => __( 'The third footer widget area', 'twentyten' ), 'before_widget' => '<li id="%1$s" class="widget-container %2$s">', 'after_widget' => '</li>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); // エリア6、フッターに位置します。デフォルトでは空です。 register_sidebar( array( 'name' => __( 'Fourth Footer Widget Area', 'twentyten' ), 'id' => 'fourth-footer-widget-area', 'description' => __( 'The fourth footer widget area', 'twentyten' ), 'before_widget' => '<li id="%1$s" class="widget-container %2$s">', 'after_widget' => '</li>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); } /** widgets_init フック上で twentyten_widgets_init() を走らせてサイドバーを登録します。*/ add_action( 'widgets_init', 'twentyten_widgets_init' ); /** * 最近のコメントウィジェットにパッケージされているデフォルトのスタイルを除去します。 * * 子テーマでこれを上書きするには、フィルターを除去し、 * widgets_init アクションフックに結びついた独自の function を作成してください。 * * @since Twenty Ten 1.0 */ function twentyten_remove_recent_comments_style() { global $wp_widget_factory; remove_action( 'wp_head', array( $wp_widget_factory->widgets['WP_Widget_Recent_Comments'], 'recent_comments_style' ) ); } add_action( 'widgets_init', 'twentyten_remove_recent_comments_style' ); if ( ! function_exists( 'twentyten_posted_on' ) ) : /** * 投稿日時、作成者に関するメタ情報を HTML で印字します。 * * @since Twenty Ten 1.0 */ function twentyten_posted_on() { printf( __( '<span class="%1$s">Posted on</span> %2$s <span class="meta-sep">by</span> %3$s', 'twentyten' ), 'meta-prep meta-prep-author', sprintf( '<a href="%1$s" title="%2$s" rel="bookmark"><span class="entry-date">%3$s</span></a>', get_permalink(), esc_attr( get_the_time() ), get_the_date() ), sprintf( '<span class="author vcard"><a class="url fn n" href="%1$s" title="%2$s">%3$s</a></span>', get_author_posts_url( get_the_author_meta( 'ID' ) ), sprintf( esc_attr__( 'View all posts by %s', 'twentyten' ), get_the_author() ), get_the_author() ) ); } endif; if ( ! function_exists( 'twentyten_posted_in' ) ) : /** * 記事（カテゴリー、タグ、パーマリンク）に関する情報を HTML で印字します。 * * @since Twenty Ten 1.0 */ function twentyten_posted_in() { // 投稿のタグリストをコンマ区切りで取り出します。 $tag_list = get_the_tag_list( '', ', ' ); if ( $tag_list ) { $posted_in = __( 'This entry was posted in %1$s and tagged %2$s. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>.', 'twentyten' ); } elseif ( is_object_in_taxonomy( get_post_type(), 'category' ) ) { $posted_in = __( 'This entry was posted in %1$s. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>.', 'twentyten' ); } else { $posted_in = __( 'Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>.', 'twentyten' ); } // プレースホルダーに取って代わる文字列を印字します。 printf( $posted_in, get_the_category_list( ', ' ), $tag_list, get_permalink(), the_title_attribute( 'echo=0' ) ); } endif; [/php] <h3><a id="tt_header">header.php</a></h3> [php] <?php /** * テーマのヘッダー。 * * <head> 部分の全ての要素と、<div id="main"> までのあらゆるものを表示します。 * * @package WordPress * @subpackage Twenty_Ten * @since Twenty Ten 1.0 */ ?><!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <title><?php /* * 見るページに応じて、<title> タグを表示します。 * wp_title() の出力を少しフィルターしています。詳しくは、 * functions.php ファイルの twentyten_filter_wp_title() を見てください。 */ wp_title( '|', true, 'right' ); ?> タグの直後にあります。 * そうでないと、このフックを使ってに * スタイルやスクリプトやメタタグを加える * 多くのプラグインの動作を止めてしまうでしょう。 */ wp_head(); ?> >

[/php]

index.php

[php]

[/php]

license.txt

GPL プログラムの頒布条件として指定されているのはオリジナルである英語なので、翻訳したものじゃいかんということなのですが、理解を深めたい場合は非公式の日本語版を先人が作ってくださっていますので、こちらをご覧ください。

loop.php

[php] get_template_part( 'loop', 'index' ); * のコードで呼び出されるときに使われます。 * * @package WordPress * @subpackage Twenty_Ten * @since Twenty Ten 1.0 */ ?> max_num_pages > 1 ) : ?>

$post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) ); $total_images = count( $images ); $image = array_shift( $images ); $image_img_tag = wp_get_attachment_image( $image->ID, 'thumbnail' ); ?>

%2$s photos.', 'twentyten' ), 'href="' . get_permalink() . '" title="' . sprintf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ) . '" rel="bookmark"', $total_images ); ?>

| | ', '' ); ?>

→', 'twentyten' ) ); ?>

| | ', '' ); ?>

→', 'twentyten' ) ); ?> '

' . __( 'Pages:', 'twentyten' ), 'after' => '

' ) ); ?>

Posted in %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-cat-links', get_the_category_list( ', ' ) ); ?> | Tagged %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); ?> | | ', '' ); ?>

max_num_pages > 1 ) : ?> [/php]

onecolumn-page.php

[php]

' . __( 'Pages:', 'twentyten' ), 'after' => '

' ) ); ?> ', '' ); ?>

[/php]

page.php

[php]

' . __( 'Pages:', 'twentyten' ), 'after' => '

' ) ); ?> ', '' ); ?>

[/php]

rtl.css

[css] /* Theme Name: Twenty Ten */ /* RTL 基礎（訳注：RTL=アラビア語やヘブライ語のように右から左へと書く言語） */ body { direction:rtl; unicode-bidi:embed; } /* レイアウト: 2列 (右) 説明: コンテンツの右にひとつのサイドバーがある2列固定レイアウト */ #container { float: right; margin: 0 0 0 -240px; } #content { margin: 0 20px 36px 280px; } #primary, #secondary { float: left; } #secondary { clear: left; } /* =フォント -------------------------------------------------------------- */ body, input, textarea, .page-title span, .pingback a.url, h3#comments-title, h3#reply-title, #access .menu, #access div.menu ul, #cancel-comment-reply-link, .form-allowed-tags, #site-info, #site-title, #wp-calendar, .comment-meta, .comment-body tr th, .comment-body thead th, .entry-content label, .entry-content tr th, .entry-content thead th, .entry-meta, .entry-title, .entry-utility, #respond label, .navigation, .page-title, .pingback p, .reply, .widget-title, input[type=submit] { font-family: Arial, Tahoma, sans-serif; } /* =構造 -------------------------------------------------------------- */ /* メインテーマ構造 */ #footer-widget-area .widget-area { float: right; margin-left: 20px; margin-right: 0; } #footer-widget-area #fourth { margin-left: 0; } #site-info { float: right; } #site-generator { float: left; } /* =グローバル要素 -------------------------------------------------------------- */ /* テキスト要素 */ ul { margin: 0 1.5em 18px 0; } blockquote { font-style: normal; } /* スクリーンリーダーのみに向けたテキスト */ .screen-reader-text { left: auto; text-indent:-9000px; overflow:hidden; } /* =ヘッダー -------------------------------------------------------------- */ #site-title { float: right; } #site-description { clear: left; float: left; font-style: normal; } /* =メニュー -------------------------------------------------------------- */ #access { float:right; } #access .menu-header, div.menu { margin-right: 12px; margin-left: 0; } #access .menu-header li, div.menu li{ float:right; } #access ul ul { left:auto; right:0; float:right; } #access ul ul ul { left:auto; right:100%; } /* =コンテンツ -------------------------------------------------------------- */ #content table { text-align: right; margin: 0 0 24px -1px; } .page-title span { font-style:normal; } .entry-title, .entry-meta { clear: right; float: right; margin-left: 68px; margin-right: 0; } .entry-content input.file, .entry-content input.button { margin-left: 24px; margin-right:0; } .entry-content blockquote.left { float: right; margin-right: 0; margin-left: 24px; text-align: left; } .entry-content blockquote.right { float: left; margin-right: 24px; margin-left: 0; text-align: right; } #entry-author-info #author-avatar { float: right; margin: 0 0 0 -104px; } #entry-author-info #author-description { float: right; margin: 0 104px 0 0; } /* ギャラリーの並べ方 -------------------------------------------------------------- */ .category-gallery .gallery-thumb { float: right; margin-left:20px; margin-right:0; } /* 画像 -------------------------------------------------------------- */ #content .gallery .gallery-caption { margin-right: 0; } #content .gallery .gallery-item { float: right; } /* =ナビゲーション -------------------------------------------------------------- */ .nav-previous { float: right; } .nav-next { float: left; text-align:left; } /* =コメント -------------------------------------------------------------- */ .commentlist li.comment { padding: 0 56px 0 0; } .commentlist .avatar { right: 0; left: auto; } .comment-author .says, #comments .pingback .url { font-style: normal; } /* コメントフォーム */ .children #respond { margin: 0 0 0 48px; } /* =ウィジェット領域 -------------------------------------------------------------- */ .widget-area ul { margin-right: 0; } .widget-area ul ul { margin-right: 1.3em; margin-left: 0; } #wp-calendar caption { text-align: right; } #wp-calendar tfoot #next { text-align: left; } /* メインサイドバー */ #main .widget-area ul { margin-right: 0; padding: 0 0 0 20px; } #main .widget-area ul ul { margin-right: 1.3em; margin-left: 0; } /* =フッター -------------------------------------------------------------- */ #site-generator { font-style:normal; } #site-generator a { background-position: right center; padding-right: 20px; padding-left: 0; } [/css]

search.php

[php]

' . get_search_query() . '' ); ?>

[/php]

sidebar.php

[php] [/php]

sidebar-footer.php

[php] [/php]

single.php

[php]

' . __( 'Pages:', 'twentyten' ), 'after' => '

' ) ); ?>

→', 'twentyten' ), get_the_author() ); ?>

', '' ); ?>

[/php]

style.css

[css] @charset "utf-8"; /* Theme Name: Twenty Ten Theme URI: http://wordpress.org/ Description: WordPress のデフォルトテーマ、2010。 Author: the WordPress team Version: 1.0 Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style */ /* ブラウザーの持つデフォルトの CSS をリセットします。Eric Meyer による作業に基づきます: http://meyerweb.com/eric/tools/css/reset/index.html -------------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; vertical-align: baseline; background: transparent; } body { line-height: 1; } h1, h2, h3, h4, h5, h6 { font-weight: normal; clear: both; } ol, ul { list-style: none; } blockquote { quotes: none; } blockquote:before, blockquote:after { content: ''; content: none; } del { text-decoration: line-through; } /* テーブルはまだ、マークアップに 'cellspacing="0"' を必要とします。 */ table { border-collapse: collapse; border-spacing: 0; } a img { border: none; } /* レイアウト: 2列説明: コンテンツの右にサイドバーのある2列固定レイアウト */ #container { float: left; margin: 0 -240px 0 0; width: 100%; } #content { margin: 0 280px 0 20px; } #primary, #secondary { float: right; overflow: hidden; width: 220px; } #secondary { clear: right; } #footer { clear: both; width: 100%; } /* レイアウト: 1列でサイドバーなし説明: サイドバーなしの中央1列 */ .one-column #content { margin: 0 auto; width: 640px; } /* レイアウト: 長さ目一杯で、サイドバーなし説明: サイドバーなしの長さ目一杯のコンテンツ; 添付ファイルのページに使用されます。 */ .single-attachment #content { margin: 0 auto; width: 900px; } /* =フォント -------------------------------------------------------------- */ body, input, textarea, .page-title span, .pingback a.url { font-family: Georgia, "Bitstream Charter", serif; } h3#comments-title, h3#reply-title, #access .menu, #access div.menu ul, #cancel-comment-reply-link, .form-allowed-tags, #site-info, #site-title, #wp-calendar, .comment-meta, .comment-body tr th, .comment-body thead th, .entry-content label, .entry-content tr th, .entry-content thead th, .entry-meta, .entry-title, .entry-utility, #respond label, .navigation, .page-title, .pingback p, .reply, .widget-title, .wp-caption-text, input[type=submit] { font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif; } pre { font-family: "Courier 10 Pitch", Courier, monospace; } code { font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; } /* =構造 -------------------------------------------------------------- */ /* メインのテーマ構造 */ #access .menu-header, div.menu, #colophon, #branding, #main, #wrapper { margin: 0 auto; width: 940px; } #wrapper { margin-top: 20px; background: #fff; padding: 0 20px; } /* フッター領域の構造 */ #footer-widget-area { overflow: hidden; } #footer-widget-area .widget-area { float: left; margin-right: 20px; width: 220px; } #footer-widget-area #fourth { margin-right: 0; } #site-info { float: left; width: 700px; font-weight: bold; font-size: 14px; } #site-generator { float: right; width: 220px; } /* =グローバル要素 -------------------------------------------------------------- */ /* メインのグローバル 'テーマ' とフォントスタイル */ body { background: #f1f1f1; } body, input, textarea { color: #666; font-size: 12px; line-height: 18px; } hr { background-color: #E7E7E7; border:0; height: 1px; margin-bottom: 18px; clear:both; } /* テキスト要素 */ p { margin-bottom: 18px; } ul { list-style: square; margin: 0 0 18px 1.5em; } ol { list-style: decimal; margin: 0 0 18px 1.5em; } ol ol { list-style:upper-alpha; } ol ol ol { list-style:lower-roman; } ol ol ol ol { list-style:lower-alpha; } ul ul, ol ol, ul ol, ol ul { margin-bottom:0; } dl { margin:0 0 24px 0; } dt { font-weight: bold; } dd { margin-bottom: 18px; } strong { font-weight: bold; } cite, em, i { font-style: italic; } big { font-size: 131.25%; } ins { background: #ffc; text-decoration: none; } blockquote { font-style: italic; padding: 0 3em; } blockquote cite, blockquote em, blockquote i { font-style: normal; } pre { background: #f7f7f7; color: #222; line-height: 18px; margin-bottom: 18px; padding: 1.5em; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } sup, sub { height: 0; line-height: 1; vertical-align: baseline; position: relative; } sup { bottom: 1ex; } sub { top: .5ex; } input[type="text"], textarea { padding: 2px; background: #f9f9f9; border: 1px solid #ccc; box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1); -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1); -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1); } a:link { color:#0066CC; } a:visited { color:#743399; } a:active, a:hover { color: #FF4B33; } /* スクリーンリーダーのみに向けたテキスト */ .screen-reader-text { position: absolute; left: -9000px; } /* =ヘッダー -------------------------------------------------------------- */ #header { padding: 30px 0 0 0; } #site-title { float: left; margin: 0 0 18px 0; width: 700px; font-size: 30px; line-height: 36px; } #site-title a { color: #000; font-weight: bold; text-decoration: none; } #site-description { clear: right; float: right; font-style: italic; margin: 14px 0 18px 0; width: 220px; } /* これはカスタムヘッダー画像です。 */ #branding img { clear: both; border-top: 4px solid #000; display: block; border-bottom: 1px solid #000; } /* =メニュー -------------------------------------------------------------- */ #access { background: #000; margin: 0 auto; width: 940px; display:block; float:left; } #access .menu-header, div.menu { font-size: 13px; margin-left: 12px; } #access .menu-header ul, div.menu ul { list-style: none; margin: 0; } #access .menu-header li, div.menu li { float:left; position: relative; } #access a { display:block; text-decoration:none; color:#aaa; padding:0 10px; line-height:38px; } #access ul ul { display:none; position:absolute; top:38px; left:0; float:left; box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); width: 180px; z-index: 99999; } #access ul ul li { min-width: 180px; } #access ul ul ul { left:100%; top:0; } #access ul ul a { background:#333; height:auto; line-height:1em; padding:10px; width: 160px; } #access li:hover > a, #access ul ul :hover > a { color:#fff; background:#333; } #access ul li:hover > ul { display:block; } #access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access ul li.current-menu-parent > a { color: #fff; } * html #access ul li.current_page_item a, * html #access ul li.current-menu-ancestor a, * html #access ul li.current-menu-item a, * html #access ul li.current-menu-parent a, * html #access ul li a:hover { color:#fff; } /* =コンテンツ -------------------------------------------------------------- */ #main { overflow: hidden; padding: 40px 0 0 0; } #content { margin-bottom: 36px; } #content, #content input, #content textarea { color: #333; font-size: 16px; line-height: 24px; } #content p, #content ul, #content ol, #content dd, #content pre, #content hr { margin-bottom:24px; } #content ul ul, #content ol ol, #content ul ol, #content ol ul { margin-bottom:0; } #content pre, #content kbd, #content tt, #content var { font-size: 15px; line-height: 21px; } #content code { font-size: 13px; } #content dt, #content th { color: #000; } #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { color: #000; margin: 0 0 20px 0; line-height: 1.5em; } #content table { border: 1px solid #e7e7e7; text-align: left; margin: 0 -1px 24px 0; width: 100%; } #content tr th, #content thead th { color: #888; font-size: 12px; font-weight: bold; line-height: 18px; padding: 9px 24px; } #content tr td { border-top: 1px solid #e7e7e7; padding: 6px 24px; } #content tr.odd td { background: #F2F7FC; } .hentry { margin: 0 0 48px 0; } .home .sticky { background: #F2F7FC; border-top: 4px solid #000; padding: 18px 20px; margin-left: -20px; margin-right: -20px; } .single .hentry { margin: 0 0 36px 0; } .page-title { color: #000; font-size: 14px; font-weight: bold; margin: 0 0 36px 0; } .page-title span { color: #333; font-size: 16px; font-style: italic; font-weight: normal; } .page-title a:link, .page-title a:visited { color:#888; text-decoration: none; } .page-title a:active, .page-title a:hover { color: #FF4B33; } #content .entry-title { color: #000; font-size: 21px; line-height: 1.3em; font-weight: bold; margin-bottom: 0; } .entry-title a:link, .entry-title a:visited { color:#000; text-decoration: none; } .entry-title a:active, .entry-title a:hover { color: #FF4B33; } .entry-meta { color: #888; font-size: 12px; } .entry-meta abbr, .entry-utility abbr { border: none; } .entry-meta abbr:hover, .entry-utility abbr:hover { border-bottom: 1px dotted #666; } .entry-content, .entry-summary { clear: both; padding: 12px 0 0 0; } #content .entry-summary p:last-child { margin-bottom: 12px; } .entry-content fieldset { border: 1px solid #E7E7E7; margin: 0 0 24px 0; padding: 24px; } .entry-content fieldset legend { background: #fff; color: #000; font-weight: bold; padding: 0 24px; } .entry-content input { margin: 0 0 24px 0; } .entry-content input.file, .entry-content input.button { margin-right: 24px; } .entry-content label { color: #888; font-size: 12px; } .entry-content select { margin: 0 0 24px 0; } .entry-content sup, .entry-content sub { font-size: 10px; } .entry-content blockquote.left { float: left; margin-left: 0; margin-right: 24px; text-align: right; width: 33%; } .entry-content blockquote.right { float: right; margin-left: 24px; margin-right: 0; text-align: left; width: 33%; } .page-link { color: #000; font-weight:bold; margin:0 0 22px 0; word-spacing:0.5em; } .page-link a:link, .page-link a:visited { background: #f1f1f1; color:#333; font-weight:normal; padding:0.5em 0.75em; text-decoration:none; } .home .sticky .page-link a { background: #D9E8F7; } .page-link a:active, .page-link a:hover { color: #FF4B33; } .page .edit-link { clear: both; display: block; } #entry-author-info { background: #F2F7FC; border-top: 4px solid #000; padding: 18px 20px; margin: 24px 0; overflow: hidden; clear: both; font-size: 14px; line-height: 20px; } #entry-author-info #author-avatar { background: #fff; border: 1px solid #e7e7e7; float: left; margin: 0 -104px 0 0; padding: 11px; height: 60px; } #entry-author-info #author-description { float: left; margin: 0 0 0 104px; } #entry-author-info h2 { color: #000; font-weight: bold; font-size: 100%; margin-bottom: 0; } .entry-utility { color: #888; font-size: 12px; line-height: 18px; clear: both; } .entry-meta a, .entry-utility a { color: #888; } .entry-meta a:hover, .entry-utility a:hover { color: #FF4B33; } #content .video-player { padding: 0; } /* Asides -------------------------------------------------------------- */ .home #content .category-asides p { font-size: 14px; line-height: 20px; margin-bottom: 10px; margin-top:0; } .home .hentry.category-asides { padding: 0; } .home #content .category-asides .entry-content { padding-top: 0; } /* ギャラリーの並べ方 -------------------------------------------------------------- */ .category-gallery { margin-bottom: 48px; } .category-gallery h2 { margin-top: 10px; } .category-gallery .entry-meta { } .category-gallery .size-thumbnail img { border: 10px solid #f1f1f1; margin-bottom: 0; } .category-gallery .gallery-thumb { float: left; margin-right:20px; margin-top: -4px; } .home #content .category-gallery .entry-content p { display: inline; } .home #content .category-gallery .entry-utility { padding-top:4px; } /* 添付ファイルのページ -------------------------------------------------------------- */ .entry-content .attachment img { margin-bottom: 0; } .attachment .entry-content .entry-caption { font-size: 140%; margin-top: 24px; } .attachment .entry-content .nav-previous a:before { content: '\2190\00a0'; } .attachment .entry-content .nav-next a:after { content: '\00a0\2192'; } /* 画像 -------------------------------------------------------------- */ #content img { margin: 0; max-width: 640px; } #content .attachment img { max-width: 900px; } #content .alignleft, #content img.alignleft { display: inline; float: left; margin-right: 24px; margin-top: 4px; } #content .alignright, #content img.alignright { display: inline; float: right; margin-left: 24px; margin-top: 4px; } #content .aligncenter, #content img.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } #content img.alignleft, #content img.alignright, #content img.aligncenter { margin-bottom: 12px; } #content .wp-caption { background: #f1f1f1; line-height: 18px; text-align: center; margin-bottom: 20px; padding: 4px; } #content .wp-caption img { margin: 5px 5px 0; } #content .wp-caption p.wp-caption-text { margin: 5px; color: #888; font-size: 12px; } #content .wp-smiley { margin:0; } #content .gallery { margin: auto; } #content .gallery .gallery-item { float: left; margin-top: 0; text-align: center; width: 33%; } #content .gallery img { border: 2px solid #cfcfcf; } #content .gallery .gallery-caption { color: #888; font-size: 12px; margin: 0 0 12px; } #content .gallery dl { margin: 0; } #content .gallery img { border: 10px solid #f1f1f1; } #content .gallery br+br { display: none; } /* =ナビゲーション -------------------------------------------------------------- */ .navigation { font-size: 12px; line-height: 18px; overflow: hidden; color: #888; } .navigation a:link, .navigation a:visited { color: #888; text-decoration: none; } .navigation a:active, .navigation a:hover { color: #FF4B33; } .nav-previous { float: left; width: 50%; } .nav-next { float: right; width: 50%; text-align:right; } #nav-above { margin: 0 0 18px 0; } #nav-above { display: none; } .paged #nav-above, .single #nav-above { display: block; } #nav-below { margin: -18px 0 0 0; } /* =コメント -------------------------------------------------------------- */ #comments { clear: both; } #comments .navigation { padding: 0 0 18px 0; } h3#comments-title, h3#reply-title { color: #000; font-weight: bold; font-size: 20px; margin-bottom: 0; } h3#comments-title { padding: 24px 0; } .commentlist { list-style: none; margin: 0; } .commentlist li.comment { border-bottom: 1px solid #e7e7e7; line-height: 24px; margin: 0 0 24px 0; padding: 0 0 0 56px; position: relative; } .commentlist li:last-child { border-bottom:none; margin-bottom:0; } #comments .comment-body ul, #comments .comment-body ol { margin-bottom: 18px; } #comments .comment-body p:last-child { margin-bottom: 6px; } #comments .comment-body blockquote p:last-child { margin-bottom: 24px; } .commentlist ol { list-style: decimal; } .commentlist .avatar { position: absolute; top: 4px; left: 0; } .comment-author { } .comment-author cite { color: #000; font-style: normal; font-weight: bold; } .comment-author .says { font-style: italic; } .comment-meta { font-size: 12px; margin: 0 0 18px 0; } .comment-meta a:link, .comment-meta a:visited { color: #888; text-decoration: none; } .comment-meta a:active, .comment-meta a:hover { color: #FF4B33; } .commentlist .even { } .commentlist .bypostauthor { } .reply { font-size: 12px; padding: 0 0 24px 0; } .reply a, a.comment-edit-link { color: #888; } .reply a:hover, a.comment-edit-link:hover { color: #FF4B33; } .commentlist .children { list-style: none; margin: 0; } .commentlist .children li { border: none; margin: 0; } .nopassword, .nocomments { display: none; } #comments .pingback { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #e7e7e7; } .commentlist li.comment+li.pingback { margin-top: -6px; } #comments .pingback p { color: #888; font-size: 12px; line-height: 18px; display:block; margin: 0; } #comments .pingback .url { font-style: italic; font-size: 13px; } /* コメントフォーム */ input[type=submit] { color: #333; } #respond { margin: 24px 0; border-top: 1px solid #e7e7e7; overflow: hidden; position: relative; } #respond p { margin: 0; } #respond .comment-notes { margin-bottom: 1em; } .form-allowed-tags { line-height: 1em; } .children #respond { margin: 0 48px 0 0; } h3#reply-title { margin: 18px 0; } #comments-list #respond { margin: 0 0 18px 0; } #comments-list ul #respond { margin: 0; } #cancel-comment-reply-link { font-size: 12px; line-height: 18px; font-weight: normal; } #respond .required { color:#FF4B33; font-weight:bold; } #respond label { color: #888; font-size: 12px; } #respond input { margin:0 0 9px; width:98%; } #respond textarea { width:98%; } #respond .form-allowed-tags { color: #888; font-size: 12px; line-height: 18px; } #respond .form-allowed-tags code { font-size: 11px; } #respond .form-submit { margin: 12px 0; } #respond .form-submit input { width: auto; font-size: 14px; } /* =ウィジェットエリア -------------------------------------------------------------- */ .widget-area ul { list-style: none; margin-left: 0; } .widget-area ul ul { list-style: square; margin-left: 1.3em; } .widget_search #s { /* この指定で検索の入力フォームを列からはみ出ないようにしています。 */ width: 60%; } .widget_search label { display:none; } .widget-container { margin: 0 0 18px 0; } .widget-title { color: #222; font-weight: bold; } .widget-area a:link, .widget-area a:visited { text-decoration: none; } .widget-area a:active, .widget-area a:hover { text-decoration: underline; } .widget-area .entry-meta { font-size: 11px; } #wp_tag_cloud div { line-height: 1.6em; } #wp-calendar { width:100%; } #wp-calendar caption { font-weight: bold; color: #222; text-align: left; font-size:14px; padding-bottom: 4px; } #wp-calendar thead { font-size:11px; } #wp-calendar thead th { } #wp-calendar tbody { color: #aaa; } #wp-calendar tbody td { padding: 3px 0 2px; background: #f5f5f5; border:1px solid #fff; text-align: center; } #wp-calendar tbody .pad { background: none; } #wp-calendar tfoot #next { text-align: right; } .widget_rss a.rsswidget { color: #000; } .widget_rss a.rsswidget:hover { color: #FF4B33; } .widget_rss .widget-title img { height: 11px; width: 11px; } /* メインサイドバー */ #main .widget-area ul { margin-left: 0; padding: 0 20px 0 0; } #main .widget-area ul ul { border: none; margin-left: 1.3em; padding: 0; } #primary { } #secondary { } /* フッターウィジェットエリア */ #footer-widget-area { } /* =フッター -------------------------------------------------------------- */ #footer { margin-bottom: 20px; } #colophon { border-top: 4px solid #000; margin-top: -4px; padding: 18px 0; overflow: hidden; } #site-info { font-weight: bold; } #site-info a { color: #000; text-decoration: none; } #site-generator { position: relative; font-style: italic; } #site-generator a { color: #666; display:inline-block; text-decoration: none; background: url(images/wordpress.png) center left no-repeat; padding-left: 20px; line-height: 16px; } #site-generator a:hover { text-decoration: underline; } img#wpstats { display:block; margin: 0 auto 10px; } /* Mobile Safari ( iPad, iPhone and iPod Touch ) -------------------------------------------------------------- */ pre { -webkit-text-size-adjust: 140%; } code { -webkit-text-size-adjust: 160%; } #access, .entry-meta, .entry-utility, .navigation, .widget-area { -webkit-text-size-adjust: 120%; } #site-description { -webkit-text-size-adjust: none; } /* =印刷用スタイル -------------------------------------------------------------- */ @media print { body { background:none !important; } #wrapper { float: none !important; clear: both !important; display: block !important; position: relative !important; } #header { border-bottom: 2pt solid #000; padding-bottom: 18pt; } #colophon { border-top: 2pt solid #000; } #site-title, #site-description { float: none; margin: 0; padding:0; line-height: 1.4em; } #site-title { font-size: 13pt; } .entry-content { font-size: 14pt; line-height: 1.6em; } .entry-title { font-size: 21pt; } #access, #branding img, #respond, .comment-edit-link, .edit-link, .navigation, .page-link, .widget-area { display: none !important; } #container, #header, #footer { width: 100%; margin: 0; } #content, .one-column #content { width: 100%; margin: 24pt 0 0; } .wp-caption p { font-size: 11pt; } #site-info, #site-generator { float: none; width: auto; } #colophon { width: auto; } img#wpstats { display:none } #site-generator a { padding: 0; margin: 0; } #entry-author-info { border: 1px solid #e7e7e7; } #main { display:inline; } .home .sticky { border: none; } } [/css]

tag.php

[php]

' . single_tag_title( '', false ) . '' ); ?>

[/php]

鼻からカフェモカ。

翻訳記事：『Twenty Tenのヘッダー』

おで — Tue, 22 Jun 2010 13:53:00 +0000

この記事は、Matt が書いた『The Headers of Twenty Ten』を翻訳したものです。WordPress 3.0 で新しくなったデフォルトテーマ『Twenty Ten』に採用されたヘッダー画像のエピソードが詳しく紹介されています。WordPress ユーザのみならず、写真愛好家のみなさんも興味があるかと思い、拙いながらも翻訳をしてみました。

WordPress 3.0 の新しいデフォルトテーマである Twenty Ten の計画を立ててデザインしているときに、ヘッダーは実に目立った特徴になるだろうと思っていて、テーマでみんなを興奮させられるようなものにしたいと思いました。Misty Look、Chaotic Soul、Ocean Mist、Cutline といった WordPress.com でもっとも人気のあるテーマはみな、目立写真付きヘッダーを特徴としています。

オープンソースプロジェクトのための適切なライセンス画像を見つけるのは骨が折れるので、僕は MT に Ma.tt のランダム写真ページからいくらか見つけるよう、また彼が見つけられるものを調べるよう、依頼しました。ここにあるのはそれぞれ彼が選んだ画像です。ヘッダーフォームにあり、オリジナルの画像にリンクしています。撮影した場所と、写真の背景にある物語と一緒にどうぞ。

Automattic が創業したばかりの2005年12月、僕は関心を高めるとともに、コミュニティのみんなに会うために、ヨーロッパ旅行を計画をしていました。パリの Les Blogs カンファレンスから始まり、それからロンドンへ行き、WP meetup（編注：オフ会とでも訳せばいいのか…）で Mark Riley (Podz として知られていたアーティスト) と Khaled に会いました。最後にアイルランド、特にブラーニーに行き、Automattic の最初の社員である Donncha O Caoimh にじかに会い、彼の名前をどう発音するのか知りました。僕たちは一緒にフォトウォークに行き、ブラーニー城へと続く私道をのぼり、この寂しげな図を撮影しました。

今年初め、ぼくはドイツのミュンヘンで開催された DLD カンファレンスに初めて出席しました。とても寒く、疲れていて、また起きたのが朝早すぎてメンフィスへの大西洋越えの航空便に乗るための空港への車を捕まえられずにいました。半分眠ったまま、空港への道の途中で前夜に森に降り積もったばかりの美しいパウダースノーに気づき、開放絞りで高速シャッターを切りました。車の窓の色合いがより夢のようにしてくれました。約時速50キロで進む車から、f/1.4 1/2500秒 50mm のレンズでの撮影。

この桜は、次の二つの写真と同じように、同じ日に撮影したものです。ぼくは WordCamp Kansai （訳注：WordCamp 関西懇親会のこと）のために大阪にいて、マクラケン直子が京都にすぐ近くのお寺を案内してくれました。桜（そして梅も）の花はちょうど咲き始めたばかりで、すべては魔法のようでした。MT が電線が見えなくなるように巧みにトリミングしたのが分かるでしょう。 70-200mm のレンズの思いっきりワイドにして f/4 で撮影。

太陽が沈み始め、樹木がきらびやかになりました。70-200mm レンズの70mm、f/2.8、1/1600秒、ISO 200で撮影。

この植物を何というのか分かりませんが（訳注：ウラジロのように見えますが…）、京都の道端に生えていたのは確かです。70-200mm のレンズを 86mm にズームして、f/2.8、1/250秒、ISO 200で撮影。

この「凸形の」画像は、アグラのタージ・マハルに隣接するモスクの屋根のものです。50mmのレンズで開放絞りの f/1.4で撮影。僕は WordCamp Delhi のため、Om とインドにいて、彼がニューヨークそれからぼくたちが出会ったサンフランシスコに引っ越す前に育った町を少し探検しました。タージ・マハルは印象的な場所で、一日中興奮するようなスナップでいっぱいでした。たとえば、自転車の背に載せて運ばれる二つのソファや、しばらくプロフィールにしていたジャンプしてる写真、僕の好きな Om のポートレートの一枚、キリスト教徒、ムスリム、ヒンドゥー教徒が一列に並んでいる、インドの宗教的多様性をおさめた写真になります。トルコの写真を投稿し終えた時、それが明らかであるようにモスクの幾何学模様を得ることができません。この参拝が Om にタージ・マハルとアップルが共通して持っているものに関する投稿を書く着想を与えたのです。

このヘッダーは、「夕日」と名付けられていますが、実際には日の出です。それも無理からぬ間違いです。というのも、MT がぼくについて知っていることからすれば、そんなに早く起きるなんて想像もしなかったのでしょう。しかし、この朝は特別でした：Ulusaba と呼ばれる南アフリカの禁猟区で Richard Branson と一緒の旅行の二日目だったのです。この朝日は、ドライブに出発する部屋から丘を下って撮影しました。そこでは丁度獲物を手に入れたライオンの群れを見つけ、Virgin Unite がサポートしているプロジェクトを訪れ、最後に場内でごちそう／お祭りに参加しました。

最後の一枚は全然写真じゃないけれど、Chad Pugh が僕たちの Firefox Personas project のために書いてくれた2枚の素晴らしい絵のうちの1枚なので、どうしても触れておきたかったのです。サンフランシスコにある Automattic ラウンジでは、4.6メートルに引き伸ばしたものを見ることができます。

僕の写真が広範囲で楽しんでもらえるということを知ると、最初にオープンソースに貢献した時と同様の怖さがあることを認めなければなりません。「WordPress チーム」として style.css にクレジットされることで、多くの人々の作業と創造性の極地である、Twenty Ten の作者を見ると、ある種の喜びもあります。

さぁ、Twenty Ten をあなた自身のものにしてください。MT がどのようにトリミングしたかに気を留めてみてください。そしてまた、僕が好きな Twenty Ten の特徴の一つを調べてみてください：投稿ごと、あるいはページごとにカスタムヘッダーを上書きできること、つまりそれぞれの投稿がただひとつだけの雪のかけらとなりうるということです。

大体こんな意味かなぁと思って訳してみましたが、間違いとかあったらオシエテクダサイ(/-＼)

鼻からカフェモカ。

私がカスタム投稿タイプを使うべき理由

おで — Sun, 06 Jun 2010 14:56:00 +0000

ここしばらく WordPress 3.0 を研究している。

一番の目玉は WordPress MU との統合だが、全サイト同一のテーブルに入る仕様のため、(どれほどそれがボトルネックになるかは不明だが)単一テーブルへのアクセス集中を嫌って、私は導入しないだろう。

そうなると、目玉は残りはカスタムタクソノミーとカスタム投稿タイプだ。

カスタムタクソノミーは、カテゴリからタグへという、2.3 から続く流れの集大成だ。全てはタグへ。すべてをひとつのレイヤーで扱えたほうが便利だからだ。

だがしかし、従来のカテゴリのように扱いたい、という需要も少なからずある。だったら、タグに階層を設け、階層のあるものはカテゴリと呼び、全部のタグを呼び出したら、カテゴリと便宜的に呼んだタグも一緒に表示できる。これが、3.0 で目指した姿だ。

しかし、利用者が体感できるケースは少ないだろう。新規のサイトではカスタムタクソノミーを導入する動機があるだろうが、既存のサイトは従来のカテゴリとタグの運用で十分だ。

だから、私がカスタムタクソノミーを喜んで使うことはしばらく先だろう。新機能なのに残念だ。

残ったのはカスタム投稿タイプだ。当初私はこれも使わないだろうと思っていた。テーマごとに複雑なコードが必要で、表示にも気を使う。

しかし、救世主が現れた。Custom Post Type UI プラグインだ。これを有効にして、管理画面から必要項目を有効にしさえすればいい。

実際使ってみるとカスタム投稿タイプはことのほかいい。一番のメリットは、投稿の新規追加画面の入力項目をコントロールできることだ。

いま、私は自分の部署のイントラサイトを WordPress 3.0 で構築している。部内の周知事項や会議資料の所在を共有するのに、CMS は都合がよい。ログインしてもらい、ブログを書く要領で皆に更新してもらおうと思っている。

ところがだ。WordPress をクライアントに納品したことがあるあなたは言われたことがあるかもしれない。更新をしようと、投稿の新規追加を開いた奴らは決まってこういうのだ。

「この、抜粋、とか、トラックバックって、何を入力したらいいの？」

分からなかったら、何も入力しなければいいのに、そうはできないようだ。

「入力しないと、誤動作するかと思って。テストでも、分からなくても答えを書けって先生に言われたし。」

おまえは、中学生か。こうした無用なやりとりを無くすためにも、カスタム投稿タイプは最高だ。

カスタム投稿の新規追加

いらないものはなくしてしまえばいい。タイトルと本文だけで十分だ。これだけシンプルなら、もう質問は来ないだろう。

何かを選ぶことは、何かをあきらめることだ。

いちいち、質問がくる投稿の新規追加なんて、もういらない。投稿は全部本文とコンテンツに絞ったカスタム投稿タイプの新規追加から行えばいいのだ。

私たちはやりたいことがあって新機能を使うのではない。新機能を使うため、試すのだ。

それでは本末転倒だ、という人に対して、私はこう言いたい。「仏壇に祈るのに理由がいるか？」と。

さぁ、ここまで読めばあなたもカスタム投稿タイプを使ってみたくなっただろう。

いますぐ、WordPress 3.0 をインストールし、カスタム投稿タイプを試すのだ。そして一緒に苦しもうではないか。きっと新しい世界が開けるはずだ。

※本記事は、カスタム投稿タイプとカスタムタクソノミーの融合に悩んでいた最中に、RSS で読んだ「私がiPadを買うべきでない理由」へのオマージュです。冗談なので本気にしないよーに。

鼻からカフェモカ。

カスタム投稿タイプ(Custom Post Type)の導入と使い方 [WordPress 3.0]

おで — Sat, 05 Jun 2010 06:20:00 +0000

前回取り上げたカスタムタクソノミーはなんだか既存のサイトには使いづらい雰囲気満載でしたが、今回取り上げるカスタム投稿タイプは期待度満点。

投稿やページとは別に、思うままにカスタマイズした投稿タイプを作成できます。導入方法、機能の概要、表示方法を順に見ていきましょう。

カスタム投稿タイプの導入方法

カスタム投稿タイプについて、カスタムタクソノミーの時と同様、プラグインを使う方法と、直接コードを書く方法があります。

プラグインを使う

前回も登場した（というか、こっちが本業の）Custom Post Type UI プラグインを導入します。

custom post type UI プラグイン

Create New Custom Post Type 以下に入力していくと、簡単にカスタム投稿タイプを作成できます。

項目は以下の通り。

Post Type Name: （必須）カスタム投稿タイプの名前。コンピュータで読めるように設定する必要があるります。…つまり日本語はダメ→と思ったら通ってしまいました→が、通常の投稿を引っ張ってきてしまうので、やっぱり日本語ダメっぽい。
Label: カスタム投稿タイプのラベル。表示名。単語レベルで単数/複数を区別することが少ない日本語ではあまり関係ないありませんが、英語などでは複数形として設定するべきとされています。デフォルトでは、Post Type Name とおなじになるため、表示名を日本語にしたい場合はここで設定してください。
Singular Lable: カスタム投稿タイプの名前の単数形を設定します。上述の理由で日本語のラベルではあまり関係ないでしょう。
Public: カスタム投稿タイプが管理画面に表示されるかどうかを設定します。デフォルトでは "True"（表示される）。
Show UI: "True" にすると、管理画面に管理用の UI が表示されます。"False" にすると、UI は表示されません。
Capability Type: 読み書き・削除権限を構成するために使われる、とのことです。設定したタイプと同じ権限になるのだと思われます。デフォルトでは "post"。
Hierarchical: カスタム投稿タイプに親子関係を持たせるかどかを設定します。親・子にあたる投稿を指定できるようになります。デフォルトでは "False"。
Rewrite: パーマリンクのリライトフォーマットを設定します。デフォルトでは "True"。
Custom Rewrite Slug: パーマリンクのデフォルトフォーマットは Post Type Name となっていますが、別のものを使う場合はここに入力します。
Query_var: カスタムタクソノミー同様、用途が思いつきませんが、無難に "True" で。
Supports: カスタム投稿タイプの新規追加画面で、項目を表示するかどうかを設定できます。
- Title: タイトル入力欄の表示/非表示
- Editor: 本文入力欄の表示/非表示
- Excerpt: 抜粋入力欄の表示/非表示
- Trackbacks: トラックバック入力欄の表示/非表示
- Custom Fields: カスタムフィールド入力欄の表示/非表示
- Comments: ディスカッション設定の表示/非表示
- Revisions: リビジョンの表示/非表示
- Post Thumnails: アイキャッチ画像設定の表示/非表示
- Author: 作成者設定の表示/非表示
- Page Attributes: ページ属性欄の表示/非表示
- 以上、何か一つでも指定すれば、一つ以上表示されます。全部チェックを外すと、タイトルと本文のみになります。デフォルトはタイトルと本文のみです。

ソースコードを書く

使用中のテーマの functions.php に以下のコードを追加することでも使用できるようになります。こっちのほうがいろいろ設定できますね（他の変数は関数リファレンス/register post type - WordPress Codex 日本語版を参照）。プラグインなどを作成する場合は、以下のコードを参考にしてみてください。

[php] // カスタム投稿タイプを作成 // create custom post type function odekon_custom_post_type() { $labels = array( 'name' => _x('部内会議', 'post type general name'), 'singular_name' => _x('議事録', 'post type singular name'), 'add_new' => _x('部内会議を追加', 'book'), 'add_new_item' => __('新しい部内会議を追加'), 'edit_item' => __('部内会議を編集'), 'new_item' => __('新しい部内会議'), 'view_item' => __('部内会議を編集'), 'search_items' => __('部内会議を探す'), 'not_found' => __('部内会議はありません'), 'not_found_in_trash' => __('ゴミ箱に部内会議はありません'), 'parent_item_colon' => '' ); $args = array( 'labels' => $labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'query_var' => true, 'rewrite' => true, 'capability_type' => 'post', 'hierarchical' => false, 'menu_position' => 2, 'supports' => array('title','editor') ); register_post_type('bunaikaigi',$args); } add_action('init', 'odekon_custom_post_type'); [/php]

ちなみに、menu_position は管理画面のサイドバーでの表示位置を調整できる変数です。5 で投稿の下、10 でメディアの下、20 でページの下、null でデフォルトの一番下になります。…が裏技的に、0 または 1 でダッシュボードの上に、2 または 3 でダッシュボードの下に表示することができるみたいです。

publicly_queryable を true にすると通常のクエリに出てくるはずなんですが、出てこないので、このあと表示するためにがんばることになります。

こ、これがカスタム投稿タイプの力なのかっ！

カスタム投稿の新規追加

カスタム投稿タイプとして「ヘッドライン」という項目を作ってみました。Supports はタイトルと本文というシンプル構成です。これでもう、「おでこくん、Trackbacks というのはなにを入力したらよいのかね」などとクライアント（部長とか）に言わせたりはしません。「これがカスタム投稿タイプの力なのかっ！」と言わせてみせよう、ホトトギス。

カスタム投稿の一覧

通常の投稿と同じように、ヘッドラインの記事だけが並ぶ専用の一覧画面もできます。これは分かりやすい。

カスタム投稿タイプを表示する

案の定表示されません

でもって、index.php を見ると案の定表示されません…。カスタムタクソノミーのときと同じように通常のクエリに含んでくれないみたいなんですね。

というわけで、TwentyTen テーマの loop.php の

[php] [/php]

の後あたりに以下を追加してみました。

[php] 'headline', 'posts_per_page' => 5 ) ); ?> have_posts() ) : $loop->the_post(); ?>

[/php]

すると…

表示されました！

無事表示されました。内容は今適当に考えましたが、会社の部署のイントラサイトを WordPress 3.0 で作ろうかなと思っているのでその実験を兼ねています。

投稿の新規追加をシンプルに絞ったのもそのためですね。まだまだ仕様の通りになっていなかったり、うまくできなかったりするところもありますが、カスタム投稿タイプはすごくいいよいいよー！

鼻からカフェモカ。

カスタムタクソノミー(Custom Taxonomy)の導入と使い方 [WordPress 3.0]

おで — Wed, 02 Jun 2010 14:59:00 +0000

WordPress 2.8 から導入されたものの、タクソノミーという日本人にはまったく耳慣れない不遇な名前のせいで余り使われてこなかった（と思われる）Custom Taxonomy（カスタムタクソノミー）ですが、WordPress 3.0 では大幅にパワーアップ（予定）！

その改良点と、導入までの流れ、使い方を解説してみます。

2.9: タグはすべて同じレベル

親子関係のないカスタムタクソノミー

2.9 までのカスタムタクソノミーはカテゴリで使えるような親子関係（階層構造）を持たず、すべて同じレベルになっていました。

※3.0 でも親子関係を持たないカスタムタクソノミーを作ることはできます。

3.0: タグに親子関係を持たせられるようになった!!

親子関係のあるカスタムタクソノミー

3.0 でパワーアップする（予定の）カスタムタクソノミーでは、親子関係を持たせられるようになり、より柔軟な分類が可能となりました。

そのせいか、ますますカテゴリとの境界が曖昧になり、タクソノミーに親子関係を持たせると”Add New Category（日本語版では「新規カテゴリーを追加」と表示しています）”、親子関係を持たせないと”Add New Tag（日本語版では「新規タグを追加」）”と表示されています（上のスクリーンショット参照）。

カスタムタクソノミーは、post・page・link・custom post types の4種類からタイプを選ぶことができ、post を設定した場合は、サイドバーにメニュー項目が表示されるようになります。

投稿画面：親子関係のあるカスタムタクソノミー

親子関係のあるカスタムタクソノミーは、投稿画面ですでに登録されている項目から選択することができます。

投稿画面：親子関係のないカスタムタクソノミー

一方、親子関係のないカスタムタクソノミーの場合、従来のタグ同様、入力しないといけません。ただし、子にあたるカスタムタクソノミーが存在しなくても、親子関係（hierarchical）を “True” にすれば、チェックボックスから選択することができるので、”True” にしておいたほうが便利ではないでしょうか。

カスタムタクソノミーの導入方法

では、このカスタムタクソノミーを導入してみましょう。なお、この解説は 3.0 RC 版を使っていますので、正式版と挙動が異なる場合があります。

プラグインを使う

WordCamp Yokohama 2010 の Nao さんのセッション「WordPress の現況〜事例とバージョン 3.0 紹介〜」でも紹介のあった Custom Post Type UI プラグインを導入するのがもっとも簡単です。

Custom Post Type UI プラグイン

Custom Post Type UI プラグインはその名の通り、カスタ投稿タイプを作成するためのプラグインですが、新規追加画面にカスタムタクソノミーを作成する UI も持っています。

こちらに入力することで簡単にカスタムタクソノミーを導入することができます。

項目は以下の通り。

Taxonomy Name: （必須）タクソノミーの名前。コンピュータが読み取れるもの（つまり日本語ではダメ）で、簡潔なものがよいでしょう。
Label: タクソノミーのラベル。管理画面に表示される名前です。この内容が日本語であれば、管理画面にも日本語で表示されます。
Singular Label: 単数の場合に表示されるラベル。日本語は単語レベルでの単数/複数の区別があまりないので、日本語の場合は不要だと思います。
例）Label に flowers と設定した場合は、こちらに flower と設定します。
Post Type Name: （必須）”post”、”page”、”link” またはカスタム投稿タイプを入力します。”post” を入力すれば投稿の新規追加に、”page” を入力すればページの新規追加にカスタムタクソノミーが表示されます。
hierarchical: 親子関係を持たせる場合は “True” にします。デフォルト値は “False” です。
Show UI: タクソノミーを管理するための UI を作る場合は ”True” にします。デフォルト値は “True” です。
Query Var: get_query_var を使って呼び出すクエリ変数の関連項目だと思われますが、利用用途が分かりません。”True” にするとデフォルトの “$taxonomy” が使われます。
Rewrite: ”True” を設定すると、Taxonomy Name で指定した値が URL に使われます。
Custom Rewrite Slug: URL ベースに Taxonomy Name 以外のスラッグを設定する場合はここに入力します。デフォルトでは Taxonomy Name が使われます。

ソースコードを書く

使用中のテーマの functions.php に以下のコードを追加することでも使用できるようになります。プラグインなどを作成する場合は、以下のコードを参考にしてみてください。

[php]// カスタムタクソノミーを作成 // create custom taxonomy function odekon_custom_taxonomies() { register_taxonomy( 'wordpress_versions', 'post', array( 'hierarchical' => true, 'label' => 'WordPress Versions', 'singular_name' => 'WordPress Version', 'query_var' => true, 'rewrite' => true ) ); } add_action('init', 'odekon_custom_taxonomies', 0); [/php]

カスタムタクソノミーを表示する

カスタムタクソノミーが表示されていない

“WordPress Versions” というカスタムタクソノミーを作成し、記事に ”3.0” というカスタムタクソノミーを割り当てて投稿してみましたが、デフォルトの状態ではタグやカテゴリのように表示されません。

そこで、以下のコードを追加してみました。例として、TwentyTen テーマを使用しましたので、loop.php の

[php]

' . get_the_category_list( ', ' ) ); ?> | [/php]

という部分の後に、

[php] ID, 'wordpress_versions', 'WordPress Versions: ', ', ', '' ); if ( $taxo_list ): ?> | [/php]

を追加してみると…

カスタムタクソノミー、表示されました！

うまく行きました！

鼻からカフェモカ。

WordPress 3.0 の新機能を見てみよう @ WordBench 川崎

おで — Tue, 23 Mar 2010 15:30:00 +0000

[先日の WordBench 川崎でプレゼンした物の再録になります。Version 3.0 のまとめについては、日本語 Codex が詳しいです。]

Version 3.0 も大分固まってきたようなので、Mac にローカル環境を作るついでに新機能を確認してみました。

まずインストール画面。

WordPress 3.0 インストール

2.9 まではデフォルトのユーザ名は admin しか選べず、ログインパスワードもランダムの文字列になっていましたが、3.0 からはユーザ名・パスワードを任意に入力できるようになっています。

WordPress 3.0 インストール入力したアカウント情報の決定画面

たとえば、ぼくのハンドルを入力してみるとこんな感じ。admin 一択よりはセキュアでしょうけど、username には推測されないものを使ったほうがよいと思います(笑)

WordPress 3.0 管理画面

というわけで、ログイン。管理画面にはそれほど大きな変更はありません（現在の状況のところのデザインが見やすくなったり）が、ダッシュボードの下に「Update」メニューが追加されています。WordPress 本体のアップデートはここから行えるようです。

yorozu さんが言っていた Network メニューが見当たらないなぁと思ったら、

define('WP_ALLOW_MULTISITE',true);

の一文を wp-config.php に追加する必要があったのでした…（Thanx! yorozu さん）。この一文を追加すると…

Network メニュー出現

出ました。出ました。ところが！

ポート番号があるとネットワークのインストールができません＞＜

MAMP を使ったローカル環境ではデフォルトで 8888 ポートを使用するようになっており、このままでは Network 機能（マルチサイト機能）をインストールできません。ポート番号の他に 127.0.0.1 もダメみたいです（Thx! ぼののん)

MAMP のポートを 80 番に変更してもなぜか 8888 番を見に行ってしまったので（ぼくのやり方が悪いのかもしれませんが）、Windows のローカル環境で改めて試してみました。

WordPress マルチサイトのネットワーク作成

Windows + Xampp 環境ではポート番号なし localhost で接続していたので、今度はうまくいきました。Network Title と admin のeメールアドレスを入力して Install です。

WordPress マルチサイトのネットワーク作成に必要な操作

wp-content に blogs.dir ディレクトリを作成し、wp-config.php と .htaccess に表示された内容を追加してやると…

マルチサイト化した WordPress・SuperAdminメニュー

ダッシュボードメニューの上に Super Admin メニューが追加されました。マルチサイト化（MU化）完了です。

続いて、新テーマ「Twenty Ten（2010）」。

Twenty Ten Theme

鳴り物入りで登場する（予定の）Kubric に変わる新しいテーマです。オーソドックスなデザインの2カラムテーマになっていて、

ヘッダー画像の選択

ヘッダー画像はあらかじめいくつか用意されているものから選ぶことも、自分で用意した画像をアップロードして使用することもできます。

また、投稿サムネイル機能を使って、投稿ページごとにヘッダー画像を変えることもできるようになっています（Thanx! yorozu さん）。

ウィジェット画面

サイドバーには Primary と Secondary の二つのウィジェットエリア、フッターには4つのフッターウィジェットエリアが用意されていて、2カラムデザインにも、1カラムでぶら下がりのデザインにもソースコードをいじることなく対応できるようになっています。

背景画像のアップロード

こちらはカスタム背景画像の設定ページ。背景画像の変更も、CSS やテーマファイルの変更要らずです。

カスタムメニュー画面

こちらはカスタムメニュー設定ページ。専用のナビゲーションメニューを作ることができ、既存のページを並べることも、特定のURLへのリンクを作ることもできます。

カスタムメニュー非対応テーマでは使えません

試しに WordPress Default に切り替えてみると、エラーが出てしまいます。カスタムメニューをサポートしたテーマでなければ使えないようです。

続いてテーマの構造を見てみましょう。

ぼくはテーマデザインをするとき、構造を把握しやすいようにワイヤーフレームをよく書きます。Twenty Ten の index のワイヤーフレームは上の図のようになります。

DTD宣言はとなっており、HTML 5 を意識しているみたいです。ただし、その後は XHTML として書かれているようです。

header、main、footer と大きく3つに分けられているようですね。不思議なのは、エントリのタイトルには h2 タグが出てくるのですが、h1 が見当たりません。

シングルページになるとエントリのタイトルが h1 になるようになっていたりします。たぶん、まだ開発中なんでしょうね。5月のリリース時にはもっとちゃんとすることでしょう。ちょっとこのテーマ気に入ってきました。子テーマ作ってみようかな。

ということで、今回のプレゼンはここまで。最後まで読んでくださった方、お付き合いありがとうございました～。

鼻からカフェモカ。