WordPressのカスタムフィールドのプラグインであるおなじみのACFですが、無料版でも十分に使いやすいプラグインとして人気があります。しかし有料版のACFProには、さらにカスタマイズ性を高められるフィールド機能が用意されています。今回はその中でも「柔軟コンテンツ」と「OptionPage」機能を使った実装例を備忘録として残しておきたいと思います。   ACFProで使えるポピュラーなフィールドといえば、フィールドを自由に追加できる「繰り返しフィールド」（リピーターフィールド）が有名です。こちらについては過去記事「プラグイン【Advanced Custom Fields】でカスタムフィールドを出力するときによく使うメモ」にて紹介していますのでご参考に。  

異なるカスタムフィールドを自由に組み込むことができる柔軟コンテンツ

初見では少し機能がわかりにくい「柔軟コンテンツ」のカスタムフィールドですが、入出力のフォーマットをある程度決めた上で、自由にコンテンツを作成できるとても優れた機能です。MovableTypeでも似たような機能がありますが、かなり使いやすくなるのでCMSとして完成度がより高くなりますね。   柔軟コンテンツのフィールドタイプを選択するとまずは「レイアウト」というブロックを作成することになります。このレイアウトのブロックを単位としてコンテンツを作成し順番を自由に設定できるようになります。レイアウトのブロックは繰り返しフィールドのように複数作成できますので、同じようにループで出力する形となります。

<?php if(have_rows(' 柔軟コンテンツのフィールド名 ')): ?>
  <?php while(have_rows(' 柔軟コンテンツのフィールド名 ')): the_row(); ?>

    // 柔軟コンテンツで作成されたフィールドの内容を出力
    <?php if(get_row_layout() === ' 柔軟コンテンツに含まれるレイアウト名 '): ?>

      // レイアウト内で指定したフィールドの値を出力
      <?php echo get_sub_field(' レイアウトに含まれるサブフィールド名 '); ?>

    <?php endif; ?> 

  <?php endwhile; ?>
<?php else ?>
  <p>柔軟コンテンツで作成されたコンテンツはありません</p>
<?php endif; ?>

  そしてそのループの中で、対象となるレイアウトを指定し、そのレイアウトのサブフィールドとして値を、get_sub_field()を使って取得できるようになります。少し複雑になりますが一度形を覚えてしまえば比較的わかりやすいのではないでしょうか。上記の形が基本的な柔軟コンテンツ実装時の形となります。   次に実際に使用する際にはどのように使うのかをサンプルで見ていきます。ここではブログの投稿記事をエディタだけではなく、柔軟コンテンツで作成した専用のフィールドを使って作成する想定で、下記のようなカスタムフィールドを作成してみました。 フィールド名：custom_field_post_content タイプ：柔軟コンテンツ ●レイアウト1：本文（layout_content）   ・フィールド：テキスト（text / Wysiwyg エディタ） ●レイアウト2：見出し（layout_heading）   ・フィールド：h1テキスト（heading_1 / テキスト）   ・フィールド：h2テキスト（heading_2 / テキスト）   ・フィールド：h3テキスト（heading_3 / テキスト） ●レイアウト3：複数画像（layout_images）   ・フィールド：画像リスト（image_list / 繰り返しコンテンツ）       - サブフィールド：画像アイテム（image / 画像）   ではこの設定で登録したカスタムフィールドを出力する部分をテンプレートに記述していきます。まずは柔軟コンテンツの名前を指定し、柔軟コンテンツ内のレイアウトをループで出力できるようにしていきます。そして各コンテンツごとにサブフィールドでカスタムフィールドの値を出力していきます。

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

    // 本文レイアウト
    <?php if(get_row_layout() === 'layout_content' ): ?>
      <?php echo get_sub_field( 'text' ); ?>
    <?php endif; ?>

    // 見出しレイアウト
    <?php if(get_row_layout() === 'layout_heading' ): ?>
      <?php 
        if( get_sub_field( 'heading_1' ) ) {
          echo '<h1>' . get_sub_field( 'heading_1' ) . '</h1>';
        } else if( get_sub_field( 'heading_2' ) ) {
          echo '<h2>' . get_sub_field( 'heading_2' ) . '</h2>';
        } else if( get_sub_field( 'heading_3' ) ) {
          echo '<h3>' . get_sub_field( 'heading_3' ) . '</h3>';
        }
      ?>
    <?php endif; ?> 

    // 複数画像レイアウト
    <?php if(get_row_layout() === 'layout_images' ): ?>
      <?php if(have_rows( get_sub_field( 'image_list' ) )): ?>
        <?php while(have_rows( get_sub_field( 'image_list' ) )): the_row(); ?>
          <?php 
            if( get_sub_field( 'image' ) ) {
              echo '<img src="' . get_sub_field( 'image' ) . '" alt="IMAGE">';
            }
          ?>
        <?php endwhile; ?>
      <?php endif; ?>
    <?php endif; ?>

  <?php endwhile; ?>
<?php else ?>
  <p>柔軟コンテンツで作成されたコンテンツはありません</p>
<?php endif; ?>

  もちろん、柔軟コンテンツの中でも繰り返しフィールドを使うことも可能です。使い方も同じように該当するフィールド名でループで表示されるようにするだけですね。この部分をテンプレート化しておくことで、いろんな場所で柔軟コンテンツで作成したコンテンツを表示させることができますので、テンプレート化しておくと便利ですね。実際に投稿画面ではこのようにカスタムフィールドが表示されます。使い方は繰り返しフィールドと同じような感じですね。  

独立したメニュー項目別に指定したカスタムフィールドを設定できるオプションページ

もう一つ、ACFProでよく使われる便利な機能があります、それは「オプションページ」（OptionPage）というもので、管理画面のメニュー項目に独立してカスタムフィールドを管理できる専用の画面を作成できるようになります。この機能がない場合には、個別の投稿編集ページやプロフィールページなど、既存の画面内でした作成したカスタムフィールドを設置することができません。   オプションページを使うにはまず「functions.php」へ下記のように記述し、オプションページを有効化する必要があります。その時にサイドメニューでの表示名や識別用のスラッグ設定などを設定していきます。 【functions.php】

<?php
  // ACF オプションページ有効化
  if( function_exists('acf_add_options_page') ) {
    acf_add_options_page(array(
      'page_title' => 'サイト共通設定',
      'menu_title' => 'サイト共通設定',
      'menu_slug' => 'common',
      'redirect' => false
    ));
    acf_add_options_page(array(
      'page_title' => 'トップページ設定',
      'menu_title' => 'トップページ設定',
      'menu_slug' => 'home',
      'redirect' => false
    ));
    acf_add_options_page(array(
      'page_title' => 'ブログ一覧ページ設定',
      'menu_title' => 'ブログ一覧ページ設定',
      'menu_slug' => 'blog',
      'redirect' => false
    ));
  }
?>

  このコードを追記するだけで管理画面のメニューに設定したオプションページが追加されます。   あとはそれぞれのカスタムフィールド設定時に、このカスタムフィールドを表示させる場所をオプションページに指定するとOKです。オプションページで指定したカスタムフィールドはこれまで同様の方法でテンプレート上に値を出力できますが、get_field()もしくはthe_field()関数の第二引数に「'option'」と指定しないと出力できないので注意しましょう。

<?php
  if(!empty(get_field( 'オプションページで設定したカスタムフィールド名' , 'option' ))) {
    echo get_field( 'オプションページで設定したカスタムフィールド名' , 'option' );
  }
?>

 

---

  今回はACFProのプラグインで使える便利なカスタムフィールドを使った実装方法についてまとめてみました。案件によってはこの方法でCMS機能を作り込むものも多いと思いますので、ぜひ覚えておきたいですね。