WordPress で ACF を使用してカスタムフィールドの値を表示する方法

WordPress のカスタマイズにおいて、Advanced Custom Fields（ACF）は非常に強力なツールです。これを利用することで、テーマの機能を拡張し、投稿やページにカスタムデータを簡単に追加できます。この記事では、ACF を使用してカスタムフィールドの値を表示する方法について、基本から応用まで詳しく解説します。

基本的なカスタムフィールドの表示

まず、ACF でカスタムフィールドを作成し、それを特定の投稿タイプに割り当てます。例として、フィールド名が example_field のテキストフィールドを想定します。このフィールドの値を投稿ページで表示するには、以下のコードをテーマの適切なファイル（例えば single.php）に挿入します。

<?php
$field_value = get_field('example_field');
if (!empty($field_value)) {
    echo '<div>' . esc_html($field_value) . '</div>';
}
?>

このシンプルなスニペットは、指定したフィールドに値が存在するかをチェックし、値があれば HTML の div 要素として表示します。esc_html() 関数は、セキュリティを確保するために重要です。これにより、XSS（クロスサイトスクリプティング）攻撃を防ぐことができます。

繰り返しフィールドの扱い

より複雑なデータ構造を扱う場合、ACF の繰り返しフィールドが役立ちます。例えば、関連記事のリストなどを投稿に追加したい場合、繰り返しフィールドを使用して各関連記事を個別に管理できます。

<?php
if (have_rows('related_articles')):
    while (have_rows('related_articles')): the_row();
        $post_object = get_sub_field('related_posts');
        if ($post_object):
            $post = $post_object;
            setup_postdata($post);
            echo '<li><a href="' . get_the_permalink() . '">' . get_the_title() . '</a></li>';
            wp_reset_postdata();
        endif;
    endwhile;
endif;
?>

このコードは、related_articles という繰り返しフィールド内で定義された各 related_posts 投稿オブジェクトを取得し、リンク付きのタイトルをリスト形式で表示します。

投稿オブジェクト内のカスタムフィールドの表示

投稿オブジェクト内にカスタムフィールドがある場合、その値を取得するには、投稿IDを使用して get_field() 関数を呼び出します。

<?php
if (have_rows('related_articles')):
    while (have_rows('related_articles')): the_row();
        $post_object = get_sub_field('related_posts');
        if ($post_object):
            $custom_field_value = get_field('custom_field_name', $post_object->ID);
            if (!empty($custom_field_value)) {
                echo '<div>' . esc_html($custom_field_value) . '</div>';
            }
        endif;
    endwhile;
endif;
?>

このスニペットでは、各投稿オブジェクトの custom_field_name というフィールドから値を取得し、それを表示しています。このようにして、複数の階層にわたるデータ構造でも、ACF を使って簡単に管理できます。

繰り返しフィールド内の繰り返しフィールドの表示

より複雑なデータ構造では、繰り返しフィールド内にさらに繰り返しフィールドを持つ場合があります。これは以下のようにして取り扱います。

<?php
if (have_rows('related_articles')):
    while (have_rows('related_articles')): the_row();
        $post_object = get_sub_field('related_posts');
        if ($post_object):
            if (have_rows('inner_repeater_field', $post_object->ID)):
                while (have_rows('inner_repeater_field', $post_object->ID)): the_row();
                    $sub_field_value = get_sub_field('sub_field_name');
                    echo '<li>' . esc_html($sub_field_value) . '</li>';
                endwhile;
            endif;
        endif;
    endwhile;
endif;
?>

このコードでは、外側の related_articles 繰り返しフィールドの各 related_posts 投稿オブジェクトから、さらに inner_repeater_field 繰り返しフィールドを処理しています。各 sub_field_name サブフィールドの値をリスト形式で表示しています。

これらの例を通じて、ACF を使ったWordPressのカスタマイズの可能性を広げることができます。コードの再利用やカスタマイズを進めることで、さまざまなプロジェクトに適用可能な強力なWebサイトを構築することが可能です。