创建一个功能丰富、视觉效果出众的网站时，WordPress 是最受欢迎的选择之一。不仅因为它的灵活性，还因为它与各种插件的完美兼容性。两款不错的插件是 Elementor 和 高级自定义字段（Advanced Custom Fields，简称 ACF）。

在这篇文章中，我们将为详细介绍如何将这两者结合使用，为你的网站带来全新的自定义设计体 验。无论是创建自定义页面布局，还是为特定页面添加动态内容，都可以通过这篇文章找到清晰的指导。

什么是高级自定义字段 (ACF)？

高级自定义字段是一款广泛应用于 WordPress 网站的插件，帮助用户创建和管理自定义字段。它允许向页面、帖子、自定义文章类型、分类法等添加额外的内容输入区域，这对增强 WordPress 网站的功能非常有帮助。

ACF 插件版本

• 免费版本：可在 WordPress 插件库中找到，提供基本功能，适用于大多数日常网站需求。
• 高级版：提供更多高级功能，如可重复字段、灵活内容字段、画廊字段等。

什么是 Elementor？

Elementor 是一款广泛使用的 WordPress 页面构建器插件，凭借其直观的拖放界面和丰富的设计选项，深受全球用户的喜爱。它允许用户在不编写代码的情况下，轻松创建高度自定义的页面设计。

Elementor 插件版本

• 免费版本：提供基础页面构建功能，可从 WordPress 插件库下载。
• 高级版：解锁更多高级功能，如模板库、全球小部件、动态内容显示等。

借助 Elementor，可以为不同页面类型设计独特的布局和样式，尤其是在结合使用 ACF 时，能够以动态方式显示自定义数据。

如何在 Elementor 中设置并使用 ACF：详细步骤

接下来我们将分步指导你如何将 ACF 与 Elementor 集成，并在你的网站上显示动态内容。

1. 安装并激活插件

首先，需要确保已在你的 WordPress 网站上安装并激活了以下插件：

• Elementor
• 高级自定义字段（ACF）

这两款插件可以在 WordPress 插件库中免费找到。安装完成后，在 WordPress 仪表盘左侧的导航栏中可以找到这两款插件的设置入口。

2. 创建新的字段组

在 ACF 中，字段是通过字段组进行管理的。每个字段组可以包含多个字段，可以为特定页面、文章或其他自定义文章类型设置这些字段。

1. 导航至 WordPress 仪表盘中的 “自定义字段”，点击 “添加新字段组”。

2. 为你的字段组起一个名字。此名字仅用于后台识别，不会在前端显示。

3. 接下来，你可以添加需要的字段。在字段设置页面中，可以选择字段类型（文本、数字、图片、选择框等）。

例如，可以为一个 WooCommerce 产品页面添加如下字段：

• 产品名称
• 产品材质
• 产品价格

每个字段都可以根据需要配置不同的属性，如字段标签、名称、默认值、占位符等。

3. 配置字段显示规则

完成字段组的设置后，需要指定这些字段应显示的位置。例如，可以选择将这些字段显示在所有文章、页面或特定的自定义文章类型下。

1. 在字段组的设置中，找到 “显示规则” 部分。

2. 设置条件，例如“页面等于示例页面”或“文章类型等于产品”。

3. 保存设置。

4. 在 Gutenberg 编辑器中测试字段

配置完成后，可以在 Gutenberg 编辑器 中查看你添加的字段。打开一个与设置条件匹配的页面或文章，会在编辑器的底部看到新添加的自定义字段。

5. 使用 Elementor 显示 ACF 数据

接下来，需要在 Elementor 中将这些自定义字段显示在前端页面上。按照以下步骤操作：

1. 打开 Elementor 编辑器，选择你希望显示自定义字段数据的页面进行编辑。
2. 在 Elementor 中，拖放一个合适的小部件（例如文本、标题等）到页面上。
3. 单击小部件，找到左边设置面板。

4. 在设置面板中，单击 “动态标签” 图标，然后选择 “ACF 字段”。

5. 从下拉菜单中，选择之前设置的 ACF 字段（例如“产品名称”）。

6. 动态内容展示

完成上述步骤后，你的页面将能够动态显示来自 ACF 的自定义字段数据。例如，如果你在 ACF 中输入了“产品名称”，该名称将自动显示在前端页面上。

7. 更新 ACF 数据

更重要的是，如果你在 Gutenberg 编辑器中更改了 ACF 字段的值，不需要再次打开 Elementor 进行编辑。Elementor 会自动从 ACF 读取更新后的数据，并在前端实时显示。

进阶使用：自定义帖子类型 (CPT) 和 ACF

除了文章和页面外，还可以使用 ACF 为自定义帖子类型 (Custom Post Types, CPT) 添加字段。CPT 是 WordPress 提供的功能，允许你创建不同于常规文章和页面的内容类型，例如“案例研究”或“团队成员”。

在 Elementor 中，可以为这些自定义帖子类型设计独特的布局，并通过 ACF 显示动态内容。

结论

通过 WP自学建站，将 ACF 和 Elementor 结合使用，可以大大提升网站的定制性和灵活性。ACF 可以创建各种自定义字段，Elementor 则为你提供了无与伦比的页面设计体验。无论你是在为 WooCommerce 产品页面添加动态信息，还是为企业网站展示品牌合作伙伴，结合这两个插件将为你的设计带来前所未有的便利和创意空间。