いつまで経ってもわからない、WEBってやつは・・・(´・ω・`)

【 WordPress 】[追記あり]Advanced Custom Fieldsプラグインでアップロード画像サイズを指定して表示

みんなだいすき!Advanced Custom Fieldsにて、画像を表示する際、

CSSでアップロードした画像サイズをムリヤリ変更するっていうのもありですが、
『 メディア 』で設定されているサイズで表示させたり、
更にみんなだいすき『 add_image_size(‘size1’,200,200); 』とかの画像のサイズを表示させることもできるんだね(/・ω・)/!っていうメモです。。

(´・ω・`)<知らなかったんだ・・面倒くさいからいつも画像URL取得してた☆

知ってる人は生暖かい目でry

Advanced Custom Fieldsプラグインをインストール

そして有効(/・ω・)/

左メニューにできた『 カスタムフィールド 』で画像のカスタムフィールドを作成

ここで、『 返り値 』を『 画像ID 』に

 AdvancedCustomFields_img01

※カスタムフィールド全体だけど、『 style 』を『 Standard(WP metabox) 』にすると見た目がいいです(ノ´∀`*)

AdvancedCustomFields_img02

function.phpに好きな画像サイズを追加

add_image_size('size1',400,300);

■add_image_size( $name, $width, $height, $crop );
$name ・・・ 画像サイズの名前
$width ・・・ 画像の横幅(px)
$height ・・・ 画像の縦幅(px)
$crop ・・・ 画像の切り抜きを行うか否か(true/false 初期値:false)falseの場合はリサイズされる
関数リファレンスadd image size

上記で指定したサイズで内容を取得する

<?php
	$attachment_id = get_field('★カスタムフィールド名');
	$size = "☆画像サイズ名";
	$image = wp_get_attachment_image_src( $attachment_id, $size );
	$attachment = get_post( get_field('★カスタムフィールド名') );
	$alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
	$image_title = $attachment->post_title;
?>

 参考 : http://blog.pianoman-net.com/?p=5580

  • ★カスタムフィールド名 ・・・ カスタムフィールド名です(フィールドラベルではないです、フィールド名です)
  • ☆画像サイズ ・・・ thumbnail、medium、 large、 full、カスタム名(上記サンプルだと size1)

出力

<img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php echo $alt; ?>" title="<?php echo $image_title; ?>">

 ※画像へのパス

<?php echo wp_get_attachment_url( get_field( '★カスタムフィールド名',$post->ID) ); ?>

 これでサイズの大きな画像をムリヤリ小さく表示とかさせて重くなることないね(ノ´∀`*)♪

あと、上記で使用した関数のメモも(´・ω・`)。

■wp_get_attachment_image_src( $attachment_id, $size, $icon );
関数リファレンスwp_get_attachment_image_src
$attachment_id ・・・ 添付ファイルのID
$size ・・・ 添付ファイルサイズ(thumbnail, medium, large, full)
$icon ・・・ 添付ァイルを表すアイコン画像を使用するか否か(true/false 初期値:false)

■get_post_meta($post_id, $key, $single);
※関数リファレンスget_post_meta
$post_id ・・・ 添付ファイルのID
$key ・・・ カスタムフィールドの名前
$single ・・・ 返す値が指定されたキーを持つ単一の値か複数か(true/false 初期値:false)

■wp_get_attachment_url( $id );
関数リファレンスwp_get_attachment_url
$id ・・・ 添付ファイルの投稿情報ID(省略時は0)

[2014/10/27追記]めんどくさいので関数にしたメモ(ΦωΦ)+

function.phpに下記追加

//カスタムフィールド画像
function get_custom_img($fname,$fsize) {
	$attachment_id = get_field($fname);
	$image = wp_get_attachment_image_src( $attachment_id, $fsize );
	$attachment = get_post( get_field($fname) );
	$alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
	$image_title = $attachment->post_title;
	$fimgobj = '<img src="'.$image[0].'" width="'.$image[1].'" height="'.$image[2].'" alt="'.$alt.'" title="'.$image_title.'">';
	return $fimgobj;
}

表示側

<?php echo get_custom_img('カスタムフィールド名','画像サイズ'); ?>

(※画像サイズ:thumbnail/medium/large/full/カスタムサイズ)

条件分岐付きサンプル(なければサムネイル)←これどんなシチュエーション(*´∀`*)w

<?php if(get_field('カスタムフィールド名',$post->ID)){ echo get_custom_img('カスタムフィールド名','画像サイズ'); }else{ echo get_the_post_thumbnail($post->ID, '画像サイズ'); } ?>