高級自定義字段 （ACF） 簡介
雖然 WordPress 為帖子和頁面等內容類型提供了內置支持，但高級自定義字段 （ACF）允許用戶為 WordPress 網站自定義內容類型和字段。為帖子、頁面、自定義帖子類型和分類術語創建自定義字段。這些自定義字段可以存儲各種數據類型，包括文本、圖像、文件等，使其成為根據特定需求定制 WordPress 內容的工具。
首先使用 WordPress 管理儀表板中的 ACF 界面。您可以創建任何類型的自定義帖子類型并向其添加一些字段。
在 WordPress 中設置 GraphQL
要通過 GraphQL 公開 WordPress 數據，我們將使用 WPGraphQL 插件。WPGraphQL 提供了一個架構和端點來使用 GraphQL 語法查詢 WordPress 數據。
WPGraphQL 通過 GraphQL API 公開 WordPress 數據，充當 WordPress 和前端框架之間的橋梁。借助 WPGraphQL，開發人員可以精確地查詢 WordPress 內容，僅檢索特定請求所需的數據。
我們需要安裝兩個插件來使用 GraphQL 查詢訪問 ACF 數據：WPGraphQL 插件和 WPGraphQL for ACF 插件。
使用 GraphQL 查詢訪問 ACF 數據
用于訪問數據的設置
值得注意的是，您需要執行兩件事才能繼續訪問 ACF 數據。首先，選中 GraphQL 設置中的Enable Public Introspection。然后，在 ACF 中每個創建的帖子類型的頁面上，單擊“高級配置”滑塊。選擇標題為 GraphQL 的最右邊選項卡，然后啟用“在 GraphQL 中顯示”滑塊。
GraphQL 查詢
讓我們深入了解如何使用 GraphQL 查詢從 WordPress 檢索 ACF 數據。
例如，下面是一個查詢，用于獲取產品列表及其 ACF 字段：
{
products {
edges {
node {
id
title
acfFields {
productName
productDescription
productImage {
sourceUrl
altText
}
}
}
}
}
}
讓我們分解一下查詢的每個部分正在做什么：GET_PRODUCTSgqlproductNameproductDescriptionproductImage
-
products：這是查詢的根字段，表示我們要檢索與產品相關的數據。
-
edges：這是 WPGraphQL 中使用的一種連接類型，用于表示具有分頁信息的項目列表。它通常在從列表或集合中查詢數據時使用。
-
node：在每條邊內，都有一個表示單個產品物料的節點。這是每個產品的實際數據所在的位置。
-
id：此字段請求每個產品的唯一標識符 (ID)。ID 通常用于唯一標識集合中的每個項目。
-
title：此字段請求每個產品的標題。標題是與WordPress中的內容項關聯的常見信息。
-
acfFields：此字段請求與每個產品關聯的自定義字段。在這種情況下，它專門要求使用高級自定義字段 （ACF） 插件創建的字段。
-
productName、productDescription、productImage：這些是在 ACF 中為產品定義的自定義字段。查詢請求每個字段的數據，包括產品名稱、描述和圖像。
-
sourceUrl、altText：這些是 productImage 字段的子字段，分別請求源 URL（即圖像的 URL）和 alt 文本（即圖像的替代文本）。
對于您自己的查詢，您可以將一些值替換為您自己的 ACF 字段名稱。productName``productDescription``productImage
在 React 應用中集成 ACF 數據
一旦我們有了 GraphQL 查詢，我們就可以將其集成到 React Web 應用程序中。此 React 組件使用前面的 GraphQL 查詢獲取產品數據并顯示產品列表。
import React from 'react';
import { useQuery, gql } from '@apollo/client';
?
const GET_PRODUCTS = gql`
{
products {
edges {
node {
id
title
acfFields {
productName
productDescription
productImage {
sourceUrl
altText
}
}
}
}
}
}
`;
?
const ProductList = () => {
const { loading, error, data } = useQuery(GET_PRODUCTS);
?
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
?
return (
<div>
{data.products.edges.map(({ node }) => (
<div key={node.id}>
<h2>{node.title}</h2>
<p>{node.acfFields.productName}</p>
<p>{node.acfFields.productDescription}</p>
<img src={node.acfFields.productImage.sourceUrl} alt={node.acfFields.productImage.altText} />
</div>
))}
</div>
);
};
?
export default ProductList;
Code language: JavaScript (javascript)
讓我們來看看這個 React 組件是如何工作的。
GraphQL 查詢定義
常量使用標記模板文本定義 GraphQL 查詢。此查詢從無頭 WordPress 后端請求產品的數據，包括其 ID、標題和自定義字段。GET_PRODUCTS``gql``productName``productDescription``productImage
ProductList 組件
在組件內部，鉤子用于執行 中定義的 GraphQL 查詢。它返回一個包含加載、錯誤和數據屬性的對象。如果查詢仍在加載 （ 為 true），則組件將呈現加載消息。如果在查詢執行過程中出現錯誤（ 不為 null），則組件將呈現錯誤消息。如果查詢成功且沒有錯誤，則組件將呈現產品列表。useQuery``GET_PRODUCTS``loading``<p>Loading...</p>``error``<p>Error :(</p>
使用函數 on 呈現產品列表，該函數表示產品節點數組。對于每個產品節點，將呈現一個元素，并顯示產品的標題和（包括源 URL 和替代文本）。map``data.products.edges``<div>``productName``productDescription``productImage
結論
