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

news2024/9/21 18:39:31

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

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

目录 隐藏

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

激活配置文件生成器 

内容模板模式 

创建用户帐户页面 

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

使用 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.coloradmin.cn/o/1678976.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Netty的组件和设计

目录 Channel、EventLoop和ChannelFuture Channel接口 EventLoop接口 ChannelFuture接口 ChannelHandler和ChannelPipeline ChannelHandler接口 ChannelPipeline接口 更加深入地了解ChannelHandler 编码器和解码器 抽象类SimpleChannelInboundHandler 引导 从高层次…

vue网页端控制台展示独有标记

效果展示 实现步骤 1. 新建js文件 定义一个类 用于提供控制台打印日志显示样式的方法 src\libs\util.log.js class Logger {// 定义静态方法static typeColor(type "default") {let color "";switch (type) {case "default":color "#3…

Lambda 表达式详解

LAMBDA ⚪ λ 希腊字母表中排序第十一位的字母, 英语名称为Lambda ⚪ 避免匿名内部类定义过多 ⚪ 其实质属于函数式编程的概念 ⚪ 也可称为闭包 ⚪ Lambda允许把一个函数作为方法的参数&#xff08;函数作为参数传递进方法中&#xff09;。 Lambda是在jdk8之后出现的所以现…

Xed编辑器开发第一期:使用Rust从0到1写一个文本编辑器

这是一个使用Rust实现的轻量化文本编辑器。学过Rust的都知道&#xff0c;Rust 从入门到实践中间还隔着好几个Go语言的难度&#xff0c;因此&#xff0c;如果你也正在学习Rust,那么恭喜你&#xff0c;这个项目被你捡到了。本项目内容较多&#xff0c;大概会分三期左右陆续发布&a…

WebLogic SSL应用

SSL 安全套接字层(SSL)是通过在客户端和Web服务器端之间进行身份验证,并对双方交换的数据进行加密,从而提供安全连接。 验证类型: 单向:客户端验证Web服务器端证书 双向:客户端验证Web服务器证书, Web服务器验证客户端证书 Weblogic Server12c 支持 SSL 3.0 和 TLS1.0 …

HCIP【Hybird实验】

目录 一、实验拓扑图&#xff1a; 二、实验要求&#xff1a; 三、实验思路&#xff1a; 四、实验过程&#xff1a; 1、配置PC的IP地址&#xff08;不用配置网关&#xff0c;这个拓扑图没有使用到三层设备&#xff09; 2、交换机配置 3、PC间进行测试&#xff1a; 一、实…

如何设计实用的ITSM自助服务台

在现代IT服务管理&#xff08;ITSM&#xff09;领域中&#xff0c;自助服务台已成为IT运维环境的核心组件。它作为企业内部信息中心与其他部门用户之间的桥梁&#xff0c;一个以用户为中心的平台&#xff0c;更注重用户的自主性和自助能力&#xff0c;使用户能够直接访问所需的…

ModuleNotFoundError: No module named ‘openpyxl‘的解决方案

问题描述&#xff1a; ModuleNotFoundError: No module named ‘openpyxl’ 这个错误表示你的 Python 环境中没有安装 openpyxl 这个模块。openpyxl 是一个用于读写 Excel 2010 xlsx/xlsm/xltx/xltm 文件的 Python 库。 解决方案&#xff1a; 要解决这个问题&#xff0c;你需…

第十四届蓝桥杯大赛软件赛国赛C/C++ 大学 B 组 抓娃娃

//前缀和 #include<bits/stdc.h> using namespace std; #define int long long const int n1e611; int a,b,c,d[n],l,r; signed main() {ios::sync_with_stdio(false);cin.tie(0),cout.tie(0);cin>>a>>b;map<int,int>t;for(int i1;i<a;i){cin>…

PCIe协议之-TLP Header详解(二)

✨前言&#xff1a; 在PCIe中&#xff0c;存在几种不同类型的请求&#xff0c;主要包括IO(Request)请求、存储器(Request)请求和配置(Request)请求。这些请求类型允许CPU与连接在PCIe总线上的设备进行通信和控制。 &#x1f31f;1. IO(Request)请求 定义与作用: IO请求&…

武汉星起航深耕亚马逊跨境领域,助全球卖家实现国际销售新突破

随着全球贸易的日益繁荣和互联网的快速发展&#xff0c;跨境电商行业迎来了前所未有的发展机遇。作为全球领先的电商平台&#xff0c;亚马逊以其丰富的商品品类、全球配送网络以及高效的物流体系&#xff0c;成为了众多卖家拓展国际市场的重要渠道。在这一背景下&#xff0c;武…

邦注科技 即热式节能模温机的原理及应用介绍

模温机是一种用于控制模具温度的设备&#xff0c;它在各种工业领域中发挥着重要作用&#xff0c;特别是在塑料加工行业中。以下是关于模温机的原理及应用的详细介绍&#xff1a; 原理 模温机的工作原理主要是通过加热和冷却功能&#xff0c;维持模具温度在一个恒定的范围内。…

银河麒麟操作系统下使用QT连接TiDB数据库开发步骤

目标:实现项目软件+硬件都运行在国产化操作系统平台上。 方法:在虚拟机中安装麒麟系统V10Sp1+Qt5.14.2+MySql8.0+TiDB软件,编译MySql驱动,测试连接TiDB数据库项目。 步骤: 1、使用虚拟机软件VMWare安装银河麒麟操作系统。 2、在银河麒麟系统上安装QT5.14.2软件。 3、…

WS2812C是一款将控制电路和RGB芯片集成在一个5050元器件封装中的智能控制LED光源

一般说明 WS2812C是一款将控制电路和RGB芯片集成在一个5050元器件封装中的智能控制LED光源。内部包括智能数字端口数据锁存器和信号整形放大驱动电路。还包括一个精密的内部振荡器和一个 12V电压可编程恒流控制部分&#xff0c;有效保证像素点光源颜色高度一致。 …

渲染农场是什么意思?瑞云渲染为你解答

渲染农场是一种通过集合多台计算机的计算能力来加速图像渲染过程的系统。它尤其适用于动画、电影特效和高端视觉效果的制作&#xff0c;这些领域通常需要处理非常复杂和计算密集型的渲染任务。 渲染农场就是一大群电脑&#xff0c;他们一起可以快速渲染出漂亮的图像。在做动画片…

Java05基础 数组

Java05数组 一、数组 数组指的是一种容器&#xff0c;可以用来存储同种数据类型的多个值。 1、数组的静态初始化 初始化&#xff1a;就是在内存中&#xff0c;为数组容器开辟空间&#xff0c;并将数据存入容器中的过程 1.1 数组定义格式 //格式一 数据类型[] 数组名 …

2024最新互联网公司工作时长排行榜出炉!

“工作时长”&#xff0c;是选择公司的一个非常重要的参考指标。 我们在选择一个公司的时候&#xff0c;除了需要关注总收入package 以外&#xff0c;还需要考虑这家公司的加班时长是否人性化。 我们的工作时长是周工作小时数。法定工作时间是40小时(955)。大小周通常折算为周…

高质量新闻数据集OpenNewsArchive:880万篇主流新闻报道,国产大模型开源数据又添猛料

在构建国产大语言模型的道路上&#xff0c;高质量新闻是不可或缺的重要语料之一。这类语料集准确性、逻辑性、时效性于一体&#xff0c;同时包含丰富的事实知识&#xff0c;可以大幅提升模型的文本生成质量、词汇表达能力、事件理解分析能力以及时序内容的适应性和预测能力&…

UE4_环境_局部雾化效果

学习笔记&#xff0c;不喜勿喷&#xff01;侵权立删&#xff01;祝愿大家生活越来越好&#xff01; 本文重点介绍下材质节点SphereMask节点在体积雾中的使用方法。 一、球体遮罩SphereMask材质节点介绍&#xff1a; 球体蒙版&#xff08;SphereMask&#xff09; 表达式根据距…

云端储存的笔记软件, 效率翻倍的办公小助手

在繁忙的办公环境中&#xff0c;文件堆积如山&#xff0c;电脑屏幕上贴满了各色便签&#xff0c;电话铃声、邮件提示声此起彼伏。你努力地在这些混乱中寻找一丝头绪&#xff0c;试图把握住工作的节奏。 然而&#xff0c;传统的方法似乎已经无法满足现代高效工作的需求。想象一…