[wp]画像パスをサイズ指定して出力する方法（カスタムフィールド対応）

初めて使った。

事の始まり
やっていく
解説的なもの

事の始まり

WordPressにアップした画像はメディアで設定したサイズにリサイズ、トリミングされる。

例えばアイキャッチは、記事ページだと大きく表示したいけど一覧だと小さくていい。小さくていいのにでかい画像を読み込むのは無駄ですよねってことで使い分けるシーンがある。

コードの記述的に原寸大にしてしまえば書く手間が削減できていいのだけど、WEBサイトの読み込み速度向上に大きく関わるので使い分けを覚えましょう。

やっていく

ページに付属するアイキャッチはこんな感じ。

引数無しはフルサイズ
<img src="<?php the_post_thumbnail_url(); ?> alt=""  width="<?php echo wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' )[1]; ?>" height="<?php echo wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' )[2]; ?>">
フルサイズ
<img src="<?php the_post_thumbnail_url('full'); ?> alt=""  width="<?php echo wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' )[1]; ?>" height="<?php echo wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' )[2]; ?>">
大サイズ
<img src="<?php the_post_thumbnail_url('large'); ?> alt=""  width="<?php echo wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' )[1]; ?>" height="<?php echo wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' )[2]; ?>">
中サイズ
<img src="<?php the_post_thumbnail_url('medium'); ?> alt=""  width="<?php echo wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium' )[1]; ?>" height="<?php echo wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium' )[2]; ?>">
サムネイル
<img src="<?php the_post_thumbnail_url('thumbnail'); ?> alt=""  width="<?php echo wp_get_attachment_image_src( get_post_thumbnail_id(), 'thumbnail' )[1]; ?>" height="<?php echo wp_get_attachment_image_src( get_post_thumbnail_id(), 'thumbnail' )[2]; ?>">

カスタムフィールド（SmartCustomFields）で登録した画像はこう。

$image = scf::get('image');

<img src="<?php echo wp_get_attachment_image_src($image)[0]; ?>alt=""  width="<?php echo wp_get_attachment_image_src( $image)[1]; ?>" height="<?php echo wp_get_attachment_image_src($image)[2]; ?>">
<img src="<?php echo wp_get_attachment_image_src($image,'full')[0]; ?> alt=""  width="<?php echo wp_get_attachment_image_src( $image, 'full' )[1]; ?>" height="<?php echo wp_get_attachment_image_src( $image, 'full' )[2]; ?>">
<img src="<?php echo wp_get_attachment_image_src($image,'large')[0]; ?> alt=""  width="<?php echo wp_get_attachment_image_src( $image, 'large' )[1]; ?>" height="<?php echo wp_get_attachment_image_src( $image, 'large' )[2]; ?>">
<img src="<?php echo wp_get_attachment_image_src($image,'medium')[0]; ?> alt=""  width="<?php echo wp_get_attachment_image_src( $image, 'medium' )[1]; ?>" height="<?php echo wp_get_attachment_image_src( $image, 'medium' )[2]; ?>">
<img src="<?php echo wp_get_attachment_image_src($image,'thumbnail')[0]; ?> alt=""  width="<?php echo wp_get_attachment_image_src( $image, 'thumbnail' )[1]; ?>" height="<?php echo wp_get_attachment_image_src( $image, 'thumbnail' )[2]; ?>">

繰り返しに格納した場合はこう。

<?php
$fieldset = SCF::get('fieldset');
foreach ($fieldset as $fields):
    $image = $fields['image'];
?>

<img src="<?php echo wp_get_attachment_image_src($image)[0]; ?>alt=""  width="<?php echo wp_get_attachment_image_src( $image)[1]; ?>" height="<?php echo wp_get_attachment_image_src($image)[2]; ?>">
<img src="<?php echo wp_get_attachment_image_src($image,'full')[0]; ?> alt=""  width="<?php echo wp_get_attachment_image_src( $image, 'full' )[1]; ?>" height="<?php echo wp_get_attachment_image_src( $image, 'full' )[2]; ?>">
<img src="<?php echo wp_get_attachment_image_src($image,'large')[0]; ?> alt=""  width="<?php echo wp_get_attachment_image_src( $image, 'large' )[1]; ?>" height="<?php echo wp_get_attachment_image_src( $image, 'large' )[2]; ?>">
<img src="<?php echo wp_get_attachment_image_src($image,'medium')[0]; ?> alt=""  width="<?php echo wp_get_attachment_image_src( $image, 'medium' )[1]; ?>" height="<?php echo wp_get_attachment_image_src( $image, 'medium' )[2]; ?>">
<img src="<?php echo wp_get_attachment_image_src($image,'thumbnail')[0]; ?> alt=""  width="<?php echo wp_get_attachment_image_src( $image, 'thumbnail' )[1]; ?>" height="<?php echo wp_get_attachment_image_src( $image, 'thumbnail' )[2]; ?>">

<?php endforeach; ?>

解説的なもの

wp_get_attachment_image_src　を活用しましょう。

wp_get_attachment_image_src() | Function | WordPress Developer Resources

Retrieves an image to represent an attachment.

配列になってるので欲しい物を指定する感じになる。

[0] => url
[1] => width
[2] => height
[3] => 真偽値: リサイズされいている場合は true、元のサイズの場合は false

URLは当然ながら、作法として<img>にwidth、heightを入れろってのがあるのでそっちも引っ張る。

それぞれをすべてベタ打ちするのはめんどくさいので戻り値の手前までを変数にまとめちゃうのもいいですね。

URLだけで言えばwp_get_attachment_url()もあるんだけど、サイズ指定をしても原寸しか出力されなかった。書き方がまずっただけかもだけど、まあここまで書くことを踏まえたら使わなくていいじゃんね。