会员网站如何创建具有不同仪表盘结构的用户帐户页面

用户帐户页面是中央用户仪表盘，用户可以在其中添加和编辑信息、发布和编辑帖子以及保存收藏夹项目。本教程介绍如何使用"内容"和"重写"模板模式 设置帐户页面、为帐户页面创建子页面以及设置个人资料菜单等。

在本教程中，我们将介绍如何使用招聘网站的示例来创建帐户页面。

目录隐藏

内容模式和重写模板模式有什么区别？

激活配置文件生成器

内容模板模式

创建用户帐户页面

使用"内容"模板模式创建帐户页面的子页面使用表单创建子页面模板

使用"重写"模板模式创建帐户页面的子页面带有表单的子页面模板

内容模式和重写模板模式有什么区别？

使用"内容"模板模式 ，您需要在帐户页面上设置一次配置文件菜单 小部件。配置文件菜单 显示使用配置文件生成器为帐户页面设置的子页面模板的标题。当用户单击相应的菜单项时，内容将通过**"个人资料子页面内容"**小部件动态显示。

使用"重写"模板模式 ，页面将使用模板中的内容重写。如果要添加菜单，则需要将配置文件菜单小部件 放置在模板中。您可以以不同的方式自定义模板：您可以将配置文件菜单 放置在不同模板上的不同位置，并且您可以决定不将配置文件菜单添加到某些模板。

激活配置文件生成器

在开始之前，请转到WordPress 仪表盘 > JetEngine > JetEngine 选项卡，在默认模块 部分中启用配置文件生成器 切换，然后单击**"保存"**按钮。等待页面重新加载。

内容模板模式

创建用户帐户页面

按照WordPress 仪表盘 > 页面 > 新增 路径进行操作。为页面命名并点击**"发布"**按钮。现在，将该页面留空。

使用"内容"模板模式创建帐户页面的子页面

帐户页面将包含 个人资料菜单，允许用户单击并访问各个子页面。

子页面模板可以包含以下内容：

显示用户信息；
显示"更新用户帐户"表单；
显示**"创建帖子"和"编辑帖子"表单**；
显示用户最喜欢的项目。要了解更多信息，请阅读如何使用数据存储模块创建收藏夹页面 教程；
显示用户最近的评论；
显示用户预订的项目。

您可以使用 Elementor 或JetEngine 列表项创建子页面模板。

使用表单创建子页面模板

使用 Elementor 创建模板

如果您决定使用 Elementor 创建模板，请移至WordPress 仪表盘上 Elementor 选项卡下的模板选项卡。

按**"新增"** 按钮。选择"页面"模板类型 并输入名称。然后，点击**"创建模板"**按钮。

在 Elementor 编辑器中，使用所需内容填充模板。例如，我使用JetForm 小部件放置了 JetFormBuilder表单。

完成模板自定义后，点击**"更新"**按钮。

根据需要创建任意数量的模板。

创建 JetEngine 列表项

如果您决定创建JetEngine 列表项，请转至JetEngine > Listings 选项 卡，然后按**"新增项"**按钮。

在**"设置列表项"** 弹出窗口中，选择"用户"列表源 ，输入列表项名称 ，选择"Elementor"列表视图 ，然后单击**"创建列表项"**按钮。

在模板中填写内容，然后单击**"更新"**按钮。

根据需要创建任意数量的项目。

如何显示用户信息

首先，为用户创建Meta Box 。更详细的信息可以在如何将元框应用于用户教程中找到。

另外，添加一些自定义元字段，例如，用户昵称、名字和姓氏、电子邮件、手机（文本字段）、用户头像（媒体字段）、生日（日期字段）、专业摘要（所见即所得字段）、经验（数字字段），语言（复选框字段）。

为了显示用户的专业技能，我们创建了一个具有"Repeater"字段类型 和"Skills"标签的 元字段。然后，我们点击**"New Repeater Field"** 按钮在 Repeater 字段内创建一个新字段，输入 Label ，然后选择"Select" Type。

通过单击**"新字段选项"**按钮，您可以手动向选择字段添加选项。

此外，您还可以从术语表切换中启用"获取"选项 ，并从下拉菜单中选择所需的术语表。

如果您手动创建选项，则可以在当前的"选择"字段中使用它们一次。词汇表功能允许您创建带有标签和值的项目列表，并根据需要多次使用它。

要创建术语表，请遵循JetEngine > JetEngine > 术语表 路径。从术语表概述了解有关术语表设置的更多信息。

我们点击**"+新词汇表"** 按钮，输入名称，选择"手动设置项目"数据源，然后通过单击 **"新字段"**按钮设置所需的选项。

创建选项后，我们按下**"保存"**按钮。

此外，我们还创建了"语言"术语表。

返回到用户元框并为选择字段设置创建的词汇表。

此外，我们为复选框字段设置"语言"词汇表。

完成自定义后，点击**"添加/更新元框"**按钮。

要检查元字段的显示位置，请前往***"用户">"个人资料"***。您可以在可以填写的 WordPress 用户配置文件字段下看到自定义元字段。

要设置中继器字段，请点击**"+ 添加项目"**按钮，然后从下拉列表中选择所需的选项。重复此步骤以添加所需数量的选项。

完成后，按**"更新个人资料"**按钮。

在**"个人资料"** 选项卡中，您可以自己填写自定义字段。要填写其他用户的自定义元字段，请转到***"用户">"所有用户"***选项卡，然后单击以编辑所需的用户之一。

现在，让我们创建一个包含用户信息的子页面。您可以使用 Elementor 或 JetEngine 列出项目创建模板；创建过程如上所述。

目前，我们将通过 Elementor Theme Builder 创建子页面模板。

导航至***"模板">"已保存模板"*** 选项卡，然后单击**"新增模板"**按钮。

选择"页面"模板类型，输入名称，然后按**"创建模板"**按钮。

在 Elementor 编辑器中，我们在页面上添加了两列，并将动态图像 小部件插入到第一列中。作为源，我们从用户Meta Box中选择了元字段。

在动态图像 下，我们添加了三个带有"元数据"源的 动态字段 小部件。它们显示用户元框元字段中用户的名字和姓氏以及工作职位。

让我们添加带有"常规"文本的标题小部件，以突出显示一般用户信息。

在标题小 部件下，我们添加了两个带有"元数据"源的 动态字段 小部件。它们从用户Meta Box 的元字段中显示用户的经验和薪水。

我们为两个小部件启用了自定义字段输出 切换，并在动态值之前添加了自定义文本（例如，"薪水：€%s"，其中**%s**代表从自定义元字段中提取的值）。

我们添加了另一个带有"语言"文本的标题小部件。

在此之下，我们将动态字段 小部件与"元数据"源拖放到一起。它显示用户元框的 复选框元字段中的值，并显示用户知道多少种语言。

此外，我们启用了过滤字段输出 选项并选择了"复选框字段值"回调。

我们打开内部部分 中列的样式设置选项卡，并将"经典"背景设置为白色以突出显示该列。

现在，让我们自定义第二列。我们拖放带有 "专业摘要"文本的标题小部件和带有显示用户描述的"元数据"源的动态 字段小部件。

此外，我们在**"内部"部分** 的"样式"设置 选项卡中将"经典" 背景设置为白色。

然后，我们添加了带有"技能"文本的标题。为了显示中继器字段中的值，我们添加了动态中继器小部件。

我们选择所需的 Repeater 元字段作为Source 。在项目格式文本区域中，我们将 <span>%name%</span> 宏中的"name"替换为 Repeater 字段的名称。在我们的例子中，它是<span>%user-skill%</span>。

然后，我们打开小部件的样式设置选项卡。在**"项目"选项** 卡中，我们将文本颜色设置为黑色，将 背景颜色设置 为浅灰色。我们将边框半径 设置为："10" Top 、"10" Right 、"10" Bottom 和"10" Left ，以圆化项目外边框边缘的角。然后，我们将Padding 设置为："4" Top 、"10" Right 、"4" Bottom 和"10" Left 以设置项目周围的空间大小。最后，我们将Margin 设置为"10"右以设置项目之间的距离。