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

2015-10-16Web制作

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

アイキャッチ画像を記事先頭に表示させたいんです。
普通に記事に画像を挿入すればいい話なのですが、そうすると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

おすすめ記事セレクション
シンプルなインテリアを目指す方へ → 買ってよかったホワイトの生活家電・生活用品まとめ
おしゃれな写真は誰でも撮れます → ブログ映えするオシャレな写真撮影&加工テクニック
デキる大人への第一歩 → 私のEvernoteの活用術・10個の事例【初心者でもできる活用法】
意識を変えるだけで貯まる! → 年収300万円のOLが8年で1000万円以上貯めた方法と習慣

この記事を読んだ人は他にこんな記事も読んでいます