Advanced Custom Fieldsの出力方法
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>
