プラグイン

ACF ProのThe Flexible Content Fieldで自由自在にレイアウト

2017.11.24

オブジェ

ACF ProのFlexible Content Fieldはすごいです。
この機能を導入するとWordPressが別のCMSシステムを組み込んだみたいになっちゃいます。開発した人ほんとすげーです。表題のレイアウト自由自在は誇張したものではありません。

Flexible Content Fieldで出来ること

Flexible Content Field(以下、柔軟コンテンツ)で出来ることは自由自在にレイアウトすることです。予めレイアウトは作成しておく必要はありますが、自由に組み合わせることができACFのその他のフィールドも内包できますので管理画面から項目を増やさなければならないような要件も満たすことができます。

このようなレイアウトを組み替えて…

レイアウト例

このように変更することも管理画面からドラッグするだけで出来ます。繰り返しフィールドを使えば内包する項目の増減も自在に行えます。

レイアウト例

柔軟コンテンツの出力例

柔軟コンテンツのシンプルな出力例です。柔軟コンテンツにネストする感じでレイアウトを設定、さらにレイアウトにネストする感じで従来のACFの各カスタムフィールドを設定します。

<?php while(has_sub_field('柔軟コンテンツ')) : ?>

  <?php if(get_row_layout() == 'レイアウト1') : ?>
    <?php $custom_f = get_sub_field('custom_f'); ?>
    <?php echo $custom_f ; ?>
  <?php endif; ?>

  <?php if(get_row_layout() == 'レイアウト2') : ?>
    <?php $custom_f = get_sub_field('custom_f'); ?>
    <?php echo $custom_f ; ?>
  <?php endif; ?>

<?php endwhile; ?>

前述の通りネストで繰り返しフィールドも使えるので自由度はえげつないです。もしかしたら情報を出力するだけのCMSなら柔軟コンテンツでほぼほぼの要件を満たしてしまうんじゃないのかなぁ〜と思ってしまいます。

柔軟コンテンツの設定

続いて管理画面から柔軟コンテンツを設定する方法です。
まずはフィールドタイプを柔軟コンテンツに設定します。すると左のセルにレイアウトの項目があると思います。これが上記のソースの「レイアウト1」及び「レイアウト2」に当たる最初のネストです。

そしてその中にさらにカスタムフィールドを設定していきます。上記のサブフィールドcustom_fに当たるネストです。

ポイントはボタンのラベル

管理画面での更新を円滑にするポイントはボタンのラベルです。最初の「柔軟コンテンツ」を選択したフィールドで使いするボタンの役割はレイアウトの追加なので、そのように設定するといいと思います。何も設定しないと「行の追加」になってネストがいっぱいになってくるとチョット分かりにくくなって、時間を置いた時のメンテナンス性が悪くなっちゃいます。

柔軟コンテンツは文字通り柔軟

柔軟コンテンツは本当に文字通り柔軟です。こんなCMS欲しかったんだぁ〜って思ってたのがかなった感じです。これ開発出来るようになりたい・・・・です。

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する