[WordPress] Advanced Custom Fieldsの拡張パッケージ、Flexible Content Fieldの使い方

Flexible Content Fieldとは？

Advanced Custom Fields（以下ACF）は便利なのですが、予め設定しておいた数・種類・順番でしか入力出来ないのが難点です。場合によってパーツの数や種類、順番が変わるようなページはそもそも実現出来ないか、出来ても非常に使いづらい管理画面になってしまいます。

そんな難点を解決するのが拡張パッケージであるFlexible Content FieldやRepeater Fieldsです。

注意としては、有料パッケージな点です。といっても各パッケージ$25AUD（記事記述時点）で現状のレートで2000円前後の価格ですので、すぐに値段以上の活躍は見せてくれるはずです。

ACF | Flexible Content Field

それぞれのパッケージの特徴

まず、パッケージを使用しない場合は、パーツの数・種類・順番は固定になります。

Repeater Fieldsを使用した場合は、パーツの数は自由に増減出来るようになりますが、種類・順番は固定のままです。

Flexible Content Fieldを使用すると、パーツの数・種類・順番は全て自由に設定できます。

Repeater Fieldsに関しては日本語の情報が結構見つかるのですが、Flexible Content Fieldに関しては日本語情報がほとんど見当たらなかったので今回はFlexible Content Fieldに関して説明したいと思います。

また、ACF自体の使い方から説明してしまうとかなり長くなってしまうので、ACF自体の基本的な使い方に関しては理解している前提で話を続けたいと思います。

Flexible Content Fieldの使い方

説明動画

Flexible Content Field（長いので、以下FCFと略します）の動作イメージに関しては、公式サイトに動画がありますので、まずそちらを見て頂くとイメージがつきやすいかと思います。

ACF | Flexible Content

投稿画面

実際に使用する際の順序としては、「カスタムフィールドの設定」→「投稿画面で実際に投稿」の順序なのですが、投稿画面を先に見ていただいた方が理解しやすいので、先にFCFを使うとどんな投稿画面になるのか見てみましょう。

FCFを使用すると、上のような投稿画面になります。赤枠で囲んでいる部分がFCFの部分です。

「パーツを追加」ボタンを押すと以下の様にポップアップが出てきます。

「画像」と「テキスト+画像」といったポップアップが出てきましたが、これはそれぞれカスタムフィールドの設定画面であらかじめ作成しておいたFCFのパーツです。FCFでは「レイアウト」と呼んでいるので以下同様に「レイアウト」と書いていきます。

ここで「画像」のレイアウトを選択すると、次のような画面になります。

さらに「テキスト+画像」のレイアウトを選択すると、次のようになります。

このようにレイアウトを追加できる他、削除はもちろんドラッグによる順番の変更も可能です。ACFデフォルトやRepeater Fieldと比べて少し画面が複雑になってしまうので、クライアントがスムーズに使えるかよく考えて導入する必要があるかとは思います。

設定画面

では、次は設定画面を見てみましょう。

赤枠の部分がFCF独自の設定項目です。

「レイアウト」は投稿画面で出てきたパーツのことですね。例では２種類だけしか出てきませんでしたが、もちろん自由に種類も増やせますし、その内容もここで柔軟に設定できます。

「Button Label」では投稿画面でレイアウトを追加するボタンに表示される文字を自由に設定できます。デフォルトだと「Add Row」と表示されており、意味が伝わりにくいのでここでわかりやすい文字を設定しておきましょう。

「Minimum/Maximum Layouts」では、レイアウトの最小/最大数を設定できます。

以上が設定画面の説明です。

PHP出力部分ソースコード例

最後に、テンプレートに記述するソースコードを説明したいと思います。

FCFのテンプレート内でのコードは下記のようになります。

<?php while(has_sub_field('フィールド名')) : ?>
  <?php if(get_row_layout() == 'レイアウト名1') : ?>
    <?php the_sub_field('サブフィールド名1'); ?>
  <?php elseif(get_row_layout() == 'レイアウト名2') : ?>
    <?php the_sub_field('サブフィールド名2'); ?>
  <?php endif; ?>
<?php endwhile; ?>

順番に説明していきます。

<?php while(has_sub_field('フィールド名')) : ?>

ここでは、whileによって投稿画面で設定したレイアウトの数だけループさせています。

<?php if(get_row_layout() == 'レイアウト名1') : ?>

2,4行目の「get_row_layout()」によって、現在のレイアウト名を取得して、それによって出力するHTMLを分岐させています。

<?php the_sub_field('サブフィールド名1'); ?>

この処理によって、投稿画面でサブフィールドに設定されたテキストや画像などが出力されます。

今回のパターンの場合は、一例として以下の様なソースコードになります。

<?php
  function imgFromObj($obj) {
    $url = $obj["url"];
    echo "<img src='{$url}'>";
  }
?>
<?php while(has_sub_field('flex')) : ?>
  <?php if(get_row_layout() == 'flex_img') : ?>
    <div class="flexImgBox">
      <p class="visual"><?php imgFromObj(get_sub_field('flex_img_img')); ?></p>
      <p class="caption"><?php the_sub_field('flex_img_cap'); ?></p>
    </div>
  <?php elseif(get_row_layout() == 'flex_txtimg') : ?>
    <div class="flexTxtImgBox clearfix">
      <p class="visual <?php the_sub_field('flex_txtimg_pos'); ?>"><?php imgFromObj(get_sub_field('flex_txtimg_img')); ?></p>
      <p class="txt">
        <?php the_sub_field('flex_txtimg_txt'); ?>
      </p>
    </div>
  <?php endif; ?>
<?php endwhile; ?>

以上

FCFを使用すればかなり柔軟な投稿画面を作成することが出来るので、是非一度触ってみることをおすすめします。

以上、たにっぱでした〜