[無料WordPressテーマ] Luxeritasの投稿にアイキャッチ画像の自動表示と適正な画像サイズの設定

WordPressテーマ

Luxeritasは非常に多機能なテーマですが、アイキャッチに設定した画像を記事の先頭に自動で表示するという機能はあえて実装されていません。その代わりと言っちゃ何ですが、作者さん自らその機能をコピペだけで簡単に出来る方法を紹介してくれているので、今回はそちらを参考に当サイトでも利用してみたいと思います。

オリジナルの記事はこちら

こちらが作者さんの記事になります。

詳細はリンク先のページで確認していただくとして内容を端的に言いますと、thk_contentというLuxeritas独自のフィルターを利用して、該当記事にアイキャッチが設定されていたら

コンテンツ内容 = アイキャッチ画像 + コンテンツ内容

にする…というわけですね？（超ざっくり感）

作業としてはfunctions.phpとstyle.cssにそれぞれコードをコピペするだけという非常にシンプルなものですが、実際何も考えずにその通りにしてみたところ当サイトでも簡単にこの機能を実装する事が出来ました、ありがたや～。

せっかくなのでイジってみます

ただ単純にコードをコピペしただけでは芸が無いので（別に芸は求められてない）これにちょっとしたカスタマイズを加えてみたいと思います。ぶっちゃけカスタマイズと言うのもおこがましいレベルの本当にちょっとした事なんですけどね？

適正な画像サイズを選択する

これはページの表示速度に関係してくる部分なので、念の為にWordPressの設定を確認しておく事にしましょう。

以下は先ほどfunctions.phpにコピペしたコードですが、ハイライトした行に注目していただきたい。とか言って肝心の部分はスクロールしないと見えなかったりするんですが、しかもAMPページではハイライトすらされないっていうね…ホントもうなんなんだAMP。

オリジナルのコード
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 );

その行のこの部分

アイキャッチの画像サイズがfull

get_the_post_thumbnail( $post->ID, 'full' )

これはフルサイズのアイキャッチ画像をそのままセットしているという事なので、アップロードした画像サイズがムダに大きいとその分だけ読み込みに時間がかかってしまいます。

ではダッシュボードからメディア設定を開いて画像サイズを確認してみましょう、下の画像はWordPressのデフォルトの状態なので、インストールしてから自分で変更してなければこの数値になっているはずです。

WordPress メディア設定 デフォルトの画像サイズ

ちなみにこちらは当サイトの設定になります。

当サイトのメディア設定 画像サイズ

色々なテーマをイジりながら汎用的な数値を探ってる内にこんな感じで落ち着いたわけですが、Luxeritasの場合は恐らく800くらいにしておけばこの後に出てくるCSSの修正は必要無いでしょう。Luxeritas以外のテーマでも私の見解としては一般的なブログスタイルのテーマなら、widthは800pxもあればまず十分ではないかと思ってます。

この設定次第で適正となるサイズは変わってきますが、仮に大サイズがデフォルトの1024の場合でも、fullよりはlargeの方がムダが無いんじゃないかな？という理由で先ほどの部分をfull → largeに変更してあります。

アイキャッチの画像サイズをlargeに変更

get_the_post_thumbnail( $post->ID, 'large' )

設定サイズによってはCSSで補正

当サイトのメディア設定（大サイズが720px）だと、PC表示の際にメインカラム幅より画像の方が若干小さくなっちゃうんですよね。私としては少しくらい画質が落ちてもノープロブレムなので、画像のサイズを変更するよりCSSに手を入れる方法を選びました。

オリジナルのCSS
.post-top-thumbnail {
	text-align: center;
	margin-bottom: 30px;
}

これをちょこっとだけ変更。

当サイト用にカスタマイズしたCSS
.post-top-thumbnail {
	margin-bottom: 20px;
}

.post-top-thumbnail img {
	width: 100%;
}

画像の幅を100%に引き伸ばすのでセンタリングは不要に、マージンは若干広く感じたので30px → 20pxくらいでいいかな…と。

このような感じで修正自体は大した内容ではありませんが、ページの高速化を本気で考え出すとこういった割とどうでもよさげな部分にも気を配る必要が出てくるという事で。とりあえずこれだけの事でもGTmetrixでツっこまれる要素は1つ減りますからね？

アイキャッチに利用する画像がメディア設定の大サイズより小さい場合はこの限りではありません。常に画像を縮小・軽量化してからアップロードしているような場合はfullのままでOKでしょう。また画像のサイズによっては引き伸ばさない方がいい場合もありますんで、その辺りは臨機応変にお願いします。

実は他のパターンも作ってみましたが

画像サイズを中サイズ（medium）にして左or右寄せに、サイドバーがメインカラム下に降りて1カラムになった辺りからスマホ表示になるまではアイキャッチの画像サイズを画面幅の半分にする（%ではなくvwを使ってみました）というだけの事だったんですが…

公開直前に不具合が発覚したので見送り orz

突然サイドバーの挙動がおかしな事になったので元に戻しました…なんでまたそんなとこに影響が出たのかさっぱりわけわかめ（死語）ですが、どうやらまだまだ修行が足りないようです。

いずれは標準装備されるかも

以前はこの機能がカスタマイザーから設定出来たらいいのに…そんなふうに考えていた時期が私にもありましたが、私がこれまでに無い知恵絞って自分で実装してきた機能はLuxeritasのバージョンアップによってほとんど実装されてきたので、この機能もいずれはカスタマイザーから設定する事が出来るようになるかもしれません。

WordPressテーマCSS,PHP,Luxeritas