WordPressテーマ「ADELLE」でアイキャッチ画像を記事先頭に表示させる方法

2015-10-162016-02-12WordPress

こんにちは、とみーです。

アイキャッチ画像を記事先頭に表示させたいんです。
普通に記事に画像を挿入すればいい話なのですが、そうするとADELLEのテーマだと一覧リストにも画像が載ってしまいアイキャッチが二重になってしまうんですよ。

そこで、本文には画像の挿入をせず自動的にアイキャッチ画像が表示されるようにしたいと思います。一覧に小さなアイキャッチ、個別記事に大きなアイキャッチという感じに。

※システムをいじるので自己責任でお願いします。

Contents

Adelle: content.php に追記する

外観 > テーマの編集からcontent.phpを開きます。

<article class="post-content" itemprop="text">

1	<article class="post-content" itemprop="text">

の下に、以下のコードを挿入します。

<div style="text-align:center;"><?php if ( has_post_thumbnail() ) { echo get_the_post_thumbnail( $page->ID, array( 600, 315 ) ); } ?></div>

1	<div style="text-align:center;"><?php if ( has_post_thumbnail() ) { echo get_the_post_thumbnail( $page->ID, array( 600, 315 ) ); } ?></div>

画像を水平方向の中央に置きたいのでtext-align:center;してます。
array( 600, 315 )は画像の大きさです。数値を指定すると必ずその大きさで表示してくれます。’full’や’medium’に置き換えると設定 > メディアで設定した大きさで表示されます。

この1行だけで完成です。ファイルを更新して、サイトを確認してみてください。

一覧では小さなアイキャッチ

個別記事では大きなアイキャッチに無事表示されました。

アイキャッチが設定されていない記事は何も表示されません。

今気づいたのですが、アイキャッチの画像が大小で微妙に違いますね。画像を色々いじってアップロードと削除を繰り返していた結果です（※1）。普通は同じ画像のはず。

※1 … Jetpackのphotonのせいでキャッシュが残ってたようです。色々調べるとphotonのキャッシュは削除できないみたいなので無効化することにしました。

Oh…