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

2015-10-16Web制作

サイトURLが変更になりました!
https://0edition.net/
お手数ですがブックマーク・RSSの再登録お願いします。

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

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

eyecatch01

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

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

スポンサーリンク

Adelle: content.php に追記する

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

<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>

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

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

結果

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

eyecatch02

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

eyecatch03

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

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

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

終わった後にプラグイン見つけた

Oh…

Set I-Catch

こちらの記事もおすすめです