・wp_get_attachment_image_src()って何？
こんな疑問にお答えします。
画像を反映するさいに、wp_get_attachment_image_src()を使うことがありますよね。
wp_get_attachment_imageもあったりと、使い道を忘れることが多々ありました。。
そこで自分のメモとして、今回詳細を解説。
この際にちゃんと覚える！
・wp_get_attachment_image_src()とは？
・wp_get_attachment_image()との違いは？
目次
【解決】wp_get_attachment_image_src()とは？【WordPress】
wp_get_attachment_image_src()はWordPress関数のひとつ。
画像を反映・取得するときによく使われます。
具体的には、この関数を使うことで、添付ファイルのURL、サイズ、MIMEタイプなどの情報を取得することが可能です。
wp_get_attachment_image_src( $attachment_id, $size = 'thumbnail', $icon = false );| $attachment_id | 添付ファイルのID |
| $size | 画像サイズ。 デフォルトは thumbnail |
| $icon | アイコンかどうかの指定。 デフォルトは false |
$icon パラメータは、添付ファイルが画像ではなく、ドキュメントやPDFなどのファイルである場合に、そのファイルに関連付けられたアイコンのURLを取得するために使われます。
$sizeの画像サイズには、新たに追加したサイズを使うことも可能。
追加方法はこちらになります↓
【WordPress】画像サイズのリサイズ・カスタマイズ方法【add_image_size()】 wp_get_attachment_image_src()で取得できる配列がこちら。
array(
[0] => URL,
[1] => 幅,
[2] => 高さ,
[3] => true/false (画像の縦横比が維持される場合は true, そうでなければ false)
)例としてアイキャッチ画像のURLを取得する場合、以下のようにコードを書くことができます。
$thumb_id = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_src( $thumb_id, 'thumbnail', true )[0];このコードでは、get_post_thumbnail_id() 関数を使って、投稿に設定されたアイキャッチ画像のIDを取得。
そしてwp_get_attachment_image_src() 関数を使って、アイキャッチ画像のURLを取得しています。
【簡単】アイキャッチ画像の表示・取得方法【WordPress】 新たに追加したサイズを使うとこんな感じになります。
add_image_size( 'custom-size', 500, 500 );$thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'custom-size', true);
$thumb_url = $thumb_url_array[0];wp_get_attachment_image_src()で取得した画像を反映するには、HTMLのimgタグの中に指定すればOK。
<?php
$thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail', true);
$thumb_url = $thumb_url_array[0];
$thumb_width = $thumb_url_array[1];
$thumb_height = $thumb_url_array[2];
?>
<img src="<?php echo $thumb_url; ?>" alt="<?php the_title(); ?>" width="<?php echo $thumb_width; ?>" height="<?php echo $thumb_height; ?>">アイキャッチ画像の情報を取得し、<img>タグのsrc属性に画像のURL、alt属性に記事のタイトル、width属性とheight属性に画像の幅と高さ
を指定しています。
【解決】wp_get_attachment_image_src()とwp_get_attachment_image()の違いは？
wp_get_attachment_image_src()と似ているのが、wp_get_attachment_image()ですよね。
違いをまとめるとこんな感じ。
| wp_get_attachment_image_src() | 画像のURLや幅・高さなどの 情報を含んだ配列を返す |
| wp_get_attachment_image() | <img>タグを生成して直接出力する |
要は画像情報を取得するか、画像をhtmlコードとして出力するかの違いですね。
wp_get_attachment_image()を使った場合の、画像反映コードがこちらになります。
<?php
$thumb_id = get_post_thumbnail_id();
echo wp_get_attachment_image($thumb_id, 'thumbnail');
?>アイキャッチ画像の<img>タグを取得し、echo文で直接出力しています。
<img width="150" height="150" src="https://example.com/wp-content/uploads/2023/03/sample-image-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="Sample Image" loading="lazy" srcset="https://example.com/wp-content/uploads/2023/03/sample-image-150x150.jpg 150w, https://example.com/wp-content/uploads/2023/03/sample-image-300x300.jpg 300w, https://example.com/wp-content/uploads/2023/03/sample-image-100x100.jpg 100w, https://example.com/wp-content/uploads/2023/03/sample-image.jpg 500w" sizes="(max-width: 150px) 100vw, 150px" />wp_get_attachment_image()関数を使用した場合には、画像のサイズが自動的に調整されます。
また、srcsetやsizes属性が追加され、レスポンシブ対応もしていますね。
<img src="https://example.com/wp-content/uploads/2023/03/sample-image-150x150.jpg" width="150" height="150" alt="Sample Image">wp_get_attachment_image_src()関数を使用した場合には、画像のサイズやレスポンシブデザインに関する情報が出力されていませんね。
【解決】wp_get_attachment_image_src()とは？【WordPress】：まとめ
- 「wp_get_attachment_image_src()」は、画像のURLや幅・高さなどの情報を含んだ配列を返す
- 「wp_get_attachment_image()」は、imgタグを生成して出力する
wp_get_attachment_image_src()はよく使うので覚えておきたい！
