WordPress divi主题

如何使用 Divi 和 ACF 创建动态推荐模块

| 4月 22, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

Divi 适用于动态内容。 动态内容可用于显示文本、标题等。 通过将其与名为 Advanced Custom Fields 的插件相结合,它甚至可以在 Divi 的推荐模块中使用。 在这篇文章中,我们将了解如何使用 Divi 和 ACF 创建动态推荐模块。 Divi 和 ACF 可以很好地协同工作,这篇文章将帮助您了解如何!

google广告开户

让我们开始吧。

高级自定义字段设置

首先,我们需要安装高级自定义字段插件的免费版本。

安装高级自定义字段

要在 WordPress 中安装它,请访问 插件 > 添新 在 WordPress 仪表板中。 搜索 对于高级自定义字段,然后单击 现在安装.

  1. 插件
  2. 添新
  3. 搜索
  4. 现在安装

安装高级自定义字段

安装完成后,点击 启用.

  1. 启用

安装高级自定义字段

我们现在准备好为我们的 Divi 推荐设置自定义字段。

创建新字段组

接下来,创建一个 现场组. 该字段组将包含一个推荐所需的所有字段。 然后我们可以克隆这个字段组来创建我们想要的任意数量的推荐。

要创建字段组,请转到 自定义字段 > 添新 在 WordPress 仪表板中。

WordPress divi主题
  1. 自定义字段
  2. 添新

创建新字段组

为推荐 1 创建字段组

首先,添加标题并点击 添加字段.

  1. 添加标题
  2. 单击添加字段

为推荐创建字段组

这将打开编辑器,我们将在其中创建字段。 我们需要一次添加一个字段。 每个字段将包括标签、名称和字段类型。 名称和标签可以匹配。

见证 1 描述

输入 字段标签字段名称. 点击 字段类型 下拉框查看选项。 此字段使用与其他三个字段不同的字段类型。

  • 字段标签:推荐 1 描述
  • 字段名称:推荐 1 描述

为推荐创建字段组

选择 文本区 从列表中。

为推荐创建字段组

见证 1 姓名

接下来,向下滚动并单击 添加字段.

为推荐创建字段组

fiverr建站WordPress程序员

接下来,输入 Testimonial 1 Name for the 字段名称字段标签. 将字段类型保留为其默认值(文本)。

  • 字段名称:推荐 1 名称
  • 字段标签:推荐 1 名称

为推荐创建字段组

推荐 1 职位

接下来,单击 添加字段 并输入推荐 1 工作职位 字段名称字段标签.

  • 字段名称:推荐 1 职位
  • 字段标签:推荐 1 职位

为推荐创建字段组

见证 1 公司

接下来,单击 添加字段 并输入 Testimonial 1 Company 的 字段名称字段标签.

独立站选品工具
  • 字段名称:推荐 1 公司
  • 字段标签:推荐 1 公司

为推荐创建字段组

地点

接下来,我们将设置 位置规则. 我们将选择要使用推荐的页面或页面。 默认情况下,它具有规则 Post Type 等于 Page。 我们将保留这条规则并再添加一条。 点击 添加规则组.

地点

选择 帖子类型 新规则的下拉框,然后选择页面。 选择新规则的发布下拉框,然后选择要使用的页面。 如果要使用多个页面,请为每个页面添加新规则。

  • 第一个字段:页面
  • 第二个字段:您的页面名称

地点

高质量外链购买

发布新字段组

最后,点击 发布 编辑器右上角的按钮发布新的字段组。

发布新字段组

发布字段组后,您将看到字段和规则列表。

发布新字段组

克隆推荐字段组

接下来,我们将克隆推荐字段组。 这将使我们能够创建另一个推荐。 我们需要为我们想要创建的每个推荐重复此操作。 在 WordPress 仪表板中,转到 自定义字段 > 字段组. 将鼠标悬停在要克隆的字段组上并单击 复制.

JasperAI 10000字免费额度试用
  1. 自定义字段
  2. 字段组
  3. 复制

克隆推荐字段组

接下来,单击 编辑 打开新的字段组并更改组的名称和组内的每个字段。

克隆推荐字段组

更改标题并选择每个字段并将 1 更改为 2。单击 更新 当你准备好了。

克隆推荐字段组

WordPress备份工具updrafplus

接下来,选择您希望此推荐可用的页面。

克隆推荐字段组

您现在有了第二个推荐的字段组。

克隆推荐字段组

创建推荐信

推荐的字段显示在您选择作为推荐位置的页面的页面编辑器的底部。 这个例子只有推荐 1 的字段。我为推荐 2 的位置选择了一个不同的页面,所以它不会出现在这里。

创建推荐信

填写字段 像平常一样。 然后,您就可以在此页面的 Divi 布局中使用这些字段了。

创建推荐信

创建动态 Divi 推荐模块

他的一个优势是任何人都可以输入信息或编辑字段,而无需打开 Divi 模块。 这些字段需要在 Divi 的推荐模块中进行映射。 点击进入 使用 Divi Builder 对于这个页面。

创建动态 Divi 推荐模块

您可以将自定义字段组添加到任何页面,但我将创建一个新页面。 由于我已将此页面命名为 About Us,因此我将使用 Divi 中提供的免费相机产品布局包中的 About 页面。 我将添加一个新的推荐模块并根据页面对其进行样式设置。 首先,我将逐步完成将推荐信添加到页面的过程。

添加新的 Divi 推荐部分和行

添加一个新的 常规部分 在布局的第二部分下。

添加新的 Divi 推荐部分和行

接下来,添加一个 单列行.

添加新的 Divi 推荐部分和行

添加 Divi 推荐模块

接下来,添加一个 推荐模块 到行。

添加 Divi 推荐模块

创建动态推荐内容

接下来,我们将高级自定义字段的数据添加到推荐模块。 我们将通过将字段组中的数据作为动态内容添加到每个字段来完成此操作。 打开 模块设置 像平常一样。 当您将鼠标悬停在每个字段上时,您会看到动态选项,如下图所示。

创建动态推荐内容

动态作者姓名

首先,将鼠标悬停在 作者字段 并点击 动态内容图标.

创建动态推荐内容

你会看到 ACF 选项 在列表的底部。 这些是我们在创建字段组时为字段提供的标签。 选择 见证 1 姓名.

创建动态推荐内容

如果您想在名称之前或之后添加文本,请将其添加到之前或之后字段。 如果要启用它,也可以添加 HTML。 点击 绿色检查 当你完成时。

创建动态推荐内容

Author 字段现在显示其动态内容的名称。 您在字段中输入的文本现在显示为作者姓名。

创建动态推荐内容

动态职位

接下来,将鼠标悬停在该字段上 职称 并单击动态内容图标。

创建动态推荐内容

选择 推荐 1 职位 从列表中。

创建动态推荐内容

在字段中添加任何之前或之后的文本,然后选择绿色复选标记。

创建动态推荐内容

动态公司名称

接下来,将鼠标悬停在 公司领域 并选择其动态图标。

创建动态推荐内容

选择 见证 1 公司 从列表中。

创建动态推荐内容

如果需要,添加之前和之后的文本,然后单击绿色复选标记。

创建动态推荐内容

动态描述

最后,将鼠标悬停在内容区域上 身体 并选择动态图标。

创建动态推荐内容

选择 见证 1 描述 从列表中。

创建动态推荐内容

接下来,如果需要,添加之前和之后的文本,然后单击绿色复选标记。 退出模块并保存您的页面。

创建动态推荐内容

我们现在有一个使用动态内容字段的推荐模块。

创建动态推荐内容

编辑动态推荐内容

无需打开 Divi 构建器即可更新任何推荐字段。 要编辑动态内容,只需转到页面编辑器并更改页面底部字段中的内容。 在此示例中,我将我的姓氏添加到 Testimonial 1 Name 字段。

编辑动态推荐内容

该名称会在模块中自动更新。

编辑动态推荐内容

样式化动态推荐模块

接下来,让我们为推荐模块设置样式以匹配页面模板。

内容图片

在内容选项卡中,向下滚动到 图片 并从您的媒体库中添加此人的图像。

样式化动态推荐模块

报价图标

接下来,转到设计选项卡。 选择黑色作为 报价图标 颜色。

样式化动态推荐模块

图片

接下来,向下滚动到 图片. 将宽度和高度设置为 150 像素。 将圆角更改为 0px。

  • 宽度:150 像素
  • 高度:150 像素
  • 圆角:0px

样式化动态推荐模块

主体

向下滚动到 主体. 为字体选择蒙特塞拉特。 将颜色更改为黑色。

  • 字体:蒙特塞拉特
  • 颜色:#000000

样式化动态推荐模块

将桌面大小设置为 16px,将手机大小设置为 14px,将行高设置为 1.8em。

  • 尺寸:16 像素、14 像素
  • 行高:1.8em

样式化动态推荐模块

作者文本

向下滚动到 作者文本. 将字体更改为 Montserrat 并将颜色更改为黑色。 将桌面尺寸设置为 20 像素,平板电脑尺寸设置为 18 像素,手机尺寸设置为 16 像素。

  • 字体:蒙特塞拉特
  • 颜色:#000000
  • 尺寸:20px、18px、16px

样式化动态推荐模块

位置文本

接下来,向下滚动到 位置文本 并将字体更改为蒙特塞拉特。

样式化动态推荐模块

公司文本

最后,向下滚动到 公司文本 并将字体设置为蒙特塞拉特。 关闭模块并保存您的页面。

样式化动态推荐模块

动态推荐模块结果

这是动态 Divi 推荐模块的成品外观。

动态推荐模块结果

这是它在页面布局中的外观。

动态推荐模块结果

结束的想法

这就是我们对如何使用 Divi 和 ACF 创建动态推荐模块的看法。 使用 Divi 的动态内容,将自定义字段添加到 Divi 推荐模块很简单。 就像将字段创建为字段组然后选择具有 Divi 动态内容的字段一样简单。

我们希望收到你的来信。 您是否在 Divi 和 ACF 中使用动态推荐内容? 在评论中让我们知道。

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题