Advanced Custom Fields version 6.0がリリースされたので使ってみた
WordPress（ワードプレス）の投稿や固定ページにカスタムフィールドを追加することができるプラグインのAdvanced Custom Fieldsの最新バージョン、ACF 6.0がリリースされました。
多くのWordPressユーザーが利用しているAdvanced Custom Fields version 6.0の主な変更を紹介していきます。
Advanced Custom Fields version 6.0について
2022年9月21日にAdvanced Custom Fields version 6.0がリリースされました。2014年にリリースされたACF5以来のメジャーアップデートになります。
同様に、ACF PROもnew versionの6.0としてリリースされています。
Advanced Custom Fieldsについて
Advanced Custom Fieldsとは、WordPress（ワードプレス）の投稿やカスタム投稿、固定ページなどにカスタムフィールドを追加して入力項目をカスタマイズできるプラグインです。
200万以上のWebサイトで利用されているプラグインで、評価の平均値も最大の5つ星と、非常に多くのユーザーに信頼されていることが分かります。
Advanced Custom Fieldsの基本的な使い方と全フィールドタイプの紹介
Advanced Custom Fields 6.0の主な変更点
Advanced Custom Fields（ACF）6.0の主な変更点を紹介します。
- UIの大幅な変更
- 繰り返しフィールドにページネーション機能の追加
- 次世代のACF Blocks
- キーボードでのアクセシビリティ向上
- その他
UIの大幅な変更
今回の大きな変更点としては、このUIの大幅な変更かと思います。
各要素の視認性が向上し、スムーズに操作を行うことができるような設計になっています。フィールドタイプがアイコン表示に変わっていることもポイントです。
詳しくは後述の「UIの変更」で改めて紹介します。
繰り返しフィールドにページネーション機能の追加
有料版のACF PROで提供されている繰り返しフィールド（Repeater Field）で、ページネーション機能が追加されました。
繰り返しフィールドは、カスタムフィールドを多く登録することができるので、管理画面のボリュームが大きくなってしまします。ページネーションが追加されたことで、情報が整理されてすっきりとした見やすい管理画面にすることができます。
ページネーション機能の追加についても、詳しくは後述の「繰り返しフィールドのページネーション」で紹介します。
次世代のACF Blocks
ACF Blocksは、WordPressのブロックエディタにオリジナルのブロックを追加することができる有料版ACF PROの機能で、今回のACF PRO 6.0でバージョンアップされています。
※現段階では、ACF Blocksについては省略させていただきます。
キーボードでのアクセシビリティ向上
ACF 6.0では、フィールドグループの設定をキーボードだけで行うことができます。ACF 6.0以前では、マウスを使うことなくキーボーだけでフィールドグループの削除や複製などを行うことができませんでした。
その他
ACF 6.0ではその他に、ACF 5系に対する互換性や翻訳対象言語の追加などが行われています。
UIの変更
ACF 6.0の主な変更としてUIの大幅な変更と紹介させていただきましたが、さらに詳しく見ていきたいと思います。
まず、視認性が向上しています。ACF5がリリースされた当時のクラシックエディタに合ったUI設計となっていましたが、現在のブロックエディタに近づいた印象です。
通常のフィールドグループのUI変更
テキストなどのフィールドグループでのUIの違いを見ていきましょう。
UIの変更前
UIの変更前は、上記のように一つのタブ内でフィールドを設定していました。画面の高さがあまり無いPC等で設定する場合はスクロールが必要です。
UIの変更後
UIの変更後は、「General」「Validation」「Presentation」「条件判定」などと、設定項目をタブ切り替えで設定していくため、スクロールを行い項目を探す必要がありません。
タブを切り替えることで、その他の設定（必須かどうか、文字数制限など）を行うことができるようになっています。
ボタンや入力フォームの要素一つ一つの配色やサイズ感などが一新され、視認性が向上しています。
グループフィールドのUI変更
次に、グループフィールドなど、サブフィールドを持つフィールドグループのUIの違いを見ていきましょう。
グループフィールドのUI変更前
UI変更前は、サブフィールドがグループフィールドの基本設定項目に埋もれているような印象です。
グループフィールドのUI変更後
グループフィールドのUI変更後は、サブフィールドの領域がはっきりと分かるようになっています。
サブフィールドの設定時も色がつくため、何を設定しているのか一目でわかります。
複数のサブフィールドを登録しても、グループフィールド自体の設定項目に埋もれることなく、認識しやすい設計になっています。
その他のUI
ツール画面のUI
フィールドグループのインポート・エクスポートを行うツール画面も、ボタンのデザインやアイコンが設置されたりと多少の変更があります。
アップデート画面のUI
こちらのアップデート画面（ACF PROのライセンス認証）についても、ボタンのデザインやアイコン設置といった多少のUI変更となっています。
更新完了のUI
細かいところですが、フィールドグループの更新が完了した場合の通知も上記のように視認性の高い仕様になっています。
繰り返しフィールドのページネーション
Advanced Custom Fields有料版であるACF PROで提供されている繰り返しフィールド（Repeater）も、今回のversion 6.0へのアップデートで、ページネーション機能が追加されています。
ACF PROの繰り返しフィールドの基本的な使い方と応用方法
繰り返しフィールドにページネーション機能追加
繰り返しフィールドのUIもグループフィールド同様にサブフィールドが認識しやすくなっています。
サブフィールドの下、レイアウトの次に「Pagenation」の設定項目があります。デフォルトではオフになっているので、ページネーションを使用する場合はオンにして有効化します。
編集画面での繰り返しフィールドのページネーションの使い方
編集画面で実際に繰り返しカスタムフィールドを見てみると、ページネーションが設置されています。
Pagenation設定では、1ページの上限を4つと設定しました。5つ目を入力しただけでは、ページネーションの2ページ目は反映されないので、編集画面の更新ボタンをクリックします。
編集画面の更新が完了すると、ページネーションが更新されて2ページ目をクリックできるようになります。
5つ目に入力した内容が、2ページ目で表示されています。
以上が、繰り返しカスタムフィールドのページネーション機能の説明になります。
まとめ
今回は、Advanced Custom Fieldsの最新バージョンであるACF 6.0について紹介させていただきました。※主にUIの変更と繰り返しフィールドのページネーション機能
UIが大幅に変わったことで全体的に視認性が向上し、使いやすくなったのではないかと考えています。ただ、編集画面での表示についてはUIの変更が特に無く、Gutenbergで使用する場合は違和感が残ってしまいます。
まだまだクラシックエディタでの利用者もいることから、編集画面のUI変更はまだ先になるのかもしれませんが、今後のアップデートに期待したいです。
本サイトでは引き続き、Advanced Custom Fields関連の記事を発信し続けていきますので、今後ともよろしくお願いします。
