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

会员制

5 月 7, 2024

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

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

目录隐藏

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

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

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

激活配置文件生成器

在开始之前，请转到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”右以设置项目之间的距离。