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のアイキャッチ画像を使う
Twitter @danshiblog
Facebookページ