ACFの柔軟コンテンツでページを組み立てる

ACF（SCF）の柔軟コンテンツ（Flexible Content）は、形の違うブロックを好きな順に積んでページを組む機能です。「見出し＋文章」「画像2枚並び」「お問い合わせボタン」などをパーツとして用意しておけば、編集画面で並べ替えるだけでLPが作れます。

テンプレート側の要点は1つ——get_row_layout()で今の行の種類を判定して出し分けることです。

くり返しフィールドとの違い

• くり返しフィールド——同じ形の行を増やす（よくある質問、スタッフ一覧）
• 柔軟コンテンツ——形の違うブロックを自由な順に積む（LP・サービス紹介ページ）

たとえばこんな構成を、編集画面から自由に組み替えられます。

ページ本文（柔軟コンテンツ：blocks）
├── hero        （見出し・キャッチ・背景画像）
├── text        （リッチテキスト1つ）
├── two_columns （画像＋文章の2カラム）
├── text        （もう1つ文章）
└── cta         （ボタンのラベルとリンク先）

基本の型：get_row_layoutで分岐する

くり返しと同じhave_rows()ループに入り、行ごとに種類を見てHTMLを出し分けます。

<?php if (have_rows('blocks')) : ?>
  <?php while (have_rows('blocks')) : the_row(); ?>

    <?php if (get_row_layout() === 'hero') : ?>
      <section class="hero">
        <?php echo wp_get_attachment_image(get_sub_field('image'), 'full'); ?>
        <h1><?php the_sub_field('title'); ?></h1>
      </section>

    <?php elseif (get_row_layout() === 'text') : ?>
      <section class="text">
        <?php the_sub_field('body'); ?>
      </section>

    <?php elseif (get_row_layout() === 'cta') : ?>
      <section class="cta">
        <a href="<?php echo esc_url(get_sub_field('url')); ?>"><?php the_sub_field('label'); ?></a>
      </section>
    <?php endif; ?>

  <?php endwhile; ?>
<?php endif; ?>

get_row_layout()が返すのは、フィールド設定でレイアウトに付けた「名前（スラッグ）」です。管理画面のラベル（「ヒーロー」など日本語）ではなく、その下の欄の半角英数の名前なので、設定画面で確認しておきます。

分岐が増えてきたらswitchのほうが読みやすくなります。

<?php switch (get_row_layout()) :
  case 'hero': ?>
    <!-- ヒーローのHTML -->
    <?php break;

  case 'cta': ?>
    <!-- CTAのHTML -->
    <?php break;
endswitch; ?>

テンプレートを分割してすっきり保つ

柔軟コンテンツはそのままだとテンプレートが長くなるのが弱点です。レイアウト名でファイルを分ければ、本体は数行で済みます。

<?php while (have_rows('blocks')) : the_row(); ?>
  <?php get_template_part('parts/flex/' . get_row_layout()); ?>
<?php endwhile; ?>

テーマの中にこう並べます。

your-theme/
└── parts/
    └── flex/
        ├── hero.php
        ├── text.php
        ├── two-columns.php
        └── cta.php

読みこまれたパーツの中でも、get_sub_field()はそのまま使えます（今の行の文脈が保たれます）。

<section class="cta">
  <a class="button" href="<?php echo esc_url(get_sub_field('url')); ?>">
    <?php the_sub_field('label'); ?>
  </a>
</section>

ブロックの中でくり返しを使う

柔軟コンテンツのブロックの中に、くり返しフィールドを入れられます。内側でもいつもの3点セットです。

<div class="cards">
  <?php if (have_rows('items')) : ?>
    <?php while (have_rows('items')) : the_row(); ?>
      <div class="card">
        <?php echo wp_get_attachment_image(get_sub_field('image'), 'medium'); ?>
        <h3><?php the_sub_field('title'); ?></h3>
      </div>
    <?php endwhile; ?>
  <?php endif; ?>
</div>

ブロックエディタとどう使い分ける？

いまのWordPressにはブロックエディタがあるので、「自由に積む」だけならエディタでもできます。柔軟コンテンツが向いているのは、デザインを崩さず決まったブロックだけ使わせたいときです。

• 柔軟コンテンツ——用意したブロック以外は作れない＝デザインの統一が保てる。企業サイト・LPの納品向き
• ブロックエディタ——自由度が高いぶん、更新でデザインが崩れることもある。ブログ本文向き

「更新する人が迷わない画面を用意する」——これが柔軟コンテンツの本当の価値です。

まとめ

1. 柔軟コンテンツは形の違うブロックを自由な順に積む機能。同じ形の行ならくり返しで十分
2. ループはくり返しと同じ。get_row_layout()で分岐してHTMLを出し分ける
3. 分岐が増えたらget_template_part('parts/flex/' . get_row_layout())でファイル分割
4. レイアウト名は設定の半角英数の名前。日本語ラベルで分岐すると何も出ない

「積める部品を用意する」発想に切り替えると、納品後も崩れないページが作れます。