PHPのHTML部で画像を貼る

URL直指定

メディアにアップした画像のURLをそのまま使う方法。

<img src="<?php echo esc_url('https://example.com/wp-content/uploads/2026/05/sample.png'); ?>" alt="">

1	<img src="<?php echo esc_url('https://example.com/wp-content/uploads/2026/05/sample.png'); ?>" alt="">

👉 メディアライブラリで画像を開けばURLが確認できる

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="画像はありません">

1	<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="画像はありません">

画像IDを使う方法（これが一番おすすめ）

<?php echo wp_get_attachment_image(123, 'medium'); ?>

1	<?php echo wp_get_attachment_image(123, 'medium'); ?>

👉 HTML丸ごと生成されるから楽

URLだけ欲しい場合

<img src="<?php echo wp_get_attachment_url(123); ?>" alt="">

1	<img src="<?php echo wp_get_attachment_url(123); ?>" alt="">

① フルサイズ画像にリンクする（シンプル）

<a href="<?php echo wp_get_attachment_url(123); ?>">
    <?php echo wp_get_attachment_image(123, 'medium'); ?>
</a>

<?php echo wp_get_attachment_image(123, 'medium'); ?>

</a>

② ライトボックス風（よくある拡大表示）

<a href="<?php echo wp_get_attachment_url(123); ?>" class="lightbox">
    <?php echo wp_get_attachment_image(123, 'medium'); ?>
</a>

<a href="<?php echo wp_get_attachment_url(123); ?>" class="lightbox">

<?php echo wp_get_attachment_image(123, 'medium'); ?>

</a>

その上でJSライブラリを使う👇

👉 クリックで「画面上にふわっと拡大表示」

<?php
$image = wp_get_attachment_image_src(123, 'medium');
?>
<img src="<?php echo esc_url($image[0]); ?>" alt="">

<?php

$image = wp_get_attachment_image_src(123, 'medium');