backyard.weblog

Main Contents

WordPress アイキャッチ画像のサイズを出し分ける

/ Web, WordPress / ,

Post

この記事を最後に更新したときのWordPressのヴァージョンは 3.2.1 です。

カテゴリーごとにアイキャッチ画像の出力サイズを変更したいときとか、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{
        // サムネイルを持っていないなら・・・の処理
    }
?>
  • Check
  • このエントリーをはてなブックマークに追加
  • Clip to Evernote

Similar Posts

Add Comment

WP-SpamFree by Pole Position Marketing

Comments

From:freelancewp
March 02, 2012 (Fri)

WordPress アイキャッチ画像のサイズを出し分ける :: Backyard.weblog http://t.co/FUNWIjrP

From:chronicle0104
July 20, 2012 (Fri)

WordPress アイキャッチ画像のサイズを出し分ける :: backyard.weblog http://t.co/KLU65ioD @urakeyさんから

From:microminime
February 05, 2013 (Tue)

“WordPress アイキャッチ画像のサイズを出し分ける :: Backyard.weblog” http://t.co/fEEs0gF4

From:LittleLoro
February 05, 2013 (Tue)

WordPress アイキャッチ画像のサイズを出し分ける :: Backyard.weblog
http://t.co/bDlVpazq
13 users

From:ホホ冢次男(じなん)(‘ jjj ’)/
April 26, 2013 (Fri)

@decoy284 さらっと調べただけだけどこれとか
http://t.co/86TuVLHnux

Trackbacks

Trackback URL