Twentyfifteenからテーマ作成-トップに小さいアイキャッチ画像を表示


Twentyfifteenのテンプレートファイルはシンプルに構成されているので、これまでの公式テーマで用意されていたテンプレートがないことがあります。

トップページを表示するhome.phpもそのひとつなので、テーマ作成にあたってcategory.phpから複製して、ついでにデカいアイキャッチ画像も小さくしようと思っていたら、category.phpもありませんでした。 :黙:


category.phpはカテゴリーごとの記事一覧を表示するテンプレートですが、実際はこれがなくても記事一覧は表示できます。

WP Codexに記載のテンプレート階層によると、Twentyfifteenはarchive.phpでカテゴリー一覧を表示していることになります。

カテゴリー表示
カテゴリーアーカイブインデックスページの表示に使用されるテンプレートファイル。

category-{slug}.php – カテゴリーのスラッグが news ならば WordPress は category-news.php を探す。
category-{id}.php – カテゴリー ID が 6 ならば WordPress は category-6.php を探す。
category.php
archive.php
index.php

WP Codex テンプレート階層

てことで、archive.phpをhome.phpとして複製。
このままだと頭に「カテゴリー」と表示されるので、以下をまんま削除

home_eye1

・・・このデカいアイキャッチを小さくしたいんですが、アイキャッチ画像の大きさはfunctions.phpで以下のように定義されています。

このサイズ以外では表示できないので、トップページ用に別サイズを追加します。

home-thumbが呼び出されたアイキャッチ画像の横幅を220ピクセルになるようにしました。

WP Codexの解説ページはこちら。
WP Codex 関数リファレンス/add_image_size

これをトップページに表示させるんですが、現在の指定方法はコレ。

パラメータには get_template_part( ‘一般テンプレートのスラッグ名’, ‘特定テンプレートの名前’ ); と入るので、上記の場合、content-(現在の投稿フォーマット).php という名前のテンプレートを読み込みます。

ちなみに、解説ページはこのテーマ作っている時点では英語ページしかありませんでしたが、今日見たら日本語ページができてました。定期的に確認するべきですね。 :ウインク:

WP Codex 関数リファレンス/get_template_part

まずはcontent.phpを複製してcontent-home.phpを作成。
home.phpでのテンプレートの読み込みは念のため以下に修正しておきます。

content-home.phpのclass=”entry-content”の次に、functions.phpで指定したhome-thumbサイズになるアイキャッチを挿入。

そして上部にある大きいアイキャッチを削除しました。

home_eye2

位置の調整はお好みで。
上記の作業をカテゴリー一覧ページにも適用して、テーマを作りました。