本記事はプロモーションを含みます

Luxeritasでアイキャッチ画像を記事内に表示する方法

eyecatch_550

問題点

WordPressのテーマ、「Luxeritas」の初期設定では、記事の最初にアイキャッチ画像は表示されない仕様である。デザインによっては、記事の最初に表示させたいときに不便である。

記事にしたテーマ

この記事の動作確認は、
Luxeritas親テーマ ver3.10.0.1～ver3.12.0.1
子テーマ ver3.0.2～ver3.0.3
にて確認を実施しました。

対処方法

Luxeritasの子テーマのfunction.phpを編集

WordPress管理画面の左側メニューから「Luxeritas」 → 「子テーマの編集」をクリック。
上にあるタブメニューの中央部分の「function.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の子テーマのスタイルシートを編集

スタイルシートでデザインをいじるときは、同じページの上にあるタブメニューの中央部分の「スタイルシート」をクリック。
一番最後に下記コードを追記。

.post-top-thumbnail {
	text-align: center;
	margin-bottom: 30px;
}

PHPのソースの説明（テンプレート部分）

function コールバック関数() {
  //アクションが発生した時の処理
}
add_action( フック名, コールバック関数名, 優先順位, 引数の数 );

大きく分けて、こういうテンプレートプログラムを元にWordPressのフィルターフック機能（add_filter）を使っています。add_filterの各パーツの説明は下記のようになります。

フック名は、WordPressのフィルターフックの中の機能を選んで使用します。ただし、Luxeritasにはオリジナルのフィルターフックが追加されており、ここに入れると使用できます。

コールバック関数名は、上のテンプレートプログラムを見るとわかりますが、functionで宣言される関数の名前ですね。

優先順位は、数字が低いほど、優先順位が上がります。動作がうまくいかない場合は、優先順位が悪い（数字が大きい）可能性があります。

引数の数は、fuction内部で使われる引数の数ですね。通常１か２ですね。

PHPのソースの説明（詳細）

if( has_post_thumbnail() === true ) {
		global $post;
		$content = '<div class="post-top-thumbnail">' .  get_the_post_thumbnail( $post->ID, 'full' ) . '</div>' . $content;
	}

「 if( has_post_thumbnail() === true ) 」これで記事に画像があったら、if分の中の処理をします。

「 global $post; 」WordPress全体で使われているpostの投稿タイプを引っ張て来ています。

「 get_the_post_thumbnail( $post->ID, 'full’ ) 」 記事番号をもとに、アイキャッチの画像をimgタグごと取得する。

「 $content = '<div class="post-top-thumbnail">’ . get_the_post_thumbnail( $post->ID, 'full’ ) . '</div>’ . $content; 」　前の説明も含めて、もともとの記事の前に「記事番号をもとに、アイキャッチの画像をimgタグごと取得する。」を追加する。　PHPで「 . 」は、文字と文字を繋ぐって意味になっています。

add_filter( 'thk_content', 'display_post_top_thumbnail', 11, 1 );

テンプレートでも少し触れましたが、
フック名が「thk_content」となっており、こちらは、Luxeritasオリジナルのフィルターフックとなります。公式では、「投稿本文のみに適用される２つ目の the_content のようなもの。the_content の後に適用されるフィルター。the_content で投稿本文以外の全体に適用されると困るような場合に使用」と説明されています。

優先順位は11。大体この辺りの番号でよいと思いますが、記事前に追加する他のものがある場合は、どちらを先にするかの優先順位を調整してください。

引数の数は1。今回はpostの投稿タイプしかないので、１個です。

スタイルシートのソースの説明（詳細）

.post-top-thumbnail {
	text-align: center;
	margin-bottom: 30px;
}

基本的には、クラス名post-top-thumbnailでいじれるようにHTMLを組んでいます。

text-align: center;

これで画像が中央によります。ここがないと最初は左よりになります。右に寄せたい場合は、「text-align: right;」にしてください。

margin-bottom: 30px;

画像の下から本文、または目次が近いと見た目が悪いので、下側のスペースをあけています。

問題が解決したら、お友達と共有しませんか？

この記事にいっぱいおごってみる？

KOBE WINGのAmazonほしい物リスト

オススメ記事

WordPressWordPress

Posted by KobeWing