カスタム投稿タイプを調べている際、編集ページで title や edit 以外に「thumbnail」というのがあり、それが「アイキャッチ画像」という名称で編集ページ上に表示されていた。

使い方は、例えば TechCrunch JAPAN サイトのように、トップページで複数の記事を表示する際、１つの記事に導入文章(WordPressでは抜粋)と共に小さめの画像を表示するレイアウトが作り易いように、という事だと思われる。

WordPress のデータとしては、１つの記事に１つの画像を紐付けして、一覧表示や詳細表示で手軽に画像が表示できる機能として提供されているものであるようだ。記事中の画像リンクとは、異なった方法で表示指定する。

Twenty Ten テーマでの使われ方

Twenty Tenでは、サイト表示のヘッダーで 940×198ピクセルの画像が表示されるようになっている。そしてこの画像は、「管理画面-ヘッダー」で予め提供されている画像を選択したり、あるいは自分でアップロードした画像(トリミングもできる)を指定できる。

ところで、「header.php」テンプレートを見ると、56行目から次のようにプログラミングされている部分がある。

<?php
	// Check if this is a post or page, if it has a thumbnail, and if it's a big one
	if ( is_singular() &&
		has_post_thumbnail( $post->ID )  &&
		( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
		$image[1] >= HEADER_IMAGE_WIDTH ) :
			// Houston, we have a new header image!
			echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
	else : ?>
		<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
	<?php endif; ?>

どうやら

記事1件の表示で
かつ　アイキャッチ画像が登録されており
かつ　イメージの幅が940(HEADER_IMAGE_WIDTH)ピクセル以上

ならば、サイトのヘッダーに「get_the_post_thumbnail()」でアイキャッチ画像を表示する仕掛けとなっているようだ。実際試してみたところ、次のように表示された。

アイキャッチ画像を利用するために

テーマの「functions.php」で、次のような設定をする必要がある。

• テーマで利用できるように機能の有効化を行なう
  <?php add_theme_support(‘post-thumbnails’); ?>
  参考ページ：add_theme_support
• テンプレートタグ the_post_thumbnail()を使って表示する
  参考ページ：the_post_thumbnail

Twenty Ten の functions.php をみると、アイキャッチ画像に関するファンクションとして、表示画像が大きい場合に指定サイズに切り取る「set_post_thumbnail_size()」が使われている。

子テーマの「index.php」テンプレートの置き換えについて

子テーマでループを置き換える、面白い方法が Twenty Ten テーマで示されていた。先ずは「index.php」テンプレートを見ると、21行目から次のようにプログラミングされている。

<?php
/* Run the loop to output the posts.
 * If you want to overload this in a child theme then include a file
 * called loop-index.php and that will be used instead.
 */
 get_template_part( 'loop', 'index' );
?>

子テーマに「index.php」に係るものが何もなければ、親テーマの「index.php」は、「loop.php」を読み出して実行する。もし、この「loop.php」に変更を加えたいなら、子テーマのディレクトリに変更した「loop.php」を置くのではなく、「loop-index.php」というファイル名にして置けば、「loop.php」の代わりに読み込まれて利用されるようになるのである。

子テーマを利用する場合は、親テーマに操作を加えなくてもいいように、いろいろと工夫されているようで感心してしまった。