カスタムフィールドをタブで整理【Advanced Custom Fieldsの使い方】

WordPressでカスタムフィールドを管理するために、プラグインAdvanced Custom Fields（ACF）を使用している場合があると思います。

そのACFで、フィールドグループにカスタムフィールドをたくさん追加した場合、カスタムフィールドを追加した編集ページがとても長くなってしまい、項目を探したり入力したりする際に頻繁にスクロールをしなければいけません。

今回はそのような場合に、カスタムフィールドを整理して使いやすくする方法の紹介となります。

ACFのカスタムフィールドをタブを使い整理する方法

例えば、以下の画像にあるようにACFでフィールドグループを作成し、投稿ページにカスタムフィールドを追加したとします。

そうすると投稿ページの編集画面の下部には、以下の画像のようにカスタムフィールドが追加されると思います。

今回は、上記画像のように、カスタムフィールドを追加したページの編集画面が長くなってしまった場合に、タブを使いカスタムフィールドを整理する方法となります。

例として上記のフィールドグループをタブを使い2つの項目に分けて整理します。

ACFでタブを使用するにはフィールドタイプ「タブ」を使用します。まずは、フィールドグループの編集画面で「＋フィールドを追加」から、新しいフィールドを追加します。

新しいフィールドを編集する画面となるので、任意のフィールドラベルを入力して、フィールドタイプを「タブ」として1つめのタブを作成します。

そして作成したフィールドタイプ「タブ」の項目を、フィールドグループの編集画面上で、ドラッグをして先頭（フィールド順序1）に移動させます。

次に、2つめのタブを作成するため、新しいフィールドを作成します。フィールドタイプは同じ「タブ」として、フィールドラベルの名前は上記と異なるものにします。

そして作成したフィールドタイプ「タブ」の項目を、フィールドグループの編集画面上で、ドラッグをしてフィールド順序3以降に移動させます。

そして最後に、フィールドグループの編集画面上にある「更新」ボタンををクリックしてフィールドグループを保存します。

今回の例では、1つめのタブ「商品情報タブ」としてフィールド順序1とし、「店舗情報タブ」をフィールド順序5としました。

それにより、「商品情報タブ」より下にあり「店舗情報タブ」より上にある2、3、4の項目が「商品情報タブ」内に表示され、「店舗情報タブ」より下にある6、7の項目が「店舗情報タブ」内に表示されます。

今回は2つのタブのみを使用しましたが、2以上のタブを使用する場合でもフィールドタイプ「タブ」で区切ることにより、それ以降の項目をタブでグループ化することが可能です。

上記例を設定後、投稿ページの編集画面に移動すると、以下の画像ようにカスタムフィールドの項目がタブによってグループ化されていると思います。