CHIPS

制作チップス

Advanced Custom Fieldsの出力方法

2025年6月23日

カテゴリー: 制作チップス

ACF(Advanced Custom Fields)は、WordPressでカスタムフィールドを簡単に追加・管理・表示できるプラグインです。

フィールドをテンプレートに表示

single.php page.php に以下のようにコードを追加する

テキストフィールド

テキストフィールド:subtitle

<?php
$subtitle = get_field('subtitle');
if ($subtitle) {
    echo '<p>' . esc_html($subtitle) . '</p>';
}
?>

画像フィールド

画像フィールド:custom_image

<?php
$image = get_field('custom_image');
if ($image) {
    echo '<img src="' . esc_url($image['url']) . '" alt="' . esc_attr($image['alt']) . '">';
}
?>

画像フィールドの設定について、詳しくはこちらもどうぞ

リピーターフィールド ※プロ機能(ACF Pro)

<?php if (have_rows('gallery')): ?>
    <ul>
    <?php while (have_rows('gallery')): the_row(); ?>
        <?php $img = get_sub_field('image'); ?>
        <li><img src="<?php echo esc_url($img['url']); ?>" alt="<?php echo esc_attr($img['alt']); ?>"></li>
    <?php endwhile; ?>
    </ul>
<?php endif; ?>

選択肢フィールド(Radio Button, Select)

選択肢フィールド:product_color

<?php
$product_color = get_field('product_color');
if ($product_color) {
    echo '<p>色: ' . esc_html($product_color) . '</p>';
}
?>

日付フィールド

日付フィールド:release_date

<?php
$release_date = get_field('release_date');
if ($release_date) {
    echo '<p>発売日: ' . date('Y年m月d日', strtotime($release_date)) . '</p>';
}
?>

strtotime()を使って日付をUNIXタイムスタンプに変換し、date()関数で任意のフォーマットに変換できます。

実用例

カスタム投稿タイプ:product

single-product.phpに「製品名、価格、製品画像、製品説明」の情報を表示する場合

<div class="product-single">
    <?php while (have_posts()): the_post(); ?>
        <h1><?php the_title(); ?></h1>

        <?php
        // 製品画像
        $product_image = get_field('product_image');
        if ($product_image): ?>
            <div class="product-image">
                <img src="<?php echo esc_url($product_image['url']); ?>" alt="<?php echo esc_attr($product_image['alt']); ?>">
            </div>
        <?php endif; ?>

        <div class="product-details">
            <p><strong>価格:</strong>¥<?php echo esc_html(get_field('product_price')); ?></p>
            <div class="product-description">
                <strong>製品説明:</strong>
                <?php the_field('product_description'); ?>
            </div>
            <p><strong>在庫数:</strong><?php echo esc_html(get_field('product_stock')); ?>個</p>

            <?php if (have_rows('product_specifications')): ?>
                <h3>製品仕様</h3>
                <ul>
                    <?php while (have_rows('product_specifications')): the_row(); ?>
                        <li><?php the_sub_field('spec_name'); ?>: <?php the_sub_field('spec_value'); ?></li>
                    <?php endwhile; ?>
                </ul>
            <?php endif; ?>
        </div>
    <?php endwhile; ?>
</div>