賢威7.0

トップページやアーカイブ記事一覧のサムネイルサイズを変更する方法:賢威7.0

keni-top-page-thumbnail-size

今回の記事では、賢威7サイトの記事一覧に表示されるサムネイルサイズを変更する方法を紹介したいと思います。

サムネイルサイズはCSSだけで変更することもできますが、CSSの場合はサイズを変更しても読み込まれる画像サイズが全く変わらないので、ここではPHPを使って記事一覧のサムネイルサイズを変更していきたいと思います。賢威7.0ではトップページとアーカイブページの記事一覧は同じような仕組みになっているので、一箇所の編集だけでトップページとアーカイブページの記事一覧に表示されるサムネイルサイズを変更することが出来ます。

カスタマイズ後

トップページ

top-page-thumbnail-size-after

アーカイブページ

archive-page-thumbnail-size-after

[ad]

※ 今回はPHPファイルを編集していきます。管理画面に入れなくなることもあるので、PHPコードは注意して編集して下さい。

1. 親テーマの functions.php を編集

記事一覧に表示されるサムネイルの大きさは、親テーマ(賢威7.0本体)の functions.php に書かれているので、今回は子テーマではなく親テーマの functions.php を編集していきます。

keni-functions-php

「コメントなどをhtml5に変更」というコメントの上にある

set_post_thumbnail_size( 246, 200, true );

のコードを、以下のように変更します。

set_post_thumbnail_size( 100, 100, true );
keni-functions-php-after

これでサムネイルサイズが100px ✕ 100px になりました。

この 100 という数字部分を変更すれば、お好みのサイズにすることが出来ます。

top-page-thumbnail-size-after

ちなみに、先ほど使用したコードの true という部分ですが、これは指定したサムネイルのサイズが、表示させる画像のサイズ(縦横の比率)と違う場合に、切り落としをするかどうかというオプションです。

ほとんどの場合で true にすると思いますが、false にすると、切り落としはされずに画像が伸縮します。

set_post_thumbnail_size( 100, 100, false );

1-2. サムネイルサイズをうまく変更できない場合は

functions.php で編集したコードが間違っていないのに、サムネイルサイズが思った通りのサイズにならない!という場合には、以下の Regenerate Thumbnails というプラグインを使ってみてください。

https://wordpress.org/plugins/regenerate-thumbnails/

regenerate-thumbnail

インストールしたら、管理画面の「ツール」→「Regen.Thumbnail」から「すべてのサムネイルを再生成する」というボタンを押します。

これでサムネイルが再生成されて、同じ大きさのサムネイルに揃うはずです。

regenerate-thumbnail-before