Luxeritasでアイキャッチ画像を記事内に表示する方法
問題点
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内部で使われる引数の数ですね。通常1か2ですね。
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オリジナルのフィルターフックとなります。公式では、「投稿本文のみに適用される2つ目の the_content のようなもの。the_content の後に適用されるフィルター。the_content で投稿本文以外の全体に適用されると困るような場合に使用」と説明されています。
優先順位は11。大体この辺りの番号でよいと思いますが、記事前に追加する他のものがある場合は、どちらを先にするかの優先順位を調整してください。
引数の数は1。今回はpostの投稿タイプしかないので、1個です。
スタイルシートのソースの説明(詳細)
.post-top-thumbnail {
text-align: center;
margin-bottom: 30px;
}
基本的には、クラス名post-top-thumbnailでいじれるようにHTMLを組んでいます。
text-align: center;
これで画像が中央によります。ここがないと最初は左よりになります。右に寄せたい場合は、「text-align: right;」にしてください。
margin-bottom: 30px;
画像の下から本文、または目次が近いと見た目が悪いので、下側のスペースをあけています。
オススメ記事
開設1ヵ月 ConoHa WING Pagespeed Insights 速度 …
前回計測からの変更点 前回は、Google Adsenseの…
SEO結果 Google検索のクリック数と平均掲載順位の変動2021/01/01…
2021年1月1日にこのページを開設して約1ヵ月半経過しまし…
スクロール パフォーマンスを高める受動的なリスナーを使用する方法…
問題点 PageSpeed InsightsでWordPre…
ディスカッション
コメント一覧
まだ、コメントがありません