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

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

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

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

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

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

ACFのフィールドグループ編集画面
ACFのフィールドグループ編集画面。投稿ページにカスタムフィールドを追加した例

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

ACFでカスタムフィールドを追加した投稿ページの編集画面。
ACFでカスタムフィールドを追加したページの編集画面の下部には、追加した項目が上記画像のように表示されます。

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

フィールドタイプ「タブ」使いカスタムフィールドを整理

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

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

ACFのフィールドグループ編集画面
ACFのフィールドグループ編集画面。「+フィールドを追加」から、新しいフィールドを追加します。

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

ACFのフィールドを編集する画面
ACFのフィールドを編集する画面。フィールドタイプを「タブ」として、フィールドラベルは今回の例では「商品情報タブ」とします。

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

ACFのフィールドグループ編集画面
ACFのフィールドグループ編集画面。フィールドタイプ「タブ」の項目をドラッグをして先頭(フィールド順序1)に移動させます。

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

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

ACFのフィールドグループ編集画面。
ACFのフィールドグループ編集画面。今回の例では、2つ目のフィールドタイプ「タブ」の項目は、フィールド順序5に移動させました。

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

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

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

今回の例では、フィールド順序2、3、4の項目が「商品情報タブ」内に表示され、フィールド順序6、7の項目が「店舗情報タブ」内に表示されます。

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

タブによってグループ化したカスタムフィールドの状態

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

「商品情報タブ」内のカスタムフィールドの画像
「商品情報タブ」内のカスタムフィールド
「店舗情報タブ」内のカスタムフィールドの画像
「店舗情報タブ」内のカスタムフィールド

コメントまたはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。Twitterで返信する場合はコチラから。