カテゴリーごとにアイキャッチ画像の出力サイズを変更したいときとか、PC用とスマホ用で画像のサイズを個別に用意したいときとかによくやる方法。
アイキャッチ画像の出力サイズが固定の場合
アイキャッチ画像の出力サイズが固定の場合は下記のようにfunctions.phpに書く。
<?php
// アイキャッチ画像の追加（投稿及び固定ページで有効にする）
add_theme_support( 'post-thumbnails' );
// アイキャッチ画像のサイズを指定する
set_post_thumbnail_size( 190, 190, true );
?>そして、テーマの中で下記のように出力する。
<?php
if ( has_post_thumbnail() ) {
// サムネイルを持っているなら出力しようか
the_post_thumbnail();
} else {
// サムネイルを持っていないなら、NoImage画像でも出しておこうか
echo '<img src="'.bloginfo('template_url').'/hogehoge/cmn_noimage.png" width="190" height="190" alt="NoImage">';
}
?>アイキャッチ画像の出力サイズを出し分けたい
画像アップロード時に生成される画像のサイズを増やしてアイキャッチ画像に利用するイメージ。
管理画面から設定できる画像のサイズは、[ large ][ medium ][ thumbnail ] の3種類なので、add_image_size()を使ってこれら以外のサイズを作る。
add_image_size( $name, $width, $height, $crop );| $name | サイズ名：好きな名前をつける 例）’myOriginalSize’ |
|---|---|
| $width | 画像の幅：ピクセル単位で指定 |
| $height | 画像の高さ：ピクセル単位で指定 |
| $crop | 切り抜く（true）か切り抜かないか（false） |
※画像サイズ指定の引数については【WordPress 自作 Theme の functions.php】にもちょっと書いています。
というわけで、下記のようにfunctions.phpに書いて複数サイズを用意する。
<?php
// アイキャッチ画像の追加（投稿及び固定ページで有効にする）
add_theme_support( 'post-thumbnails' );
// デフォルトのアイキャッチ画像のサイズを指定（なくても平気）
set_post_thumbnail_size( 190, 190, true );
// アップロード時に生成される画像のサイズを増やす
add_image_size( 'myOriginalSizeA', 250, 250, true );
add_image_size( 'myOriginalSizeB', 250, 125, true );
?>そして、テーマの中で例えば下記のように出力する。
※下記はcategoryAとcategoryBで出し分けするイメージのサンプルです。
<?php
if (has_post_thumbnail()){
// サムネイルを持っているなら出力しようか
if(is_category('categoryA')){
the_post_thumbnail('myOriginalSizeA');
}elseif(is_category('categoryB')){
the_post_thumbnail('myOriginalSizeB');
}else{
the_post_thumbnail();
}
}else{
// サムネイルを持っていないなら・・・の処理
}
?>