WordPressでカスタムフィールドから画像IDやURLを表示する方法

Posted on by

WordPressのカスタムフィールドを使用して、
画像を特定のページや投稿で表示する方法にはいくつかのポイントがあります。
特に、カスタムフィールドに保存されているデータが画像IDなのか、
画像URLなのかを確認し、それに応じた処理を行うことが重要です。
この記事では、画像IDまたはURLがカスタムフィールドに
保存されている場合の対応方法について解説します。

カスタムフィールドから画像IDまたはURLを取得する

カスタムフィールドに保存されたデータを取得するには、get_post_meta() 関数を使用します。
この関数で、カスタムフィールドの値を取得した後、
それが画像IDかURLかを判別し、適切な処理を行います。

まず、カスタムフィールドの値が画像IDであれば、
WordPressの wp_get_attachment_image_url() 関数を使ってURLを取得します。
もしカスタムフィールドにすでにURLが保存されていれば、そのまま画像を表示できます。

PHPコードのサンプル

以下のコードは、カスタムフィールド gnav_thumbnail に保存されたデータを使って画像を表示する例です。
データが画像IDかURLかを確認し、それに応じた処理を行います。

<?php
    // 投稿が正しくロードされているかを確認し、明示的にクエリを使って取得
    $args = array(
        'post_type' => 'page', // 'page' のカスタム投稿タイプを指定
        'name'      => 'fukushisou', // スラッグ 'fukushisou' のページを指定
    );

    $custom_query = new WP_Query( $args );

    if ( $custom_query->have_posts() ) :
        while ( $custom_query->have_posts() ) : $custom_query->the_post();

            // カスタムフィールド 'gnav_thumbnail' の値を取得
            $gnav_thumbnail_id_or_url = get_post_meta( get_the_ID(), 'gnav_thumbnail', true );

            // デバッグ: 取得した値を出力
            echo '<pre>';
            var_dump( $gnav_thumbnail_id_or_url );
            echo '</pre>';

            // もし値が画像IDであれば、URLを取得
            if ( is_numeric( $gnav_thumbnail_id_or_url ) ) {
                // 画像IDから画像URLを取得
                $gnav_thumbnail_url = wp_get_attachment_image_url( $gnav_thumbnail_id_or_url, 'full' );
                if ( $gnav_thumbnail_url ) {
                    echo '<img src="' . esc_url( $gnav_thumbnail_url ) . '" alt="">';
                }
            } elseif ( filter_var( $gnav_thumbnail_id_or_url, FILTER_VALIDATE_URL ) ) {
                // もし値がURLならそのまま表示
                echo '<img src="' . esc_url( $gnav_thumbnail_id_or_url ) . '" alt="">';
            } else {
                echo '画像が見つかりませんでした。';
            }

        endwhile;
        wp_reset_postdata(); // クエリをリセット
    endif;
?>

具体的な処理の流れ

カスタムフィールドの値を取得

get_post_meta() で投稿やページのカスタムフィールド gnav_thumbnail の値を取得します。

デバッグ用の出力

値が正しく取得できているか確認するために、var_dump() を使用してデバッグ出力します。
これにより、値が 数値（画像ID） なのか、URL なのかを確認できます。

画像IDの場合

もしカスタムフィールドの値が数値（画像ID）であれば、
wp_get_attachment_image_url() を使って画像URLを取得し、画像を表示します。

URLの場合

値がURLであれば、そのまま画像を表示します。
filter_var() 関数を使って、値が正しいURL形式であるかを確認しています。

画像が存在しない場合

画像IDもURLも存在しない場合は、「画像が見つかりませんでした」と表示します。

よくある問題点

画像IDが表示される

カスタムフィールドに保存されているのが画像IDの場合、
直接表示しようとするとIDが表示されてしまいます。
この場合、wp_get_attachment_image_url() を使ってIDからURLに変換する必要があります。

画像が表示されない

画像URLが表示されない場合、カスタムフィールドに保存されている値が間違っている可能性があります。デバッグ出力を活用し、フィールドに保存されているデータを確認しましょう。

まとめ

WordPressでカスタムフィールドに保存された画像データを正しく表示するためには、
フィールドに保存されているデータが画像IDなのかURLなのかを確認し、適切な処理を行う必要があります。
デバッグ出力を活用し、正確なデータを取得して画像を表示させましょう。

この方法を使えば、カスタムフィールドを柔軟に活用し、
特定のページや投稿に対応した画像を表示することができます。