用WordPress建立客户门户

作者: John Stephens
创建日期: 22 一月 2021
更新日期: 19 可能 2024
Anonim
搭建B2B独立网站, 获得全球客户询盘, 零基础2小时用WordPress完成网站, 无需代码知识
视频: 搭建B2B独立网站, 获得全球客户询盘, 零基础2小时用WordPress完成网站, 无需代码知识

内容

从电话合同到公用事业,消费者都希望有一个允许用户登录和下载或查看文档的区域。

但是,当设计师与客户一起工作时,所有内容都会迅速分解为混乱的电子邮件,指向模型和附件的链接。

该WordPress教程将展示如何将WordPress(其他网络托管服务可用)扩展到能够存储文档,视频和图形的客户端门户中,以便客户端可以在一处访问它们。该门户网站将为每个客户提供唯一且受密码保护的链接,该链接不会出现在常规导航中。

自定义帖子类型和字段将用于存储数据,并且将通过插件添加这些自定义帖子类型和字段,以避免在主题更改时丢失数据。主题将稍作修改。

拥有客户门户使客户可以在需要时随时随地方便地访问他们的文件,就像使用云存储时一样。它具有一系列业务优势,包括显示可用的追加销售,或者可以通过直观地概述可交付成果来从一开始就对工作流程进行概述。


下载文件 对于本教程。

  • 如何将WordPress转变为视觉生成器

01.安装WordPress的新副本

开发服务器上已安装了WordPress的新副本,并且选择了“ understrap”主题作为样板,以便快速开始工作。将使用“自定义帖子类型” UI插件,因此我们的自定义帖子类型与主题无关。

02.删除默认插件

如果WordPress副本随附任何默认插件,请删除这些插件。本教程所需的插件是“高级自定义字段”和“自定义帖子类型UI”。还安装了“经典编辑器”。

03.添加自定义帖子类型

使用“自定义帖子类型” UI界面,添加一个称为“客户”的新帖子类型。输入“ Post type slug”时,请使用下划线而不是空格,并以单数形式书写,因为这将使以后创建模板更加容易。已添加前缀tu_以减少发生冲突的机会。


04.添加/编辑自定义帖子类型界面

添加标有“客户”和单数“客户”的复数形式,因为这将出现在WordPress管理菜单中。这些字段接受大写字母,这将使WordPress菜单更加整洁。

05.创建一个自定义重写段

在帖子类型slug中使用前缀将意味着将使用类似于“ / tu_customer / example-company”的链接来创建添加到门户的客户。这看起来并不整洁,并且使用自定义重写代码来改善这一点。将重写标记设置为“ customers”可以使自定义帖子类型显示为/ customers / example-company。

06.添加对自定义字段的支持


为自定义帖子类型启用的最后一个选项是“支持>自定义字段”,位于页面底部附近。勾选此项,然后在页面底部“添加帖子类型”。这将提交更改并注册帖子类型。

07.添加自定义字段

现在需要添加自定义字段,并将其分配给刚创建的帖子类型。第一步是添加名为“客户门户”的字段组,然后使用“添加字段”按钮向其中添加自定义字段。第一个字段“简短”将设置为字段类型“文件”,从而允许管理员在此位置上载文件。将返回值设置为“文件url”。

08.设置字段

下一个要添加的字段是“品牌问卷”。这将包含指向客户应填写的Google表单的链接。最合适的字段类型是“ URL”。可以将相同的方法用于将链接到外部服务的所有字段。完成后,向下滚动到“位置”框,并使用逻辑“显示帖子类型” =“客户”。然后发布字段组。

09.创建WordPress模板文件

WordPress需要知道如何显示客户仪表板。为此,将遵循WordPress模板层次结构来为此特定帖子类型创建模板文件。在根主题目录中创建一个名为single-tu_customer.php的文件。

10.创建全角单个帖子布局

打开single-tu_customer.php文件,并添加get_header和get_footer WordPress函数。在这些功能之间,创建一个全角布局以容纳与您的主题配合使用的内容。

?php get_header();?> div id =“ single-wrapper”> div id =“ content” tabindex =“-1”> div> div id =“ primary”> main id =“ main”>-!内容-> / main> / div> / div>!-.row-> / div>!-#content-> / div>!-#single-wrapper->?php get_footer() ;?>

11.启动循环并创建内容

在main>元素内,调用the_post并创建容器元素来保存信息。使用占位符信息以了解布局,并开始对元素进行样式设置。卡元素将是带有标题,描述和链接的引导卡。

main id =“ main”>?php while(have_posts()):the_post(); ?> var13-> div> div> div> div> Content / div> div> Content / div> div> Content / div> / div> / div>? //循环结束。 ?> var13-> / main>!-#main->

12.使用PHP调用动态值

使用功能“ the_field”(高级自定义字段插件随附的函数),将自定义字段中的动态内容输入到客户模板中。 “ field_name”是在第3步中输入的值。

div> div> h5> Brief / h5> p>这是您的原始简要文档/ p> a href =“?php the_field('brief');?> var13->” target =“ none”>打开/一个> / div> / div>

13.使用一些虚拟数据让测试客户

访问WordPress仪表板,可以从左侧栏中添加新客户。客户>添加新客户。帖子视图将很熟悉,但是向下滚动将显示所有新的自定义字段。输入一些测试数据以确保一切正常。

14.处理任何丢失的数据的错误

如果忘记了某个文档,或者只是太早才可以使用该文档,那么当按钮不起作用时,可能会使客户感到困惑。在显示值之前添加一个检查值是否存在的机会,可以显示卡的“缺失字段”变化。当缺少该值时,在卡中添加“禁用”类将使我们可以对不可用的卡进行样式设置。

?php if(get_field('field_name')):?> var13->在field_name具有值时显示?php else:// field_name返回false?> var13->在该字段不存在时显示?php endif ; // if field_name逻辑的末尾?> var13->

15.整理界面

现在,接口的结构已完成,可以正确设置样式。使用CSS,可以改善页面上卡片的外观和颜色。导航的颜色已更改为浅蓝色,并且通过添加介绍文本改善了用户方向。

16.将其从站点地图中排除

自定义帖子类型不应在搜索引擎结果中找到。您需要通过SEO插件或使用meta标签和robots.txt手动将帖子类型从网站的站点地图中排除。

meta name =“ robots” content =“ noindex,nofollow” />用户代理: *不允许:/ customers /

想设计一个新网站吗?使用出色的网站构建器来简化流程。

有趣的文章
您希望了解有关设计行业的10件事
阅读更多

您希望了解有关设计行业的10件事

当大多数人第一次获得设计工作时,他们充满了兴奋,期待和乐观。经过几年的工作,许多最初的天真热情已经荡然无存了–其中许多归结于现实世界的严酷现实。虽然您可能是因为自己是一位出色的制图员而成为设计师,或者想改善视觉传达的世界,但事实是,并不是所有的人都能画出漂亮的图画或编写令人赞叹的HTML5示例。考虑到所有这些,我们汇总了我们希望从一开始就从事设计行业的十大事情。如果您认识任何刚开始设计的人,那么您...
Adobe Illustrator的6种绝佳替代品
阅读更多

Adobe Illustrator的6种绝佳替代品

Adobe Illu trator CC是一款出色的矢量编辑工具,非常适合打印工作,网络模型和徽标设计。但是它也很昂贵,并且对于新手用户来说学习曲线陡峭。那么Illu trator的替代品是什么?使用我们的免费电子书赢得客户并更聪明地工作:立即获取!自从Adobe收购Macromedia并从Freehand退休后,您可能会认为矢量编辑的选项仅限于Creative Cloud –但实际上,每个平台(...
创建令人惊叹的投资组合网站的10个技巧
阅读更多

创建令人惊叹的投资组合网站的10个技巧

投资组合网站提供了一种炫耀您的工作,与客户建立联系并带来新业务的方法。但是,许多创作者没有网站设计或网站优化的背景。使用网站构建器可以帮助您创建出类拔萃的投资组合网站。但是即使如此,重要的是要知道哪些元素可以最好地展示您的作品。如果您想使用模板,请查看我们的最佳投资组合模板指南。在本指南中,我们将介绍10个技巧,您可以使用这些技巧来构建令人惊叹的投资组合网站。虽然您的整个投资组合网站都需要一流的质...