WordPressでサムネイルを指定サイズに切り抜いて表示させる方法

WordPressでサムネイルを切り抜いて表示させる方法です。

functions.phpに多少記述するだけで、
簡単に希望のサイズで切り抜かれた画像を
表示させることが可能です。

スカーレットヨハンソンサムネイル

いらっしゃいませ、番台さんです。

WordPressで、最新記事の一覧やカテゴリー一覧表示などで、
各記事のサムネイル画像を表示させたい場合があると思います。

その際、自分の希望のサイズで表示したいと思うのが人情というもの。

しかも、単なる画像の拡大縮小ではなく、
画像の縦横比率が歪まずに、指定のサイズに切り抜いた状態で表示させたいですね。

その方法を備忘録としてアップします。
スカーレット・ヨハンソンは特に意味ありません(笑)。

まずはfunctions.phpに記述する

まずは、Wordpressダッシュボード管理画面の

「外観」-「テーマ編集」で、
functions.phpを開きます。

外観テーマ編集

その中に、以下の記述がなければ、記述します。

add_theme_support( ‘post-thumbnails’ );

たいていのテーマの場合は、すでに記述されているでしょう。
なければ、書き込んでください。

次に、サムネイル画像の大きさを指定するコードを記述する

そして、次に、同じくfunctions.phpに、
次のコードを書き込みます。

set_post_thumbnail_size( $width, $height, $crop_flag );

$width:画像の横サイズ(例:220)
$height:画像の縦サイズ(例:165)
$crop_flag:「切り抜き」かどうかの指定(trueなら「切り抜き」、何も書かないと切り抜かれない)

例えば、以下のような記述がすでにあった場合、

set_post_thumbnail_size(220, 165, true );

このサイズでかまわない人は、これでも良いかもしれませんが、
そう都合良くサイズが合うわけではありません。

そうじゃない場合は、これをいじらずに残したまま、
(いじるとテーマデザインの他の部分に影響が出る可能性があるので)
新たにサイズ指定するコードを追加します。

その場合は、

add_image_size( ‘任意の名前’, 横サイズ, 縦サイズ, true );

と記述します。

例えば、実際はこのようになります。

add_image_size( ‘original_thumbnail’, 150, 80, true );

任意の名前:これは、後で実際にサムネイルを表示させたい場所にこの名前を記述し
この設定を呼び出す役目を持っています。

これで、functions.phpでの作業は終わります。
全て記述すると、以下のようになります。

add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size(220, 165, true );(←すでに記述されていた場合のみ。なくても良い)
add_image_size( ‘original_thumbnail’, 150, 80, true );

次は、実際にサムネイル画像を表示させたい場所に記述するコードを説明します。

表示させたい場所にコードを記述する

functions.phpでの作業が済んだら、
実際にサムネイルを表示させたい場所に以下のコードを書き込みます。

<?php the_post_thumbnail(‘original_thumbnail’); ?>

WordPressのテンプレートタグ、
the_post_thumbnail
を使って、先程つけた名前「original_thumbnail」を呼び出します。

これだけで表示させることが出来ますので、簡単ですね。

後は、CSSなどでデザインを装飾すれば良いと思います。

注意!過去にアップした画像には反映されない!

この設定は、過去にアップしたサムネイル画像には反映されませんので、
過去記事に反映させたい場合は、
もう1度、画像をアップし直してサムネイルに指定してあげてください。

実は、番台さんは、
この記述をしてもなかなか反映されないので、ずいぶん悩んでしまいました。。。

「true」にしても設定通りにならない人は、
再アップしてみてください。

とりあえず、最新記事一覧などでサムネイル表示をさせたい場合は、
5件とか数が少ないでしょうから、再アップもそれほど負担にならないでしょう。

こういうサイズ指定は、サイトを作る前段階で考えておかないといけないのですね。
勉強になりました。

【参考サイト】
ウェブデザイン hasegawahiroshi.jp
WordPressのアイキャッチ画像を使う

スポンサー リンク

このページの先頭へ