カスタムフィールドの画像を表示したい

Question

#実現したいこと
wordpressで以下のコードで画像を表示させたいです。

    <div class="main-image-container bottom">
        <?php
        $args = array(
            'posts_per_page'   => -1, // 表示数
            'page_id'    => 7, // フロントページ
            'orderby'          => 'date',  // 日付順
            'order'            => 'DESC',  // 降順
        );
        $query = new WP_Query($args);
        if (!empty($query->posts)) {
        ?>
        <ul class="main-image">
        <?php
            foreach($query->posts as $key => $front) {
                $custom_posts = get_post_meta($front->ID);
                $query->the_post();
        ?>
        <?php if(!empty($custom_posts['main_visual_image_1'][0])) { ?>
            <li><img src="<?php echo esc_url(wp_get_attachment_image_src($custom_posts['main_visual_image_1'][0], 'full')[0]); ?>" style="height: 100%" alt=""></li>
        <?php } ?>
        <?php if(!empty($custom_posts['main_visual_image_2'][0])) { ?>
            <li><img src="<?php echo esc_url(wp_get_attachment_image_src($custom_posts['main_visual_image_2'][0], 'full')[0]); ?>" style="height: 100%" alt=""></li>
        <?php } ?>
        <?php if(!empty($custom_posts['main_visual_image_3'][0])) { ?>
            <li><img src="<?php echo esc_url(wp_get_attachment_image_src($custom_posts['main_visual_image_3'][0], 'full')[0]); ?>" style="height: 100%" alt=""></li>
        <?php } ?>
        <?php if(!empty($custom_posts['main_visual_image_4'][0])) { ?>
            <li><img src="<?php echo esc_url(wp_get_attachment_image_src($custom_posts['main_visual_image_4'][0], 'full')[0]); ?>" style="height: 100%" alt=""></li>
        <?php } ?>
        <?php if(!empty($custom_posts['main_visual_image_5'][0])) { ?>
            <li><img src="<?php echo esc_url(wp_get_attachment_image_src($custom_posts['main_visual_image_5'][0], 'full')[0]); ?>" style="height: 100%" alt=""></li>
        <?php } ?>
        <?php
            }
        }
        ?>
        </ul>
        </div>

#試したこと
カスタムフィールドで表示させるのかと思い、

プラグイン：Advanced Custom Fieldsを使用し、

フィールド名：main_visual_image_1
フィールドタイプ：画像
返り値のフォーマット：画像配列（IDやURLも試しました）

で色々試してみたのですが、うまくいきません。
そもそも、カスタムフィールドの画像という着眼点が違うのでしょうか…？
よろしくお願いいたします。

Answer 1

全部のカスタムフィールドの値の配列を取得したいなら
get_post_metaではなくget_post_costomACFを使うならget_field

Comments

[wa_ta_ko_]

ご回答ありがとうございます。
get_fieldでいくつか置き換えてみると表示することができました。
本当にありがとうございます。