ElementorElementor
Elementor
Elementor 플러그인（및 Elementor PRO）과의 통합입니다.
GraphQL 스키마에는 페이지 및 템플릿에서 Elementor 데이터를 가져오고 업데이트하기 위한 필드와 뮤테이션이 제공됩니다.
필드
커스텀 포스트에서 Elementor 데이터를 쿼리합니다. 다음 필드가 모든 CustomPost 타입（Post, Page, GenericCustomPost 등）에 추가되어 있습니다:
elementorDataelementorFlattenedDataItems
필드 CustomPost.elementorData: [JSONObject!]는 Elementor가 저장한 형식으로 커스텀 포스트의 Elementor 데이터를 가져옵니다.
다음 쿼리를 실행하면:
{
post(by: { id: 1 }) {
elementorData
}
}...다음과 같은 응답이 반환될 수 있습니다:
{
"data": {
"post": {
"elementorData": [
{
"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"
},
"elements": [
{
"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"
},
"elements": [
{
"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": []
}
},
"elements": [],
"widgetType": "heading",
"htmlCache": "\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Your health, <br><b>on your time<\/b><\/h1>\t\t\t\t<\/div>\n\t\t"
}
]
}
],
"isInner": false
}
]
}
}
}필드 CustomPost.elementorFlattenedDataItems: [JSONObject!]는 elementorData 필드의 출력을 평탄화하여, 중첩된 요소를 포함한 모든 요소가 배열의 첫 번째 레벨에 표시됩니다.
다음 쿼리를 실행하면:
{
post(by: { id: 1 }) {
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를 허용합니다）를 사용하여 타입 또는 위젯 이름으로 요소를 필터링할 수도 있습니다.
다음 쿼리를 실행하면:
{
post(by: { id: 1 }) {
elementorContainerFlattenedDataItems: elementorFlattenedDataItems(filterBy: {include: ["container"]})
elementorHeadingFlattenedDataItems: elementorFlattenedDataItems(filterBy: {include: ["heading"]})
}
}...다음 응답이 반환됩니다:
{
"data": {
"post": {
"elementorContainerFlattenedDataItems": [
{
"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"
]
}
]
},
{
"elementorHeadingFlattenedDataItems": [
{
"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 데이터를 업데이트합니다:
elementorSetCustomPostElementData는 Elementor가 사용하는 것과 동일한 형식의 JSON을 받아 커스텀 포스트의 Elementor 데이터를 설정합니다.
elementorMergeCustomPostElementDataItem은 커스텀 포스트의 Elementor 데이터에서 특정 요소의 값을 덮어씁니다.