Logo
คู่มือการใช้งาน
คู่มือการใช้งานElementor

Elementor

เราสามารถแก้ไขข้อมูล Elementor จากโพสต์และอัปเดตตามที่ต้องการได้ โดยการ query, วนซ้ำ, แปลง และจัดเก็บ Elementor JSON meta สำหรับโพสต์นั้น

Query ข้อมูล Elementor

มีฟิลด์ 2 ฟิลด์สำหรับ query ข้อมูล Elementor:

  • elementorData จะคืนค่า JSON ของเอลิเมนต์ทั้งหมดในโพสต์ Elementor
  • elementorFlattenedDataItems ก็คืนค่า JSON เช่นกัน แต่ถูกทำให้แบนเป็นอาร์เรย์ระดับเดียว

ในการแปลงและอัปเดตข้อมูล Elementor เราจะใช้ elementorFlattenedDataItems เนื่องจากทำให้วนซ้ำเอลิเมนต์ได้ง่ายขึ้น

Query ฟิลด์ elementorFlattenedDataItems ซึ่งคืนค่า JSON แบบแบนของเอลิเมนต์ทั้งหมดในโพสต์ Elementor

query GetElementorData($customPostId: ID!) {
  customPost(by: { id: $customPostId }, status: any) {
    ...on ElementorMaybeEnabledForCustomPostType {
      elementorFlattenedDataItems
    }
  }
}

การตอบกลับจะมีลักษณะดังนี้:

{
  "data": {
    "post": {
      "elementorFlattenedDataItems": [
        {
          "id": "164e55c4",
          "elType": "container",
          "settings": {
            "layout": "full_width",
            "flex_gap": {
              "size": 0,
              "unit": "px",
              "column": "0",
              "row": "0",
              "isLinked": true
            },
            "min_height": {
              "unit": "vh",
              "size": 100,
              "sizes": []
            },
            "flex_align_items": "stretch",
            "content_position": "middle",
            "structure": "20",
            "margin": {
              "unit": "%",
              "top": "",
              "right": 0,
              "bottom": "",
              "left": 0,
              "isLinked": true
            },
            "padding": {
              "unit": "%",
              "top": "0",
              "right": "6",
              "bottom": "0",
              "left": "6",
              "isLinked": false
            },
            "margin_tablet": {
              "unit": "%",
              "top": "12",
              "right": 0,
              "bottom": "0",
              "left": 0,
              "isLinked": false
            },
            "margin_mobile": {
              "unit": "%",
              "top": "20",
              "right": 0,
              "bottom": "0",
              "left": 0,
              "isLinked": false
            },
            "padding_tablet": {
              "unit": "%",
              "top": "",
              "right": "",
              "bottom": "",
              "left": "",
              "isLinked": true
            },
            "z_index": 1,
            "_title": "Hero",
            "flex_direction": "row",
            "content_width": "full",
            "flex_direction_tablet": "column"
          },
          "isInner": false,
          "innerElementIds": [
            "600c1786",
            "5b451d4"
          ],
          "parentElementId": null
        },
        {
          "id": "600c1786",
          "elType": "container",
          "settings": {
            "_column_size": 50,
            "width": {
              "size": 50,
              "unit": "%"
            },
            "padding": {
              "unit": "%",
              "top": "0",
              "right": "12",
              "bottom": "0",
              "left": "0",
              "isLinked": false
            },
            "width_tablet": {
              "size": 100,
              "unit": "%"
            },
            "align_tablet": "center",
            "flex_gap": {
              "size": 20,
              "unit": "px",
              "column": "20",
              "row": "20",
              "isLinked": true
            },
            "padding_tablet": {
              "unit": "%",
              "top": "0",
              "right": "15",
              "bottom": "0",
              "left": "15",
              "isLinked": false
            },
            "padding_mobile": {
              "unit": "px",
              "top": "0",
              "right": "0",
              "bottom": "0",
              "left": "0",
              "isLinked": false
            },
            "content_width": "full",
            "flex_direction": "column",
            "flex_justify_content": "center",
            "flex_align_items": "flex-start",
            "flex_align_items_tablet": "center"
          },
          "isInner": true,
          "parentElementId": "164e55c4",
          "innerElementIds": [
            "db84e33",
            "7fe7b508",
            "314da60",
            "7b7e33ce",
            "7ff4508"
          ]
        },
        {
          "id": "db84e33",
          "elType": "widget",
          "settings": {
            "title": "Your health, <br><b>on your time<\/b>",
            "header_size": "h1",
            "title_color": "#0D3276",
            "typography_typography": "custom",
            "typography_font_family": "Poppins",
            "typography_font_size": {
              "unit": "px",
              "size": 76,
              "sizes": []
            },
            "typography_font_weight": "400",
            "typography_text_transform": "capitalize",
            "typography_font_style": "normal",
            "typography_text_decoration": "none",
            "typography_line_height": {
              "unit": "em",
              "size": 1,
              "sizes": []
            },
            "typography_letter_spacing": {
              "unit": "px",
              "size": 0,
              "sizes": []
            },
            "_z_index": 1,
            "align_tablet": "center",
            "typography_font_size_tablet": {
              "unit": "px",
              "size": 55,
              "sizes": []
            },
            "typography_font_size_mobile": {
              "unit": "px",
              "size": 40,
              "sizes": []
            }
          },
          "widgetType": "heading",
          "parentElementId": "600c1786",
          "innerElementIds": []
        }
      ]
    }
  }
}

เรายังสามารถกรองเอลิเมนต์ตามชื่อผ่านพารามิเตอร์ filterBy (ซึ่งรับ include และ exclude) ได้อีกด้วย

การรัน query นี้:

query GetElementorData($customPostId: ID!) {
  customPost(by: { id: $customPostId }, status: any) {
    ...on ElementorMaybeEnabledForCustomPostType {
      elementorFlattenedDataItems(filterBy: { include: ["heading"] })
    }
  }
}

...จะให้การตอบกลับดังนี้:

{
  "data": {
    "post": {
      "elementorFlattenedDataItems": [
        {
          "id": "db84e33",
          "elType": "widget",
          "settings": {
            "title": "Your health, <br><b>on your time<\/b>",
            "header_size": "h1",
            "title_color": "#0D3276",
            "typography_typography": "custom",
            "typography_font_family": "Poppins",
            "typography_font_size": {
              "unit": "px",
              "size": 76,
              "sizes": []
            },
            "typography_font_weight": "400",
            "typography_text_transform": "capitalize",
            "typography_font_style": "normal",
            "typography_text_decoration": "none",
            "typography_line_height": {
              "unit": "em",
              "size": 1,
              "sizes": []
            },
            "typography_letter_spacing": {
              "unit": "px",
              "size": 0,
              "sizes": []
            },
            "_z_index": 1,
            "align_tablet": "center",
            "typography_font_size_tablet": {
              "unit": "px",
              "size": 55,
              "sizes": []
            },
            "typography_font_size_mobile": {
              "unit": "px",
              "size": 40,
              "sizes": []
            }
          },
          "widgetType": "heading",
          "parentElementId": "600c1786",
          "innerElementIds": []
        }
      ]
    }
  }
}

ปรับเปลี่ยนและจัดเก็บข้อมูล Elementor

วนซ้ำเอลิเมนต์ใน JSON ที่ได้จาก elementorFlattenedDataItems ปรับเปลี่ยนตามที่ต้องการ และจัดเก็บ JSON ที่ปรับเปลี่ยนแล้วกลับเข้าไปในโพสต์เมตา ผ่าน mutation elementorMergeCustomPostElementDataItem

ใน query นี้ เรากรองเอลิเมนต์ตามชื่อ และส่งออกหัวเรื่องที่ปรับเปลี่ยนแล้ว (ภายใต้ตัวแปรไดนามิก $modifiedElementorHeadings) รวมถึง ID ของพวกมันด้วย (ภายใต้ตัวแปรไดนามิก $modifiedElementorHeadingIDs):

query GetAndModifyElementorData($customPostId: ID!) {
  customPost(by: { id: $customPostId }, status: any) {
    ...on ElementorMaybeEnabledForCustomPostType {
      elementorFlattenedDataItems(filterBy: {include: ["heading"]})
        @underEachArrayItem(affectDirectivesUnderPos: [1, 3])
          @underJSONObjectProperty(by: { key: "id" })
            @export(as: "modifiedElementorHeadingIDs")
          @underJSONObjectProperty(
            by: { path: "settings.title" }
            failIfNonExistingKeyOrPath: false
            affectDirectivesUnderPos: [1, 2]
          )
            @strUpperCase
            @export(as: "modifiedElementorHeadings")
    }
  }
}

จากนั้น ใช้ mutation elementorMergeCustomPostElementDataItem เพื่อรวมรายการเหล่านั้นเข้ากับ JSON ของโพสต์เมตา

ในการทำเช่นนั้น คุณต้องสร้าง input ที่จะฉีดเข้าไปใน mutation ก่อน โดยเป็นอาร์เรย์ที่มี ID และการตั้งค่าของแต่ละเอลิเมนต์ที่ปรับเปลี่ยนแล้ว:

query GenerateElementorMergeDataItemInputs
  @depends(on: "GetAndModifyElementorData")
{
  elementorMergeDataItemInputs: _echo(value: $modifiedElementorHeadingIDs)
    @underEachArrayItem(
      passIndexOnwardsAs: "index",
      passValueOnwardsAs: "id"
      affectDirectivesUnderPos: [1, 2]
    )
      @applyField(
        name: "_arrayItem",
        arguments: {
          array: $modifiedElementorHeadings,
          position: $index
        },
        passOnwardsAs: "heading"
      )
      @applyField(
        name: "_echo",
        arguments: {
          value: {
            id: $id,
            settings: {
              title: $heading
            }
          }
        }
        setResultInResponse: true
      )
    @export(as: "elementorMergeDataItemInputs")
}
 
mutation StoreElementorData($customPostId: ID!)
  @depends(on: "GenerateElementorMergeDataItemInputs")
{
  elementorMergeCustomPostElementDataItem(input: {
    customPostID: $customPostId
    elements: $elementorMergeDataItemInputs
  }) {
    status
    errors {
      __typename
      ...on ErrorPayload {
        message
      }
    }
    customPost {
      __typename
      ...on CustomPost {
        id
        elementorFlattenedDataItems
      }
    }
  }
}
Prev