Wordpress黑色星期五&Cyber​​ Monday优惠2021
小时
分钟

如何使用Elementor和Toolset构建具有动态内容的高级WordPress站点

WordPress为高级动态内容站点提供了一个很好的解决方案,但如果您不是开发人员,则解锁此功能很难。在本指南中,您将学习一个完全免费的解决方案来构建具有WordPress的自定义内容站点。

搜索一种用WordPress构建动态网站的方法,但是没有需要习俗代码?

WordPress使得在后台添加自定义内容变得很容易。但是,如果您想在前端的标准化模板中显示该信息,通常需要直接编辑主题的模板文件,如果您不是开发人员,这是不可能的。

值得庆幸的是,可以完全消除来自方程的代码,并让您构建动态WordPress网站,无论您拥有什么样的技术知识。

最好的组合之一是工具集Elementor Pro,这是我们将在这篇文章中专注的。

您将学习如何使用Elementor和Toolset - 所需的零代码构建免费的动态网站。

下面,你可以看到两个不同的文章使用相同的Elementor模板的例子,但从Toolset中引入了动态信息,使每个文章的内容是独特的:

动态内容网站的示例

虽然我们选择了本教程的具体示例(网球教练的目录),但您可以将本指南的概念应用于任何类型的动态WordPress网站。

您需要在没有代码的情况下建立动态站点

如果你想不用代码构建动态WordPress网站,工具集Elementor Pro做一个完美的对。

简而言之,Toolset负责在站点后端设置所有内容,然后Elementor Pro处理前端的一切。

今天获得Elementor Pro

开始使用世界领先的WordPress网站建设者!

获取Expontor Pro

使用Toolset,您可以创建自定义文章类型自定义字段让它变得容易输入并存储您网站的动态信息在后端。

在后端添加信息

然后,Elementor Pro动态标签功能允许您拍摄所有自定义数据并使用Elementor的Visual,Drag-Drop编辑器构建其模板。

您可以通过ElementOR识别元素从您添加的CopySet添加的自定义字段中动态地拉动来自元素的静态设计。

选择自定义字段

最重要的是,这两种工具都不需要编码或编码知识,所以任何人都可以设置它。

如果你还是有点困惑,不要担心——我将在教程中详细介绍这种配对是如何工作的。

这两个ElementorPro和Toolset是Premium插件,但我们有处理页面,可以帮助您节省一些钱:

118bet官网

我们与工具集背后的团队合作,为您提供独家20%的折扣。

118bet官网

如何使用Toolset和Elementor创建动态WordPress站点

现在,让我们进入如何设置动态站点的实际逐步指南。

本节中的策略将用于字面上的任何类型的动态内容,但我们将专注于清晰的具体示例。

假设您想在您所在地区创建一个本地网球教练的目录。对于每个网球教练,您想显示一些特定信息,如教练......

  • 姓名
  • 图片
  • 传记/经验
  • 电话号码
  • 电子邮件地址
  • 个人网站
  • 教练的位置
  • 每小时费用

要以标准化的格式显示这些信息,您可以创建一个模板,该模板将动态地获取每个教练的详细信息。

要开始,请确保已安装并激活以下插件:

让我们过一遍……

1.创建自定义Post类型(可选)

这第一步是可选的,但很多动态站点都很重要。

在开始添加内容之前,需要选择存储内容的位置。一种选择是使用WordPress创建的默认Post和Page系统。例如,您可以将每个网球教练添加为一个新的Post。

然而,如果你想要拥有一个博客,因为那么你就会将你的常规博客帖子与您的网球教练列表混合在一起。

要解决此问题,您可以为网球教练创建自定义帖子类型(或任何您想要存储的内容)。自定义帖子类型就像帖子和页面一样,但它与这些默认内容类型分开。

例如,如果您创建了网球Coach定制帖子类型,则会转到网球教练→添加新添加新教练而不是帖子→添加新内容

所以 - 你的时候可以只要使用默认的文章和页面,我认为大多数动态的WordPress站点最好创建一个单独的自定义文章类型。

如果您确实想要创建自定义后类型,则工具集类型使其超容易。去工具集→发布类型→添加新

然后,在顶部输入四个基本信息。你可以探索其他设置,但你只需要在顶部输入四个细节:

添加自定义帖子类型

保存自定义后类型后,您将在管理员侧栏中看到一个新选项:

自定义帖子类型示例

这是它!现在,你所有的网球教练列表将与你的常规博客文章分开。

2.使用工具集创建自定义字段

接下来,您需要使用Toolset创建自定义字段。这些是后端编辑器中的新输入字段,您可以用来收集每个Coach的姓名,联系方式等。

为什么要创建自定义字段,而不是仅在WordPress编辑器中添加所有这些详细信息?嗯,不仅可以在这种方式标准化输入的后端更方便,但在自定义字段中存储此信息也是允许您使用的动态模板Elementor

您可以将详细信息插入自定义字段,然后元素将自动将该信息插入每个教练的前端设计中。

要创建新的自定义字段组,请转至工具集→自定义字段→添加新。在弹出窗口中,选择帖子字段

添加职位字段

然后,输入此字段组的名称并选择保存字段组

FIELD GROUP细节

接下来,使用出现在设置以控制要在编辑器中显示这些字段的位置。对于本例,您将选择网球教练因为你只希望看到这些领域,当你添加一个新的网球教练:

出现在

然后,使用添加新字段按钮为要收集的每条信息添加自定义字段。对于每个自定义字段,请务必选择正确的输入类型。

例如,如果您为Coach的电话号码创建一个字段,则会选择电话字段类型:

添加一个字段

然后,您将能够为该字段配置一些基本详细信息:

配置字段

重复该过程以为每条信息添加字段。到最后,它可能看起来像这样:

多个自定义字段

我没有为Coach的传记创建一个自定义字段,因为我们可以使用常规WordPress编辑器。

完成后,请务必保存您的字段组。

3.添加您的内容

添加自定义字段后,您将想要添加每个Coach的内容。

对于这个例子,你会去网球教练→添加新并在“自定义”字段中输入信息:

在后端添加信息

重复这个过程以添加更多的内容,例如本例中的每个网球教练。

4.创建一个新的元素模板

至此,您已经成功地配置了后端你的网站。但是,如果您在网站前端打开一段内容,则不会看到自定义字段中的信息。

过去的,您现在需要使用自定义代码。但是Elementor在专业版中,您可以使用拖放来构建包含动态信息的模板。

开始,去模板→添加新创建一个新的元素模板。对于模板类型,请选择单后。然后,给它一个名字来帮助您记住它,然后单击创建模板

创建元素模板

这将引导您进入Elementor编辑器。继续并关闭Elementor模板库,因为您将从头开始设计模板。

5.设计您的Elementor模板

现在,现在是时候开始建设了。

对于本教程,我将假设您熟悉使用元素的基础知识,例如创建布局并发制您的元素。如果你不是,你可以查看元素入门指南

首先,使用静态文本创建模板的设计。如果文本还没有意义,请不要担心,我们将立即将所有这些静态文本转换为动态内容。

例如,这是一个基本布局,包括来自我们自定义字段的所有信息的占位符:

COLLENTOR模板W /占位符

6.让你的元素模板动态

现在,是时候使用Elementor的动态标签功能来使一切动态。

首先,选择要在设计中预览的内容。要做到这一点,点击Elementor界面左下角的齿轮图标。然后,打开预览设置和:

  1. 选择模板的帖子类型(例如网球教练)。
  2. 选择特定的帖子(例如,罗杰费德勒列表)。
设置预览内容

现在,选择一个静态占位符小部件——例如教练的名字。然后,单击动态标签Widget的设置中的选项并选择工具集字段从下拉下来:

添加动态标签

然后,单击扳手图标,并使用钥匙下拉以选择特定的自定义字段 - 例如教练的名字:

选择自定义字段

Elementor现在将动态地填充该小部件,其中包含来自该自定义字段而不是占位符文本的信息。

重复该过程以添加更多信息。这里有一个有用的功能是您还可以在动态信息之前或之后添加文本。

例如,当您添加电话号码时,可以在动态信息之前添加“电话:”:

在动态数据之前添加内容

除了直接在前端显示动态信息,您还可以以不同的方式使用动态信息。

例如,要添加教练的配置文件图片,您需要编辑图像小部件。然后,选择动态标签作为图像源,并选择您使用Toolset创建的profile图像自定义字段:

添加动态映像

然后,Elementor将动态地填充带有该图像的小部件:

动态图像

您还可以动态插入链接。例如,要使按钮窗口小部件自动链接到每个Coach的网站,您可以动态地填充其与网站自定义字段的链接:

添加动态链接

最后,您可能还记得我们使用常规的WordPress编辑器添加了教练的简介。您不需要使用Dynamic Tags来显示该内容。相反,只要加上邮寄内容小部件在您希望它出现的地方。

现在你知道了!你刚刚创建了你的动态模板:

发布圆形小部件

要测试动态功能,您可以预览不同的内容(例如,不同的教练)。模板应该保持完全相同,但所有内容将更新到该教练的信息:

更改动态内容预览

7.发布您的模板

要完成任务,请单击发布按钮以使您的模板直播。然后,您可以使用条件来控制显示模板的位置。

对于此示例,您要显示网球COACH自定义帖子类型中所有帖子的模板:

发布你的模板

然后,单击保存和关闭

从今天开始创建动态的WordPress站点

如果你想充分发挥WordPress作为一个内容管理系统的功能,你需要能够使用动态内容。然而,默认情况下,动态内容超出了大多数WordPress用户的范围,因为它需要直接编辑主题模板文件中的代码。

工具集Elementor Pro,您可以更改它 - 您将能够构建简单或高级的动态站点,而无需查看单行代码。

既然你有知识,你就准备好今天创建了你的第一个动态WordPress网站。

您是否仍然有关于使用Toolset和Elementor构建免费动态WordPress站点的任何疑问?让我们在评论中知道!

科林新人
科林新人
科林新人已经使用WordPress超过了十多年,并且正在寻求在WordPress.org上测试所有58,075个插件。

考虑分享这篇文章,让其他人也能找到它:

在脸书上分享
在twitter上分享
分享LinkedIn.
在reddit分享
分享电报
分享在whatsapp上
分享口袋
分享电子邮件

加入成千上万的人接收真实的,真正的评估WordPress产品和服务每周就像这一点一样。

我们的赞助商
坚实的联盟
内容

留下一个回复

您的电子邮件地址将不会被公布。必需的地方已做标记*

188金宝搏bet官网下载
从介绍WordPress如何对产品和服务的建议工作。
嘿!我们是gaby和mark
每周我们分享教程和真正的评论WordPress的产品和服务时事通讯。
成千上万人们读了它!
我们很乐意加入。
我们很乐意加入。这就是你所处的:

单每周电子邮件直接发送到您的收件箱。