プラグインAdvanced custom fields(ACF)のthe_flexible_field関数の使用方法・解説

概要

the_flexible_field関数は、Advanced Custom Fields (ACF) プラグインのフレキシブルコンテンツフィールドに関連するデータを取得し、表示するための便利な関数です。この関数を使用すると、異なるタイプのカスタムコンテンツを持つ複数のコンテンツブロックを簡単に表示できます。よく使われるシナリオには以下のようなものがあります。

記事やページに異なるレイアウトを持たせる。
ギャラリーやスライダーなど、カスタムコンテンツを組み合わせて表示。
複数の情報を持つ複雑なコンテンツセクションを作成。
ユーザーが自由にコンテンツの構造を変更できるインターフェースを提供。
テンプレートの一部として各コンテンツブロックを動的に読み込む。
簡単に再利用可能なコンポーネントを構築し、異なるページで使用する。

構文

the_flexible_field($field_name, $post_id);

パラメータ

$field_name (string): フレキシブルコンテンツフィールドの名前。
$post_id (int, optional): 指定する投稿のID。未指定の場合は現在の投稿が使用される。

戻り値

フレキシブルコンテンツフィールドに含まれる各行のデータ。

バージョン

ACF バージョン: 5.x 以降
WordPress バージョン: 4.0 以降

この関数のアクションでの使用可能性

アクション	使用可能性
mu_plugin_loaded
registered_post_type
plugins_loaded
wp_roles_init
setup_theme
after_setup_theme
set_current_user
init
register_sidebar
wp_loaded
send_headers
parse_query
pre_get_posts
wp
template_redirect
get_header
wp_head

サンプルコード

サンプルコード1

if( have_rows('flexible_content_field') ):
    while( have_rows('flexible_content_field') ): the_row();
        the_sub_field('sub_field_name');
    endwhile;
endif;

このコードは、フレキシブルコンテンツフィールドの各行をループし、サブフィールドのデータを表示します。基本的な使用例として有名です。引用元: https://www.advancedcustomfields.com/resources/flexible-content/

サンプルコード2

if( have_rows('content_blocks') ):
    while( have_rows('content_blocks') ): the_row();
        switch(get_row_layout()) {
            case 'text_block':
                the_sub_field('text_content');
                break;
            case 'image_block':
                echo '<img src="'. get_sub_field('image_url') .'" />';
                break;
        }
    endwhile;
endif;

このコードは、フレキシブルコンテンツフィールドの異なるレイアウトに応じて、テキストブロックまたは画像ブロックを表示します。引用元: https://www.advancedcustomfields.com/resources/flexible-content/

サンプルコード3

if( have_rows('page_sections', 'option') ):
    while( have_rows('page_sections', 'option') ): the_row();
        // ここでコンテンツに応じた表示を行う
        get_template_part('template-parts/' . get_row_layout());
    endwhile;
endif;

このコードは、オプションページで設定されたフレキシブルコンテンツフィールドをループし、行ごとに適切なテンプレートパーツを読み込んで表示します。引用元: https://www.advancedcustomfields.com/resources/flexible-content/

サンプルコード4

$layout = get_flexible_field('layout_field');
if($layout){
    foreach($layout as $row){
        echo '<div class="row">';
        echo $row['content'];
        echo '</div>';
    }
}

このコードは、フレキシブルコンテンツフィールドを取得し、各行に含まれるコンテンツをHTMLで表示します。引用元: https://www.advancedcustomfields.com/resources/flexible-content/

サンプルコード5

if( have_rows('custom_flexible_field') ):
    while( have_rows('custom_flexible_field') ): the_row();
        echo '<h2>' . get_sub_field('title') . '</h2>';
        echo '<p>' . get_sub_field('description') . '</p>';
    endwhile;
endif;

このコードは、フレキシブルコンテンツフィールドから各タイトルと説明を取得し、HTMLの見出しと段落として表示します。引用元: https://www.advancedcustomfields.com/resources/flexible-content/

概要

構文