操作ガイドElementor
Elementor
投稿のElementorデータを編集し、必要に応じて更新することができます。そのためには、その投稿のElementor JSONメタをクエリ、反復、変換、保存します。
Elementorデータをクエリする
Elementorデータをクエリするフィールドは2つあります：
elementorData：ElementorポストのすべてのエレメントのJSONを返しますelementorFlattenedDataItems：同様にJSONを返しますが、単一レベルの配列にフラット化されます
Elementorデータを変換・更新するには、elementorFlattenedDataItemsを使用します。これにより、エレメントを反復処理しやすくなります。
フィールドelementorFlattenedDataItemsをクエリすると、Elementorポスト内のすべてのエレメントのフラット化されたJSONが返されます。
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 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データを変更して保存する
elementorFlattenedDataItemsが生成したJSON内のエレメントを反復処理し、必要に応じて変更を加え、elementorMergeCustomPostElementDataItemミューテーションを使用して変更済みJSONを投稿メタに書き戻します。
このクエリでは、エレメントを名前でフィルタリングし、変更済みの見出し（動的変数$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")
}
}
}次に、elementorMergeCustomPostElementDataItemミューテーションを使用して、それらのエントリを投稿メタJSONにマージします。
そのためには、まずミューテーションに注入するインプットを生成する必要があります。これは、変更された各エレメントの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
Next