acf-local-json

ACF Local JSON ビルダー

画像、デザイン、HTML 構造から、WordPress 開発用の完全な ACF（Advanced Custom Fields）Local JSON 設定を生成します。

基本的なワークフロー

1. 入力を分析：提供された画像、デザイン、HTML 構造を確認します
2. コンポーネントを特定：繰り返しパターン、コンテンツセクション、フィールド間の関係を検出します
3. フィールドタイプを割り当て：各コンポーネントに適切な ACF フィールドタイプを判断します
4. JSON を生成：完全な Local JSON 設定を作成します
5. 構造を検証：ネスト、キー、フィールド間の関係が適切であることを確認します

フィールドタイプの検出ガイドライン

視覚的な分析から

• テキスト入力／見出し → text、textarea、または wysiwyg
• 画像 → image（複数の場合は gallery を検討）
• 繰り返し表示されるカード／セクション → repeater または flexible_content
• 切り替え状態 → true_false または button_group
• ドロップダウン／選択ボックス → select または radio
• 日付表示 → date_picker または date_time_picker
• リンク／ボタン → link または url
• 色のバリエーション → color_picker
• ファイルのダウンロード → file
• 番号付きリスト → number または range
• タブインターフェース → tab フィールドタイプ
• アコーディオン → レイアウトを含む flexible_content

HTML 構造から

<h1>, <h2>, <p> → text/textarea/wysiwyg


<img> → image field
<picture>, <source> → image with return format 'array'


<div class="card"> (múltiples) → repeater
<ul><li> (dinámicos) → repeater


Secciones variadas (hero, features, cta) → flexible_content


<a href=""> → link field


<input type="checkbox"> → true_false

JSON 構造テンプレート

すべての ACF Local JSON ファイルは、次の構造に従います。

{
  "key": "group_unique_identifier",
  "title": "Field Group Name",
  "fields": [...],
  "location": [...],
  "menu_order": 0,
  "position": "normal",
  "style": "default",
  "label_placement": "top",
  "instruction_placement": "label",
  "hide_on_screen": "",
  "active": true,
  "description": ""
}

フィールド構造のパターン

基本フィールド

{
  "key": "field_unique_key",
  "label": "Field Label",
  "name": "field_name",
  "type": "text",
  "instructions": "",
  "required": 0,
  "conditional_logic": 0,
  "wrapper": {
    "width": "",
    "class": "",
    "id": ""
  },
  "default_value": "",
  "placeholder": "",
  "prepend": "",
  "append": "",
  "maxlength": ""
}

リピーターフィールド

{
  "key": "field_repeater_key",
  "label": "Items",
  "name": "items",
  "type": "repeater",
  "instructions": "",
  "required": 0,
  "layout": "block",
  "button_label": "Add Item",
  "min": 0,
  "max": 0,
  "sub_fields": [
    {
      "key": "field_subfield_key",
      "label": "Title",
      "name": "title",
      "type": "text",
      "parent": "field_repeater_key"
    }
  ]
}

フレキシブルコンテンツ

{
  "key": "field_flexible_key",
  "label": "Page Builder",
  "name": "page_builder",
  "type": "flexible_content",
  "instructions": "",
  "button_label": "Add Section",
  "min": "",
  "max": "",
  "layouts": {
    "layout_hero": {
      "key": "layout_hero_key",
      "name": "hero",
      "label": "Hero Section",
      "display": "block",
      "sub_fields": [...]
    },
    "layout_features": {
      "key": "layout_features_key",
      "name": "features",
      "label": "Features Section",
      "display": "block",
      "sub_fields": [...]
    }
  }
}

画像フィールド

{
  "key": "field_image_key",
  "label": "Image",
  "name": "image",
  "type": "image",
  "return_format": "array",
  "preview_size": "medium",
  "library": "all",
  "min_width": "",
  "min_height": "",
  "min_size": "",
  "max_width": "",
  "max_height": "",
  "max_size": "",
  "mime_types": ""
}

キーの生成ルール

1. グループキー：group_ + 説明的な snake_case + ランダムなハッシュ

   • 例：group_homepage_hero_5f8a2b

2. フィールドキー：field_ + 説明的な snake_case + ランダムなハッシュ

   • 例：field_hero_title_9c3d1e

3. レイアウトキー：layout_ + レイアウト名 + ランダムなハッシュ

   • 例：layout_hero_section_4b7e9a

4. 一意性：すべてのキーは、すべての ACF インストール間で一意である必要があります

ロケーションルール

一般的なロケーションパターン：

"location": [
  [
    {
      "param": "post_type",
      "operator": "==",
      "value": "page"
    }
  ]
]

"location": [
  [
    {
      "param": "page_template",
      "operator": "==",
      "value": "template-homepage.php"
    }
  ]
]

"location": [
  [
    {
      "param": "post_type",
      "operator": "==",
      "value": "post"
    },
    {
      "param": "post_category",
      "operator": "==",
      "value": "category:news"
    }
  ]
]

ベストプラクティス

1. 意味のある命名：コンテンツの目的を反映した、明確で説明的な名前を使用します
2. 適切なネスト：リピーター／フレックス内の親子関係を正しく保ちます
3. 返却形式：適切な返却形式（画像の場合は ID、配列、URL）を選択します
4. 説明：コンテンツ編集者に役立つ説明を追加します
5. デフォルト値：適切な場合は、妥当なデフォルト値を設定します
6. 検証：該当する場合は、最小値／最大値の制約を含めます
7. レイアウトタイプ：block、table、row のレイアウトを適切に使用します
8. クローンフィールド：再利用可能なフィールドセットについては、クローンフィールドのドキュメントを参照します

出力形式

次の名前で保存できる、完全な JSON ファイルを生成します：

acf-json/group_[name].json

ファイルは有効な JSON で、WordPress ACF Pro の Local JSON 機能ですぐに使用できる必要があります。

高度な機能

次のような複雑なパターンについては：

• クローンフィールド：references/clone-fields.md を参照
• 双方向の関連付け：references/relationships.md を参照
• カスタムフィールドタイプ：references/custom-types.md を参照
• 条件付きロジック：references/conditional-logic.md を参照

ワークフローの例

ユーザーが提供するもの：タイトル、サブタイトル、CTA ボタン、背景画像を含むヒーローセクションのスクリーンショット

分析：

1. ヒーローセクション = フィールドグループ
2. タイトル = テキストフィールド
3. サブタイトル = テキストエリアフィールド
4. CTA = リンクフィールド（テキスト + URL）
5. 背景 = 画像フィールド

出力：すべてのフィールドが適切に構造化され、ネストされた完全な JSON