創(chuàng)建一個功能豐富、視覺效果出眾的網(wǎng)站時，WordPress 是最受歡迎的選擇之一。不僅因為它的靈活性，還因為它與各種插件的完美兼容性。兩款不錯的插件是 Elementor 和 高級自定義字段（Advanced Custom Fields，簡稱 ACF）。

在這篇文章中，我們將為詳細(xì)介紹如何將這兩者結(jié)合使用，為你的網(wǎng)站帶來全新的自定義設(shè)計體 驗。無論是創(chuàng)建自定義頁面布局，還是為特定頁面添加動態(tài)內(nèi)容，都可以通過這篇文章找到清晰的指導(dǎo)。

什么是高級自定義字段 (ACF)？

高級自定義字段是一款廣泛應(yīng)用于 WordPress 網(wǎng)站的插件，幫助用戶創(chuàng)建和管理自定義字段。它允許向頁面、帖子、自定義文章類型、分類法等添加額外的內(nèi)容輸入?yún)^(qū)域，這對增強(qiáng) WordPress 網(wǎng)站的功能非常有幫助。

ACF 插件版本

• 免費版本：可在 WordPress 插件庫中找到，提供基本功能，適用于大多數(shù)日常網(wǎng)站需求。
• 高級版：提供更多高級功能，如可重復(fù)字段、靈活內(nèi)容字段、畫廊字段等。

什么是 Elementor？

Elementor 是一款廣泛使用的 WordPress 頁面構(gòu)建器插件，憑借其直觀的拖放界面和豐富的設(shè)計選項，深受全球用戶的喜愛。它允許用戶在不編寫代碼的情況下，輕松創(chuàng)建高度自定義的頁面設(shè)計。

Elementor 插件版本

• 免費版本：提供基礎(chǔ)頁面構(gòu)建功能，可從 WordPress 插件庫下載。
• 高級版：解鎖更多高級功能，如模板庫、全球小部件、動態(tài)內(nèi)容顯示等。

借助 Elementor，可以為不同頁面類型設(shè)計獨特的布局和樣式，尤其是在結(jié)合使用 ACF 時，能夠以動態(tài)方式顯示自定義數(shù)據(jù)。

如何在 Elementor 中設(shè)置并使用 ACF：詳細(xì)步驟

接下來我們將分步指導(dǎo)你如何將 ACF 與 Elementor 集成，并在你的網(wǎng)站上顯示動態(tài)內(nèi)容。

1. 安裝并激活插件

首先，需要確保已在你的 WordPress 網(wǎng)站上安裝并激活了以下插件：

• Elementor
• 高級自定義字段（ACF）

這兩款插件可以在 WordPress 插件庫中免費找到。安裝完成后，在 WordPress 儀表盤左側(cè)的導(dǎo)航欄中可以找到這兩款插件的設(shè)置入口。

2. 創(chuàng)建新的字段組

在 ACF 中，字段是通過字段組進(jìn)行管理的。每個字段組可以包含多個字段，可以為特定頁面、文章或其他自定義文章類型設(shè)置這些字段。

1. 導(dǎo)航至 WordPress 儀表盤中的 “自定義字段”，點擊 “添加新字段組”。

2. 為你的字段組起一個名字。此名字僅用于后臺識別，不會在前端顯示。

3. 接下來，你可以添加需要的字段。在字段設(shè)置頁面中，可以選擇字段類型（文本、數(shù)字、圖片、選擇框等）。

例如，可以為一個 WooCommerce 產(chǎn)品頁面添加如下字段：

• 產(chǎn)品名稱
• 產(chǎn)品材質(zhì)
• 產(chǎn)品價格

每個字段都可以根據(jù)需要配置不同的屬性，如字段標(biāo)簽、名稱、默認(rèn)值、占位符等。

3. 配置字段顯示規(guī)則

完成字段組的設(shè)置后，需要指定這些字段應(yīng)顯示的位置。例如，可以選擇將這些字段顯示在所有文章、頁面或特定的自定義文章類型下。

1. 在字段組的設(shè)置中，找到 “顯示規(guī)則” 部分。

2. 設(shè)置條件，例如“頁面等于示例頁面”或“文章類型等于產(chǎn)品”。

3. 保存設(shè)置。

4. 在 Gutenberg 編輯器中測試字段

配置完成后，可以在 Gutenberg 編輯器 中查看你添加的字段。打開一個與設(shè)置條件匹配的頁面或文章，會在編輯器的底部看到新添加的自定義字段。

5. 使用 Elementor 顯示 ACF 數(shù)據(jù)

接下來，需要在 Elementor 中將這些自定義字段顯示在前端頁面上。按照以下步驟操作：

1. 打開 Elementor 編輯器，選擇你希望顯示自定義字段數(shù)據(jù)的頁面進(jìn)行編輯。
2. 在 Elementor 中，拖放一個合適的小部件（例如文本、標(biāo)題等）到頁面上。
3. 單擊小部件，找到左邊設(shè)置面板。

4. 在設(shè)置面板中，單擊 “動態(tài)標(biāo)簽” 圖標(biāo)，然后選擇 “ACF 字段”。

5. 從下拉菜單中，選擇之前設(shè)置的 ACF 字段（例如“產(chǎn)品名稱”）。

6. 動態(tài)內(nèi)容展示

完成上述步驟后，你的頁面將能夠動態(tài)顯示來自 ACF 的自定義字段數(shù)據(jù)。例如，如果你在 ACF 中輸入了“產(chǎn)品名稱”，該名稱將自動顯示在前端頁面上。

7. 更新 ACF 數(shù)據(jù)

更重要的是，如果你在 Gutenberg 編輯器中更改了 ACF 字段的值，不需要再次打開 Elementor 進(jìn)行編輯。Elementor 會自動從 ACF 讀取更新后的數(shù)據(jù)，并在前端實時顯示。

進(jìn)階使用：自定義帖子類型 (CPT) 和 ACF

除了文章和頁面外，還可以使用 ACF 為自定義帖子類型 (Custom Post Types, CPT) 添加字段。CPT 是 WordPress 提供的功能，允許你創(chuàng)建不同于常規(guī)文章和頁面的內(nèi)容類型，例如“案例研究”或“團(tuán)隊成員”。

在 Elementor 中，可以為這些自定義帖子類型設(shè)計獨特的布局，并通過 ACF 顯示動態(tài)內(nèi)容。

結(jié)論

通過 WP自學(xué)建站，將 ACF 和 Elementor 結(jié)合使用，可以大大提升網(wǎng)站的定制性和靈活性。ACF 可以創(chuàng)建各種自定義字段，Elementor 則為你提供了無與倫比的頁面設(shè)計體驗。無論你是在為 WooCommerce 產(chǎn)品頁面添加動態(tài)信息，還是為企業(yè)網(wǎng)站展示品牌合作伙伴，結(jié)合這兩個插件將為你的設(shè)計帶來前所未有的便利和創(chuàng)意空間。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M解答！免費助力個人，小企站點！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時間：周一至周五，9:30-18:30，節(jié)假日休息