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

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

Advanced Custom FieldsをPro(有料版)にアップグレードする手順と使い方
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

  • 24時間注文・入稿受付OK。実績と信頼の「印刷の通販 グラフィック」
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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がお得です。

ACF Proの購入

料金は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」と表示されれば、データベースのアップグレードは完了です。

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’]:中サイズ

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

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

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

柔軟コンテンツ

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

レイアウトとサブフィールドの定義

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

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

柔軟コンテンツの入力

柔軟コンテンツの出力

柔軟コンテンツを出力するには、以下のように記述します。フィールド名「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; ?>

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

あとがき

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

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

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。