Luxeritasで個別記事タイトル下に自動でアイキャッチ画像を表示させる方法

おすすめ

eye_catch_14526

この記事の一番上に表示させているのは、アイキャッチ画像ではありますが、手動で貼りつけているだけです。
ちまたでよく見かけるブログ記事のスタイルにありますが、アイキャッチ画像をタイトルの下にドーンと表示するタイプですね。
Luxeritas3.1.5現在、そのような自動表示機能はテーマに実装されていませんので、開発者るなさんのブログ「Thought is free」に書かれていたオプション機能の追加方法をご案内します。

Luxeritasにオプション機能を追加する

子テーマのfunctions.phpに記述する

開く「Luxeritas」「子テーマの編集」「functions.php」

以下のコードを追記します。
/* 個別記事のタイトル下にアイキャッチ画像 */
function display_post_top_thumbnail( $content ){
	if( has_post_thumbnail() === true ) {
		global $post;
		$content = '<div class="post-top-thumbnail">' .  get_the_post_thumbnail( $post->ID, 'full' ) . '</div>' . $content;
	}
	return $content;
}
add_filter( 'thk_content', 'display_post_top_thumbnail', 11, 1 );

引用元Luxeritasで個別記事のタイトル下にアイキャッチ画像を表示させる方法（プラグイン使わない版）｜Thought is free

スタイルを整える

開く「Luxeritas」「子テーマの編集」「style.css」
または
開く「外観」「テーマの編集」「スタイルシート(style.css)」

上記コードの追加だけでは、画像下の余白がないため、以下のスタイルを子テーマのCSSに追記します。
/* タイトル下アイキャッチ画像 */
.post-top-thumbnail {
	text-align: center;
	margin-bottom: 30px;
}

引用元Luxeritasで個別記事のタイトル下にアイキャッチ画像を表示させる方法（プラグイン使わない版）｜Thought is free

以上で、アイキャッチ画像に設定した画像が、個別記事のタイトル下に自動で表示されるようになります。
このサイトは、Luxeritasのデフォルトでコンテナの最大幅1280px、サイドバーウィジェットの幅336pxです。
その際のコンテンツの幅は710pxです。

アイキャッチ画像がコンテンツの幅よりも大きい場合は、コンテンツの幅に合わせて縮小されて表示されることになります。
コンテナの最大幅「Luxeritas」「カスタマイズ(外観)」「全体レイアウト」「コンテナの最大幅」
サイドバーウィジェットの幅「Luxeritas」「カスタマイズ(外観)」「コンテンツ領域とサイドバー」「サイドバーウィジェットの幅」

注意点

すでに運用中のサイトにこのコードを追加すると、すべての記事の先頭にアイキャッチ画像が自動挿入されます。
問題がないか確認の上ご利用になられた方がいいと思います。
アイキャッチ画像が設定されていない場合は、何も表示されません。

記事の内容にマッチした画像であれば、読み手にとってわかりやすいかもしれないですね☆
読者目線で、読みやすさ、わかりやすさが追求されていればよいのでは！と思います。

こぼれ話

管理人がよく訪問するサイトで、タイトル下のアイキャッチ画像が効果的に使用されているな～と感じるサイトがあります。
リンク手術の後に外科医がやること｜医療ドラマでは描かれない真実 その２｜外科医の視点
外科医の視点で効果的に使用されているアイキャッチ画像
効果的なアイキャッチ画像もさることならが、読者を引き込むリード文、正確な情報と読みやすく理解しやすい文章、記事のボリュームに至るまで、すべてが絶賛に値する！と尊敬しています。
実は40年以上前の何かの自己紹介で「尊敬する人」を記入する欄がありました。
私が「有能な外科医」と書いたことは誰も知りませんw

3

カスタマイズ

Posted by どらみ