【WordPress開発メモ】the_post_thumbnail() と get_the_post_thumbnail_url() の違いと正しい使い方（Lightbox対応）

WordPressでカスタム投稿タイプやギャラリー一覧を実装する際に、
画像に Lightbox を適用したいことはよくあります。
しかし、以下のようなコードを書いてしまい、
エラーや意図しない動作になる方も多いのではないでしょうか？

<a href="<?php the_post_thumbnail('full'); ?>">

このコードはエラーの原因になります。
本記事ではその理由と、正しい記述方法を解説します。

the_post_thumbnail() の役割とは？

the_post_thumbnail() は WordPress のテンプレートタグの1つで、
投稿のアイキャッチ画像を <img> タグとして直接出力する関数です。

例

<?php the_post_thumbnail('medium'); ?>

これは以下のような HTML を出力します。

<img src="https://example.com/wp-content/uploads/xxx.jpg" alt="..." />

だから href="" の中では使えない！

以下のように <a href="..."> の中に使うと、画像タグが出力されてしまい、href 属性の中身が崩れます。

<a href="<?php the_post_thumbnail('full'); ?>">  <!-- NG -->

正しくは get_the_post_thumbnail_url() を使う

get_the_post_thumbnail_url() は、画像のURL（文字列）だけを取得する関数です。
the_post_thumbnail() と違い、HTMLを出力しません。

正しい記述例（Lightbox対応）

<a href="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'full'); ?>">
  <?php the_post_thumbnail('medium'); ?>
</a>

このように表示されます

• <a> の href にはフルサイズ画像のURLが入る
• 内部に medium サイズの画像（サムネイル）を表示
• Lightbox2やPhotoSwipe等と連携可能

サンプルコード：フォトギャラリー一覧（トップページ用）

<section class="top-gallery">
  <div class="inner">
    <h2 class="section-title">フォトギャラリー</h2>
    <?php
    $args = array(
      'post_type' => 'gallery',
      'posts_per_page' => 6,
      'orderby' => 'date',
      'order' => 'DESC',
    );
    $gallery_query = new WP_Query($args);
    ?>
    <?php if ($gallery_query->have_posts()) : ?>
      <ul class="gallery-list">
        <?php while ($gallery_query->have_posts()) : $gallery_query->the_post(); ?>
          <li class="gallery-item">
            <a href="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'full'); ?>">
              <?php the_post_thumbnail('medium'); ?>
            </a>
            <h3 class="gallery-title"><?php the_title(); ?></h3>
          </li>
        <?php endwhile; ?>
      </ul>
      <?php wp_reset_postdata(); ?>
    <?php else : ?>
      <p>現在表示できるギャラリーがありません。</p>
    <?php endif; ?>
  </div>
</section>

まとめ

関数名	用途	hrefの中で使える？
the_post_thumbnail()	<img> タグを直接出力	❌（使えない）
get_the_post_thumbnail_url()	画像URLのみを取得	✅（使える）

LightboxなどのJavaScriptライブラリと連携したいときは、URL文字列だけを取得する関数（get_the_post_thumbnail_url()）を使うのが正解です。

💬 あとがき

WordPressテーマカスタマイズでありがちなミスですが、
正しく理解すればLightboxやギャラリー実装もスムーズになります。
疑問や「Swiper版も知りたい！」などがあれば、ぜひコメントで教えてください。

Favorite