get_field( ‘フィールド名’ ) the_field( ‘フィールド名’ ) 使ってコードを書いていきます。
下記のようなコードを書きました。get_field() 関数は、指定されたカスタムフィールドの値を取得します。the_field() 関数は、指定されたカスタムフィールドの値を取得して直接出力（表示）します。
<div class=”p-gift-page__content”>
<?php
$gift_query = new WP_Query(
array(
‘post_type’ => ‘products‘,
‘posts_per_page’ => ４,
‘orderby’ => ‘item’,
‘order’ => ‘ASC’
)
);
?>
<?php if ($gift_query->have_posts()) : ?>
<?php while ($gift_query->have_posts()) : ?>
<?php $gift_query->the_post(); ?>
<li class=”p-gift__item”>
<?php
$image = get_field(‘image’);
if ($image) {
// 画像のURLとaltテキストを抽出
$url = $image[‘url’];
$alt = $image[‘alt’];// imgタグで画像を表示
echo ‘<img src=”‘ . esc_url($url) . ‘” alt=”‘ . esc_attr($alt) . ‘”>’;
}
?>
<div class=”p-gift__item-title”>
<?php if (get_field(‘item’)) : ?>
<?php the_field(‘item’); ?>
<?php endif; ?>
</div>
<div class=”p-gift__item-price”>
<?php if (get_field(‘price’)) : ?>
<?php the_field(‘price’); ?>
<?php endif; ?>
</div>
<div class=”p-gift__item-button”>
<a href=”#”>ショップで確認する</a>
</div>
</li><!– p-gift__item –>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
</div><!– p-gift-page__content>
大まかな流れとしてはカスタム投稿タイプ products (ギフト・贈り物）から特定の条件に一致する投稿をサブループを回して表示します。
まず、products カスタム投稿タイプから4件の投稿を昇順で取得する新しい WP_Query オブジェクトを作成しています。
Advanced Custom Fields (ACF) プラグインの get_field() 関数を使って、投稿に関連付けられた画像や他のフィールド（例: item, price）の値を取得し、表示しています。画像のURLとaltテキストは安全に出力するために esc_url() と esc_attr() でエスケープされています。
カスタムフィールドを使って、ギフト・贈り物のページが完成しました。
