Advanced Custom FieldsをPro版(ACF Pro)にアップグレードする手順と使い方

Advanced Custom Fields(ACF)は、管理画面上からカスタムフィールドの追加や管理ができる非常に便利なプラグインです。WordPressの公式ディレクトリに登録されていて、無料で利用することができるのですが、機能が強化されたPro(有料版)も提供されています。

ACFのProにアップグレードすると、以下のアドオンもすべてセットになっています。

The Repeater Field(繰り返しフィールド)
The Gallery Field(画像ギャラリー)
The Flexible Content Field(柔軟コンテンツ)
Clone field(クローン)
Options Page(オプションページ)

これらのアドオンは単体でも購入可能ですが、単体だと今後のアップデートには対応してくれないみたいです。

また、値段もProは25豪ドル(1サイトのみ)もしくは100豪ドル(サイト数無制限)となっていて、アドオンはそれぞれ25豪ドルです。どう考えてもProがお得ですね。

最近、ACF Proを導入する機会があったので、無料版からProにアップグレードする手順と、繰り返しフィールドや画像ギャラリーの使い方について解説したいと思います。

Advanced Custom FieldsをPro(有料版)にアップグレードする手順

まずは、ACF Proのページにアクセスして、ACF Proを購入します。1サイトでのみ使える「Personal」と無制限の「Developer」がありますので、いずれかをご購入ください。4サイト以上で使うのであればDeveloperがお得です。

料金はPayPalもしくはクレジットカードでお支払い可能です。ACF Proを購入すると、購入確認と一緒にアカウントページのURLがメールで送られてくるので、アカウントページへアクセスします。

「Licenses & Downloads」のところからファイルをダウンロードできますので、プラグインファイルをダウンロードします。

ダウンロードしたファイルを解凍して、「wp-content/plugins」にアップロードします。この時点では、Advanced Custom Fieldsの無料版とProの両方が存在していることになりますが、無料版の方を停止して、ACF Proを有効化します。

以下のようなメッセージが表示されるので、[Upgrade Database]をクリックしてデータベースのアップグレードを実行します。

データベースのアップグレードが必要です

Advanced Custom Fields PRO v5.7.0へのアップグレードありがとうございます
素晴らしい新機能を利用する前にデータベースを最新バージョンに更新してください。

「Database Upgrade complete」と表示されれば、データベースのアップグレードは完了です。

[カスタムフィールド] – [アップデート]にアクセスして、ACFアカウントページ内の「Licenses & Downloads」に表示されているKeyを「ライセンスキー」のところに入力して、[ライセンスをアクティベート]します。

アクティベートできたら、Advanced Custom Fieldsのアップグレードは完了です。無料版の方は削除しちゃって問題ありません。

元々作成されていたフィールドグループもちゃんと残っていますので、[カスタムフィールド] – [フィールドグループ]から確認しましょう。

繰り返しフィールドの使い方と出力

繰り返しフィールドを使うと、カスタムフィールドの入力画面で、フィールドの数を追加したり減らしたりと、自由にフィールド数を変更できるようになります。

まずは、フィールドグループの作成時に、フィールドタイプで「繰り返しフィールド」を選択します。

続いて、サブフィールドに追加したいフィールドを入れていきます。レイアウトではカスタムフィールドの表示方法を指定できます。”表”はフィールドが横並びで表示されるので、サブフィールドの数が少ない時は”表”で、数が多い時は”ブロック”か”行”にすると良いです。

フィールドグループの作成が完了したら、カスタムフィールドを入力していきましょう。最初はサブフィールドが表示されていないので、[行を追加]からサブフィールドを追加します。

追加したサブフィールドを削除したい場合は、右側の削除ボタンから実行します。

繰り返しフィールドの出力

繰り返しフィールドのデータを出力する場合、基本形は以下のようになります。

<?php
if( have_rows('フィールド名') ): //繰り返しフィールドのデータがあれば出力
  while ( have_rows('フィールド名') ) : the_row();
    the_sub_field('サブフィールド名'); //サブフィールドの値を出力
  endwhile;
else:
endif;
?>

今回作成したフィールド(repeat_field)の”サブ画像(sub_img)”と”サブテキスト(sub_txt)”を出力する場合は、以下のように記述します。なお、こちらは画像フィールドの返り値は「画像配列」にしています。

<?php if( have_rows('repeat_field') ): ?>
  <ul>
    <?php
      while( have_rows('repeat_field') ): the_row();
      $sub_img = get_sub_field('sub_img');
      $sub_txt = get_sub_field('sub_txt');
    ?>
    <li>
      <?php if( $sub_img ): ?>
        <img src="<?php echo $sub_img['url']; ?>" alt="<?php echo $sub_img['alt'] ?>">
      <?php endif; ?>
  
      <?php if( $sub_txt ): ?>
        <p><?php echo $sub_txt; ?></p>
      <?php endif; ?>
    </li>
    <?php endwhile; ?>
  </ul>
<?php endif; ?>

カスタムフィールドの入力時に追加された分、ループして表示されます。

画像フィールドの返り値を「画像ID」にしている場合は、以下のようにします。

<?php if( have_rows('repeat_field') ): ?>
  <ul>
    <?php
      while( have_rows('repeat_field') ): the_row();
      $sub_img = wp_get_attachment_image_src(get_sub_field('sub_img'), 'thumbnail', false);
      $get_sub_img = get_post(get_sub_field('sub_img'));
      $sub_img_alt = get_post_meta( $get_sub_img->ID, '_wp_attachment_image_alt', true );
      $sub_txt = get_sub_field('sub_txt');
    ?>
    <li>
      <?php if( $sub_img ): ?>
        <img src="<?php echo esc_url($sub_img[0]); ?>" alt="<?php echo $sub_img_alt; ?>">
      <?php endif; ?>
  
      <?php if( $sub_txt ): ?>
        <p><?php echo $sub_txt; ?></p>
      <?php endif; ?>
    </li>
    <?php endwhile; ?>
  </ul>
<?php endif; ?>

画像ギャラリーの使い方と出力

画像ギャラリーの使い方について解説いたします。

フィールドグループの作成時に、フィールドタイプで「ギャラリー」を選択します。ちなみに、「ライブラリ」の設定で”全て”を選択するとギャラリーに追加した画像が他の投稿でも使えるようになります。”投稿にアップロードされる”を選択すると、画像をアップした投稿内でしか利用できません。

投稿画面で画像ギャラリーに追加する画像を選択していきます。

画像の順番は、ドラッグ&ドロップで変更可能です。

画像ギャラリーの出力

画像ギャラリーを出力するには、下記のように記述します。返り値のフォーマットによって異なります。

返り値のフォーマットで「画像配列」を選択している場合は、以下のように記述します。

<?php
  $gallerys = get_field('gallery');
  if( $gallerys ):
?>
<ul>
  <?php foreach( $gallerys as $gallery ): ?>
    <li>
      <a href="<?php echo $gallery['url']; ?>">
        <img src="<?php echo $gallery['sizes']['thumbnail']; ?>" alt="<?php echo $gallery['alt']; ?>">
      </a>
      <p class="wp-caption"><?php echo $gallery['title']; ?></p>
    </li>
  <?php endforeach; ?>
</ul>
<?php endif; ?>

画像のサイズを変更したい場合は、「$gallery[‘sizes’][‘thumbnail’]」の部分を以下のように変更します。

$gallery[‘sizes’][‘large’]：大サイズ
$gallery[‘sizes’][‘medium’]：中サイズ

返り値のフォーマットで「画像ID」を選択している場合は、以下のように記述します。

<?php
$gallerys = get_field('gallery');
if ($gallerys) :
?>
  <ul>
    <?php
    foreach ($gallerys as $gallery) :
      $gallery_data = wp_get_attachment_image_src($gallery, 'thumbnail');
      $gallery_full = wp_get_attachment_image_url($gallery, 'full');
      $gallery_alt = trim(strip_tags(get_post_meta($gallery, '_wp_attachment_image_alt', true)));
    ?>
      <li>
        <a href="<?php echo esc_url($gallery_full); ?>">
          <img src="<?php echo esc_url($gallery_data[0]); ?>" alt="<?php echo esc_attr($gallery_alt); ?>" width="<?php echo esc_attr($gallery_data[1]); ?>" height="<?php echo esc_attr($gallery_data[2]); ?>">
        </a>
      </li>
    <?php endforeach; ?>
  </ul>
<?php endif; ?>

画像の情報を取得する際、widthやheightも入れたい場合はwp_get_attachment_image_srcで取得します。画像URLのみ取得できれば良い場合は、wp_get_attachment_image_urlで取得するとシンプルです。

返り値のフォーマットで「画像URL」を選択している場合は、以下のように記述します。

<?php
$gallerys = get_field('gallery');
if ($gallerys) :
?>
  <ul>
    <?php
    foreach ($gallerys as $gallery) :
    ?>
      <li>
        <a href="<?php echo esc_url($gallery); ?>">
          <img src="<?php echo esc_url($gallery); ?>" alt="">
        </a>
      </li>
    <?php endforeach; ?>
  </ul>
<?php endif; ?>

柔軟コンテンツの使い方と出力

柔軟コンテンツは、複数のサブフィールドがセットになったレイアウトを作成し、好きな順番でレイアウトを追加できるカスタムフィールドです。名前の通り、繰り返しフィールドをさらに柔軟にしたイメージです。

まず、フィールドタイプで「柔軟コンテンツ」を選びます。

続いて、レイアウトとそのレイアウトに入れるサブフィールドを設定していきます。以下画像のように、レイアウト名とサブフィールドを定義します。

同じ要領で必要な分だけレイアウトを追加していきます。今回は、”テキストと画像を入力するレイアウト”と”見出しを入力するレイアウト”を追加してみました。

投稿画面では以下のように表示されますので、[行を追加]から追加したいレイアウトを選択してフィールドを追加していきます。追加したレイアウトは、ドラッグ&ドロップで自由に順番を入れ替えられます。

柔軟コンテンツの出力

柔軟コンテンツを出力するには、以下のように記述します。フィールド名「flexible_content」内の「flexible_txt_img」と「flexible_ttl」というレイアウトを呼び出しており、画像フィールドの返り値は画像IDにしています。

<?php if( have_rows('flexible_content') ):  ?>
  <?php while ( have_rows('flexible_content') ) : the_row();  ?>
    <?php if( get_row_layout() == 'flexible_txt_img' ): ?>
      <p><?php the_sub_field('flexible_txt'); ?></p>
      <?php
        $img_id = get_sub_field('flexible_img');
        $img_url = wp_get_attachment_image_src($img_id, 'thumbnail', false);
        $attachment = get_post( get_sub_field('flexible_img') );
        $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
      ?>
      <figure><img src="<?php echo esc_url($flexible_img_url[0]); ?>" alt="<?php echo esc_html($flexible_img_alt); ?>"></figure>
    <?php elseif( get_row_layout() == 'flexible_ttl' ): ?>
      <h2><?php the_sub_field('flexible_ttl_txt'); ?></h2>
    <?php endif; ?>
  <?php endwhile; ?>
<?php endif; ?>

上記のように記述することで、投稿画面で入力した順番でレイアウトが出力されます。

オプションページの使い方と出力

オプションページは、管理画面に独立したオプションページを追加できる機能です。オプションページにカスタムフィールドを追加して利用します。

オプションページを利用するためには、functions.phpに以下を追記します。

if( function_exists('acf_add_options_page') ) {
  acf_add_options_page();
}

これで、管理画面に[Options]という項目が追加されます。この時点では[Options]には何も表示されません。

続いて、オプションページ用のフィールドグループを作成しましょう。ルールの「このフィールドグループを表示する条件」で「オプションページ」を選択することで、フィールドグループに追加したカスタムフィールドが[Options]内に表示されるようになります。

フィールドグループを作成して[Options]にアクセスすると、以下のように追加したカスタムフィールドが表示されますので設定します。

オプションページのフィールドを出力

出力方法は、通常のカスタムフィールドの出力とほぼ同じですが、オプションページの場合は以下のように’option’という引数を追加します。

<?php
  the_field('フィールド名', 'option'); //値の出力
  $option_example = get_field('フィールド名', 'option'); //値の代入
?>

繰り返しコンテンツや柔軟コンテンツの場合も同様に、have_rowsで’option’を指定します。

<?php
  if( have_rows('フィールド名', 'option') ):
    while ( have_rows('フィールド名', 'option') ) : the_row();
      the_sub_field('サブフィールド名');
    endwhile;
  else:
  endif;
?>

オプションページのメニューやタイトルを変更する方法

オプションページのメニューやページタイトルは、デフォルトだとOptionsという表記になります。スラッグは「/wp-admin/admin.php?page=acf-options」です。

これを変更するには、functions.phpにacf_add_options_pageを追加する時に、以下のように記述します。

if( function_exists('acf_add_options_page') ) {
  acf_add_options_page(array(
    'page_title' => 'オプションページ', //オプションページのタイトル
    'menu_title' => 'オプション', //メニューの表記
    'menu_slug' => 'option-page', //オプションページのスラッグ
    'capability' => 'manage_options',
    'icon_url' => 'dashicons-carrot',
    'redirect' => false
  ));
}

icon_urlではメニューのアイコンを変更しています。アイコンに指定する値は、Dashiconsの[Copy HTML]で確認できます。

また、capabilityの値が「manage_options」になっているので管理者のみがアクセス可能です。編集者権限もアクセス可能にしたい場合は、値に「edit_posts」を指定します。capabilityの種類については、Codexをご参照ください。

上記をfunctions.phpに追加することで、以下のようにメニューやタイトルが変わります。スラッグも「/wp-admin/admin.php?page=option-page」になります。

オプションページのメニューの位置を調整する方法

デフォルトではメニューの位置は一番下になります。’position’を追加することで、メニューの位置を調整可能です。

if( function_exists('acf_add_options_page') ) {
  acf_add_options_page(array(
    'page_title' => 'オプションページ', //オプションページのタイトル
    'menu_title' => 'オプション', //メニューの表記
    'menu_slug' => 'option-page', //オプションページのスラッグ
    'capability' => 'manage_options',
    'icon_url' => 'dashicons-carrot',
    'redirect' => false,
    'position' => 5
  ));
}

オプションページを複数追加する方法

オプションページを複数追加した場合は、追加したい分のacf_add_options_pageを定義します。

if( function_exists('acf_add_options_page') ) {
  acf_add_options_page(array(
    'page_title' => 'オプションページ1', //オプションページのタイトル
    'menu_title' => 'オプション1', //メニューの表記
    'menu_slug' => 'option-page1', //オプションページのスラッグ
    'capability' => 'manage_options',
    'icon_url' => 'dashicons-carrot',
    'redirect' => false
  ));
	acf_add_options_page(array(
    'page_title' => 'オプションページ2', //オプションページのタイトル
    'menu_title' => 'オプション2', //メニューの表記
    'menu_slug' => 'option-page2', //オプションページのスラッグ
    'capability' => 'manage_options',
    'icon_url' => 'dashicons-palmtree',
    'redirect' => false
  ));
}

オプションページにサブメニューを追加する方法

複数のオプションページを追加する際に、サブメニューとして表示させたい場合は、以下のようにします。

if( function_exists('acf_add_options_page') ) {
  acf_add_options_page(array(
    'page_title' => 'オプションページ', //オプションページのタイトル
    'menu_title' => 'オプション', //メニューの表記
    'menu_slug' => 'option-page', //オプションページのスラッグ
    'capability' => 'manage_options',
    'icon_url' => 'dashicons-carrot',
    'redirect' => false //trueにすると親ページは表示されない(最初のサブページにリダイレクト)
  ));
  acf_add_options_sub_page(array( //サブページ
    'page_title' => 'サブオプションページ', //サブページのタイトル
    'menu_title' => 'サブオプション', //サブメニューの表記
    'menu_slug' => 'suboption-page', //サブページのスラッグ
    'capability' => 'manage_options',
    'parent_slug' => 'option-page', //親オプションページのスラッグ
  ));
}

あとがき

Advanced Custom Fieldsは無料版でも十分過ぎるくらい高機能ですが、Proにアップグレードするとさらに便利になりますね。カスタムフィールドを活用したサイトを制作することが多い方は、ぜひACF Proの導入をご検討ください。

私も今回「Developer」を購入したので、今後もバシバシ活用していきたいと思います。