使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

AI 智能摘要

Bricks主题是强大的自定义设计的WordPress主题，而ACPT插件也可以针对于文章进行自定义设计。那么如果两者都是兼容的，接下来要进行文章的自定义设计该如何操作及设置呢？这里主题铺以建设一个房产展示网站委里，向您展示如何从头开始使用Bricks builder和 ACPT 创建房地产网站。

没有Bricks主题及ACPT插件？可以从本站进行下载

Bricks汉化中文版(更新到2.3.5)-轻量响应式设计WordPress商城自定义主题下载

16天前

010813

ACPT汉化中文版(更新到2.0.57)-WordPress自定义文章类型插件下载

1个月前

01247

设置Bricks

从 Bricks 菜单转到“设置”，然后转到“Builder”选项卡。

图片[1]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

启用动态数据

向下滚动并打开“动态数据”下找到的所有设置。

图片[2]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

ACPT：注册新的文章类型

转到 ACPT – 自定义文章类型。

点击右上角的“注册新文章类型”按钮。

图片[3]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

填写自定义文章类型表格

通过填写字段来创建新的文章类型。

在这个例子中，我选择创建一个自定义文章类型“属性”。

图片[4]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

保存自定义文章类型

保存自定义文章类型。大多数情况下，默认设置即可。

图片[5]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

Bricks：关联自定义柱子类型

创建新的自定义文章类型后，您将看到它出现在左侧的 WordPress 仪表板菜单中。

当你看到新文章类型“属性”的菜单时，

转到 Bricks 设置。

转到“常规”选项卡，打开开关并注册新的自定义文章类型“属性”。

图片[6]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

Bricks：打开古腾堡数据选项

此时，请同时启用与“Gutenberg 数据”相关的两个选项。这将提高您的工作流程的灵活性。

始终保存更改。

图片[7]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

在自定义文章类型“属性”中创建 Metabox

前往 ACPT – 自定义文章类型

单击自定义文章类型“属性”的元框列下的“创建”。

为了本示例的目的，我们将仅创建一个元框。

对于自定义文章类型的任意数量的元框，该过程都是相同的。

图片[8]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

添加元框

属性元框页面将会打开。

在右上角单击“添加元框”。

图片[9]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

命名元框

首先，单击框名称标签，并在元框中添加您想要的名称以识别它。

在这种情况下，我将使用页面右上角的“basic_info”和“保存”。

图片[10]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

在元框中创建自定义字段

现在我们已经创建并添加了元框的名称，我们开始添加自定义字段，以便我们可以轻松提交信息。

图片[11]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

添加自定义字段

为“basic_info”元框添加您想要的所有自定义字段。

保存，然后创建我们的第一个自定义文章。

图片[12]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

创建您的第一个自定义文章

转到菜单栏，从自定义文章类型“属性”菜单中转到子菜单“添加属性”并单击。

新的自定义文章后端（编辑器）将打开并显示您的所有自定义字段。

图片[13]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

添加自定义文章的标题

首先，添加标题。

我们可以在文章中正常添加标题和其他块，因为之前我们已经在 Bricks 设置的“常规”选项卡中打开了“Gutenberg 数据”相关选项。

在这里，我添加了标题 Skyline View Condo。

图片[14]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

填写自定义字段并单击“使用 Bricks 编辑”

在“basic_info”元框下的自定义字段中填写此房产列表所需的所有数据。

现在，发布文章，然后单击“使用 Bricks 编辑”，并尝试从前端或 Bricks 编辑器查看文章。

图片[15]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

哎呀！看不到我的文章！

很常见的情况是，当您第一次尝试查看新的自定义文章时，您收到的只是一条消息“无效的文章类型”。

自从 WordPress 开始使用自定义文章以来，我们一直在使用各种自定义文章插件来解决这个问题。

不要恐慌。

图片[16]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

前往 WordPress 设置 – 永久链接

图片[17]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

选择“Plain”作为您的永久链接结构

选择“Plain”作为永久链接结构，然后“Save”。

图片[18]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

现在，选择您想要的永久链接结构

选择您拥有或想要使用的永久链接结构。

然后保存。

这里我们选择“文章名称”。

图片[19]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

更新您的自定义文章

现在从前端返回到您新添加的自定义文章、更新和视图。

图片[20]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

现在，单击“使用Bricks编辑”

单击“使用 Bricks 编辑”以在 Bricks 编辑器中查看它。

您的自定义文章将会在那里。

图片[21]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

在 Bricks 中显示自定义文章内容 – 标题

首先，我们添加一个部分。

图片[22]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

将文章标题图钉拖到顶部部分

将文章标题图钉从左侧窗格拖到部分中。

图片[23]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

出现标题

您的文章标题出现了，但目前是左对齐的。

图片[24]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

将文章标题居中对齐

现在，可以看到文章标题左对齐。

通过单击文章标题并转到左侧窗格中的“样式”Flex 将其居中。

图片[25]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

在 Bricks 中显示自定义文章内容 – 添加新部分

现在，将左侧窗格中的“布局”选项卡上的“部分”拖到右侧窗格或直接拖到编辑区域。

将元素从左侧窗格拖放到右侧窗格进行正确定位比尝试直接放置在编辑器区域中更容易。

图片[26]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

在 Bricks 中显示自定义文章内容 – 添加图像字段

向新部分添加一个容器。

将图像图钉从左侧窗格拖到容器中。

图片[27]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

单击空白图像图标

现在您将在容器中看到一个空白图像图标，显示“未选择图像”。

点击空白图像的图标。

“图像”窗格将在您的左侧打开。

图片[28]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

添加自定义字段来提取图像数据

此时，您可以通过“选择图像”直接从媒体库中选择图像。

或者，您可以通过另外两个选项来提取图像，通过使用闪电图标的“动态数据”，或者使用该选项从外部 URL 提取图像。

这里我在创建元框的时候已经创建了自定义图像字段，并且在自定义文章上填写数据的时候添加了属性图像。

因此，我单击闪电图标来获取动态数据。

然后选择属性图像字段。

图片[29]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

图像显示和对齐

图像现在出现在编辑器区域中，但左对齐。

我从“样式”选项卡将其置于中心。

现在，我在编辑器区域中有了该属性的标题和图像。

图片[30]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

在 Bricks 中显示自定义文章内容 – 在图片上方添加文本

我想在图像上方和标题后添加该属性的简短描述。

因此，我将富文本图钉从左侧窗格拖到图像上方的顶部容器中，并将富文本放在同一容器中的文章标题下。

图片[31]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

通过富文本添加动态数据

您可以通过富文本 (RT) 引脚输入几乎所有自定义字段数据，图像和视频除外。

将 RT 引脚放置到位后，单击它，您会在左侧窗格中看到它打开。

图片[32]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

单击闪电图标查找并选择自定义字段

删除内容 – 添加媒体 – 视觉选项卡下的占位符文本。

单击“闪电”动态内容图标。

图片[33]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

选择您想要的文本的自定义字段

向下滚动到 ACPT 并选择所需的字段。

在这种情况下，我在“basic_info”元框中创建了“简短描述”字段，并选择了它。

图片[34]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

对齐字段并检查Bricks渲染

我将字段对齐到中心，按下左上角的“b”图标并检查它的渲染方式。

图片[35]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

在 Bricks 中显示自定义文章内容 – 显示更多自定义字段数据

在 Bricks 中，从 ACPT 自定义文章添加自定义字段文本数据在每种情况下几乎都是相同的。

首先添加一个新的部分。

图片[36]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

添加容器和块

您可以在“部分”中添加容器或块。

图片[37]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

在块内创建列

选择右侧窗格上的块，然后选择所需的列布局。

我这里选择了4列布局。

图片[38]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

将 RT 图钉拖到您想要放置的位置

可以很容易地将它们放置在右侧窗格中的相应列下。

图片[39]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

将 RT 引脚放置在所有列中

现在我已经在所有列中填写了 RT 引脚，我将在各个区域中提取自定义字段数据。

图片[40]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

检查前端显示

现在，您将在前端看到自定义字段数据进入的所有列中的占位符文本。

图片[41]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

在列中添加自定义字段数据

首先删除占位符文本。

图片[42]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

选择自定义字段

从左侧窗格中 RT 的“闪电”动态数据图标中选择要显示的适当字段。保存。

使用Bricks设计网页的内容。保存并发布。

重复此操作，直到每一列都有文本。

对所有 RT 引脚执行相同操作

使用相同的流程将自定义字段放置在每一列中。

图片[44]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺

这是 Bricks 中的 Custom Post 的前端

我输入到 Meta 框中的所有信息均在前端正确呈现。

图片[45]-使用Bricks主题及ACPT插件设计自定义文章超详细图文教程-主题铺