WordPressテーマLuxeritasで関連記事・前後記事のサムネイルを正方形→任意のサイズに変える方法

2019年6月3日2019年12月23日テーマ-luxeritasのカスタマイズ＆設定

さやっと。ではWordPressのテーマLuxeritasを使っています。

非常に高速＆高機能＆カスタマイズ豊富で知られるLuxeritasですが、設定項目が多すぎて便利なものの初心者向けではないため、初心者向けの記事ではLightningを使用しています。

Lightningの記事をさんざん書いておいて大きな声では言えないですが、初心じゃなくてちょっとかじってるよ！という人にはLuxeritasが断然おススメです。

わたし的には、Luxeritasは既存のカスタマイズ項目とCSSカスタマイズだけで十分良い見た目のサイトが作れますが、１か所だけ気になったので今日は修正！

前後記事や関連記事だと正方形になってサムネイルの両端がトリミングされる件

投稿ページの関連記事や前後記事でサムネイルが正方形になり、アイキャッチ画像の両端が切れてしまうことです。

始めからそれを想定しながらアイキャッチ画像を作っておけばよかった。という説もありますが、

両端がカットされても問題ない長方形のアイキャッチ画像を作るほどのデザイン能力はわたしにはないでーす。

最初は全然気になってなかったんですけど、せっかく記事に注意を引くためのサムネイルが付いているのに、両端カットされるとわけのわからない図形とか読めない単語になってしまってます。

気になり始めたら結構気になったので、今回はそれを修正します。

カスタムサイズのサムネイルを追加＆サムネイルの再作成作業

サムネイルのサイズはあらかじめ生成されたものが使われているので、これをCSSで無理やり修正するのは面倒＆良くないです。

自分が使いたいサイズ＝今回は、両端が切れないよう元の縦横比で小さいサムネイル を新しく作成します。

わたしの場合、アイキャッチ画像の元のサイズは800×450で作っています。

Luxeritasで使われている320×180サイズのサムネイルがミニバージョンということになりますが、今回はもう少し小さいのをわざわざ作成しました。

管理画面からLuxeritasの管理機能のサムネイル管理でユーザーサムネイル１のところで任意のサイズ150×85を設定して保存しておきます。

関連記事や前後記事で使われているのは100×100のサムネイルなので、それと大体同じサイズの画像サイズにしましょう。

あまりにサイズが違うとデザインレイアウトを直すのが面倒です。

保存したら、サムネイル再作成でサムネイルを作成します。

プラグインなしでこれができるのは流石Luxeritasって感じですね。

ユーザーサムネイルは、user_thumb_1～user_thumb_3の$nameで保存されています。

(この保存名を調べるの結構面倒臭かった。)

ユーザーサムネイル１に保存した場合はPHPファイル内ではuser_thumb_1で呼びだせるということですね。

テンプレートファイルのサムネイルのサイズ指定を作成したサムネイルサイズに変える

前後記事の部分は、single.phpに書かれています。

205行目辺り。

//$next_post = get_next_post();
$next_post = get_adjacent_post( false, '', false );
if( $next_post ) {
$thumb = 'thumb100';
$image_id = get_post_thumbnail_id( $next_post->ID );
$image_url = wp_get_attachment_image_src( $image_id, $thumb );

このコードのthumb100の部分がサムネイルのサイズを指定しているので、user_thumb_1に書き換えます。

233行目辺りもこんな感じに書き換える。

//$prev_post = get_previous_post();
$prev_post = get_adjacent_post( false, '', true );
if( $prev_post ) {
$thumb = 'user_thumb_1';
$image_id = get_post_thumbnail_id( $prev_post->ID );
$image_url = wp_get_attachment_image_src( $image_id, $thumb );

関連記事はrelated.phpに書かれています。

84行目辺り。

if( $post_thumbnail === true ) { // サムネイル
$thumb = 'thumb100';
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src( $image_id, $thumb );

ここもthumb100をuser_thumb_1に書き換えます。

この２つのファイルを編集してアップロードすれば、画像サイズの変更は完了です。

最後にCSSを調整したら完了！

/* 前後記事サムネイル */
#pnavi img{
width:150px;
height:85px;
}
#pnavi .prev img{
margin:2em 10px 0 0;
}
#pnavi .next img{
margin: 2em 0 0 10px;
}
/* 関連記事サムネイル */
#related .term img {
width: 150px;
height: 85px;
}

これでサムネイルでもアイキャッチ画像が崩れない！

色々と方法や記述位置を探すまでが大変だったけど、この記事さえあれば変えるのは超簡単ですよ！

わたしのようにアイキャッチ画像に無駄なこだわりを持っている方はやってみてください。