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

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

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

目录 隐藏

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

激活配置文件生成器 

内容模板模式 

创建用户帐户页面 

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

使用 Elementor 创建模板 

创建 JetEngine 列表项 

如何显示用户信息 

配置文件生成器仪表盘 

自定义帐户页面 

检查结果 

重写模板模式 

帐户页面创建 

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

Elementor 模板创建 

JetEngine 列表项创建 

显示用户信息 

用户配置文件生成器仪表盘 

结果检查 

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

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

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

激活配置文件生成器

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

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

内容模板模式

创建用户帐户页面

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

创建帐户页面

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

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

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

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

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

使用表单创建子页面模板
使用 Elementor 创建模板

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

elementor 保存的模板

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

创建一个新模板

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

完成模板自定义后,点击“更新”按钮。

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

包含内容的 elementor 页面模板

创建 JetEngine 列表项

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

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

设置列表项

在模板中填写内容,然后单击“更新”按钮。

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

将项目列为个人资料子页面

如何显示用户信息

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

用户的元框

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

用户元框中的元字段

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

选择中继器字段内的字段

通过单击“新字段选项”按钮,您可以手动向选择字段添加选项。

手动将选项添加到选择字段

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

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

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

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

jetengine 术语表技能列表

创建选项后,我们按下“保存”按钮。

此外,我们还创建了“语言”术语表

语言词汇表

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

使用预制术语表选择字段

此外,我们为复选框字段设置“语言”词汇表。

带有预制词汇表的语言复选框字段

完成自定义后,点击“添加/更新元框”按钮。

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

填写用户元字段

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

如何填写转发器字段

完成后,按“更新个人资料”按钮。

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

编辑用户页面

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

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

导航至“模板”>“已保存模板”选项卡,然后单击“新增模板”按钮。

选择“页面”模板类型,输入名称,然后按“创建模板”按钮。

创建 Elementor 页面模板来显示用户信息

在 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”以设置项目之间的距离。

中继器字段项目样式设置

此外,我们还添加了另一个带有用户组合的内部小部件。要了解有关如何设置的更多信息,请继续阅读如何允许用户使用前端表单添加作品集教程

用户组合与列表网格一起显示

完成模板的自定义并点击“发布/更新”按钮。

配置文件生成器仪表盘

进入JetEngine > Profile Builder选项卡。

将新建的页面设置为账户页面,并选择“内容”模板模式

然后,单击“保存”按钮。

用户个人资料构建器仪表板

要为帐户页面创建子页面,请打开帐户页面选项卡并点击“+新增子页面”按钮。

在新的转发器项中,添加TitleSlug,并将 Elementor 模板或JetEngine列表项设置为Template。 

您还可以从“帐户”页面的菜单中隐藏子页面,并选择允许访问此页面的用户角色。

配置文件构建器子页面创建

根据需要添加任意数量的子页面。完成后,点击“保存”按钮。

个人资料构建器子页面

自定义帐户页面

打开“页面”选项卡,然后单击以在 Elementor 编辑器中编辑“帐户”页面。

拖放配置文件菜单小部件。

个人资料菜单小部件

如您所见,小部件显示了子页面的标题。

确保选择“帐户”内容,然后自定义其他小部件设置。

有关配置文件菜单设置的更多信息,请查看Elementor 的配置文件菜单小部件概述

个人资料菜单小部件设置

自定义配置文件菜单设置后,放置配置文件子页面内容小部件。

7956434

当用户单击相应的个人资料菜单项时,此小部件将显示每个子页面的内容。

个人资料子页面内容小部件设置

点击“更新”按钮。

检查结果

在前端打开帐户页面。

前端的帐户页面

现在,用户可以点击个人资料菜单中的菜单项,个人资料子页面内容会显示相应的子页面内容。

前端的帐户子页面

重写模板模式

帐户页面创建

按照WordPress 仪表盘 > 页面 > 新增路径进行操作。为页面命名并点击“发布”按钮。您可以将该页面留空,因为内容将从模板中显示。

创建帐户页面

使用“重写”模板模式创建帐户页面的子页面

帐户页面将包含个人资料菜单,允许用户单击并打开不同的子页面。 

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

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

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

带有表单的子页面模板
Elementor 模板创建

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

elementor 保存的模板

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

创建一个新模板

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

包含内容的 elementor 页面模板

然后,将配置文件菜单小部件拖放到编辑页面。

7956442

使用“内容” 模板模式,您可以  在个人资料页面上设置个人资料菜单并设置样式。 “重写”模板模式的优点  是您可以 为每个模板设置不同的配置文件菜单小部件 样式。此外,您可以决定根本不将配置文件菜单 添加 到某些模板中。

确保选择“帐户”内容,然后自定义其他小部件设置。

有关配置文件菜单设置的更多信息,请查看Elementor 的配置文件菜单小部件概述

完成后,点击“更新”按钮。

elementor 模板中的配置文件菜单

根据需要为“帐户”页面创建尽可能多的模板,并确保在需要的地方向这些模板添加和自定义“个人资料菜单”小部件。

JetEngine 列表项创建

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

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

设置列表项

使用内容填充模板并添加配置文件菜单 小部件。

确保选择“帐户”内容,然后自定义其他小部件设置。

使用“内容” 模板模式,您可以  在个人资料页面上设置个人资料菜单并设置样式。 “重写”模板模式的优点  是您可以 为每个模板设置不同的配置文件菜单小部件 样式。此外,您可以决定根本不将配置文件菜单 添加 到某些模板中。

完成后,点击“发布/更新”按钮。

列表模板中的个人资料菜单

根据需要为帐户页面创建尽可能多的列表模板,并确保在需要的地方添加和自定义配置文件菜单小部件到这些模板。

显示用户信息

继续阅读本教程的如何显示用户信息一章,了解如何创建模板来显示帐户的用户信息。

创建具有相应内容的模板后,您可以添加配置文件菜单小部件并选择“帐户”上下文

使用“内容” 模板模式,您可以  在个人资料页面上设置个人资料菜单并设置样式。 “重写”模板模式的优点  是您可以 为每个模板设置不同的配置文件菜单小部件 样式。此外,您可以决定根本不将配置文件菜单 添加 到某些模板中。

7956446

完成模板的自定义并点击“发布/更新”按钮。

用户配置文件生成器仪表盘

进入JetEngine > Profile Builder选项卡。

将新建的页面设置为账户页面,并选择“重写”模板模式

使用页面内容选项在“重写”模板模式下可用。如果未设置子页面模板,则启用它以显示帐户页面内容。

然后,单击“保存”按钮。

打开“帐户页面”选项卡为“帐户”页面创建子页面,然后单击“+新增子页面”按钮。

在新的转发器项中,添加TitleSlug,并将 Elementor 模板或JetEngine列表项设置为Template。 

您还可以从“帐户”页面的菜单中隐藏子页面,并选择允许访问此页面的用户角色。

配置文件构建器子页面创建

根据需要添加任意数量的子页面。完成后,点击“保存”按钮。

个人资料构建器子页面

结果检查

在前端打开帐户页面。

对于 模板中包含用户信息的 配置文件菜单小 部件,我们设置“水平”菜单布局

通过单击“发布职位”菜单项,我们进入带有表单的模板。在这里,我们为 配置文件菜单小 部件设置“垂直” 菜单布局 。正如您所看到的,通过“重写” 模板模式,您可以将不同的设置应用于 不同子页面的配置文件菜单 。

就这样。现在您知道如何使用JetEngine配置文件生成器功能的内容或重写模式创建 WordPress 帐户页面了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/703080.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

英语单词量测试

网址&#xff1a;https://preply.com/en/learn/english/test-your-vocab 测试结果&#xff1a; 细节&#xff1a;英语母语者有20000-35000个单词的词汇量&#xff0c;8岁孩子的词汇量在8000个左右。而不是我们教育系统里说的&#xff0c;6000个单词足够用了。足够用&#xff0…

线上剧本杀小程序开发,探索剧本杀行业的巨大发展空间

剧本杀是当下非常流行的桌游&#xff0c;也是一种新型的社交游戏方式&#xff0c;受到了众多玩家的关注&#xff0c;成为年轻人社交游戏的首选方式。目前&#xff0c;剧本杀玩家开始迷上了线上剧本杀&#xff0c;剧本杀也在线上获得了新的发展&#xff0c;让市场发展摆脱了空间…

大数据信用黑名单是如何形成的?有什么影响?

随着大数据技术的发展&#xff0c;一种新型的信用风险评估工具应运而生——大数据信用报告。而大数据信用黑名单由大数据算法自动生成&#xff0c;旨在识别和监控特定个体或群体的信用风险。大数据信用黑名单是如何形成的?有什么影响呢?本文带大家一起去认识一下&#xff0c;…

Colab/PyTorch - 004 Torchvision Semantic Segmentation

Colab/PyTorch - 004 Torchvision Semantic Segmentation 1. 源由2. 语义分割 - 应用2.1 自动驾驶2.2 面部分割2.3 室内物体分割2.4 地理遥感 3. 语义分割 - torchvision3.1 FCN 使用 ResNet-101 语义分割3.1.1 加载模型3.1.2 加载图像3.1.3 预处理图像3.1.4 网络的前向传播3.1…

谷歌 I/O 2024大会全面硬钢OpenAI;腾讯宣布旗下的混元文生图大模型;阿里巴巴技术下的AI自动视频剪辑工具

✨ 1: 谷歌 I/O 2024 谷歌 I/O 2024 发布了众多新技术&#xff0c;包括 Gemini AI、大语言模型和通用 AI 智能体等&#xff0c;全面颠覆搜索体验。 谷歌 I/O 2024发布会带来许多令人兴奋的新功能和技术创新&#xff1a; Gemini 1.5 Pro&#xff1a;一个极其强大的语言模型&am…

python循环结构练习

目录 前言 1、使用while实现模拟用户登录 1.1 题目要求 1.2 解题 2、输入数字&#xff0c;生成对应等腰三角形 2.1 题目要求 2.2 解题 3、输入数字&#xff0c;生成对应的菱形 3.1 题目要求 3.2 解题 总结 前言 本系列主要是讲解python中的题目&#xff0c;目的是为…

短视频赛道有哪些:成都鼎茂宏升文化传媒公司

短视频赛道有哪些&#xff1a;探索多元化的内容领域 随着科技的飞速发展和人们生活节奏的加快&#xff0c;短视频已成为现代人生活中不可或缺的一部分。它以其简短、直观、易于分享的特点&#xff0c;迅速占领了各个年龄层和社会群体的心智。然而&#xff0c;短视频的赛道并非…

项目管理表格-项目总体计划(项目管理-项目经理干货资料Excel)

项目管理总体计划模板 1、项目基本信息 2、项目里程碑 3、项目干系人 4、项目团队组织架构管理 5、项目预算管理 6、项目项目任务计划管理 7、问题及风险管理 8、项目周报 9、项目相关要求 软件项目相关全套精华资料包获取方式①&#xff1a;点我获取 获取方式②&#xff1a;本…

打造数字基座:一场重塑未来教育的浩瀚远征

近两年,随着大模型的崛起,ChatGPT、Sora等应用的爆火,以人工智能为代表的新技术正快速地改变着全球经济和社会发展的节奏。教育作为人才培养的重要途径,在推动新质生产力发展的同时也必须实现自身的创新蜕变。 国家教育数字化战略行动已经来到了第三个年头。在科技革命和教育变…

爱吃香蕉的珂珂

题目链接 爱吃香蕉的珂珂 题目描述 注意点 piles.length < h < 10^9如果某堆香蕉少于k根&#xff0c;将吃掉这堆的所有香蕉&#xff0c;然后这一小时内不会再吃更多的香蕉返回可以在 h 小时内吃掉所有香蕉的最小速度 k&#xff08;k 为整数&#xff09; 解答思路 二…

如何改照片大小到20k?怎么把照片调节成20k?

在提交证件照信息的时候&#xff0c;最常遇到的就是需要压缩图片大小&#xff0c;平时我们拍摄的图片体积都比较大&#xff0c;但是大多平台要求的证件照片大小一般在20k左右&#xff0c;为了能顺利上传&#xff0c;我们需要先通过专业的图片压缩指定大小功能去将照片大小压缩&…

tomcat--目录结构和文件组成

目录结构 目录说明bin服务启动&#xff0c;停止等相关程序和文件conf配置文件lib库目录logs日志记录webapps应用程序&#xff0c;应用部署目录workjsp编译后的结果文件&#xff0c;建议提前预热访问 /usr/local/apache-tomcat-8.5.100/work/Catalina/localhost/ROOT/org/apac…