自定义WHMCS以获得无缝的用户体验

这是定制WHMCS以实现无缝用户体验的四部分系列中的第一部。

在今天的博客文章中，我们将介绍客户区主题，并引导您完成创建自定义主题的过程。

甚至在为WHMCS编写第一个代码之前，我们就知道可扩展性和可定制性是成功的业务平台（如WHMCS）的重要组成部分。

我们为世界各地的企业提供服务，每个企业都有自己的要求和愿望，这些要求中最重要的是能够降低客户在注册和管理产品和服务时所体验的外观和感觉。

出于这个原因，让客户面向我们产品的区域可访问，完全模板化和易于定制一直是我们的首要任务。

WHMCS客户区域基于简单易用的模板设置。

典型页面包含3个模板文件 - 页眉，页脚和中间的正文内容。

页眉和页脚模板文件对于每个页面都是通用的，并且充当主体内容的包装器。这样，只需编辑这两个模板文件，即可轻松自定义WHMCS的整体外观。


自定义页眉和页脚是一个很好的起点，可以为您的网站访问者在您的前端内容和WHMCS结算门户之间移动时创建无缝的浏览体验。

这是我们的分步指南：

1.首先找到适合用作模板基础的网站页面。理想情况下，这应该是包含页眉和页脚的页面，以及WHMCS正文内容所在的空内容区域。
2.打开该文件，并使用绝对URL引用更新资产和资源的任何相对链接。例如，如果页面包含样式表包含路径，例如“css / styles.css”，请将其更新为“https://example.com/css/styles.css”3 
。创建一个新目录来容纳新主题。它应该在WHMCS根目录内的“templates”目录中创建。您提供的名称应该是唯一的，仅包含字母和数字，并且全部为小写。例如〜/ templates / mycustomtheme / 
4.将最新默认主题模板文件的副本导入新的自定义模板目录。在撰写本文时，这是“六个”主题。这些文件的最新版本始终可以在我们的Github页面上找到，网址为https://github.com/WHMCS/templates-six，或者只是从WHMCS附带的〜/ templates / six /目录中复制。

！我们建议在可能的情况下从Github克隆此repo以便于维护。有关详细信息，请参阅我们之前的博文。！

5.接下来，打开基页并将所有内容从文件顶部复制到内容输出应该开始的位置。回头参考上面的图片，header.tpl只包含模板的顶部 - 它不包含任何单独的页面内容。换句话说，我们需要将HTML代码复制到内容容器刚刚开始的位置 - 我们希望内容容器打开，但我们不希望header.tpl文件中有任何实际内容。
6.现在将该内容粘贴到header.tpl模板文件中。

标头模板文件中有许多重要的包含和输出，必须保留这些包含和输出才能正常运行并与插件和扩展兼容。其中许多都包含在header.tpl模板文件的前几行中，如下图所示。


这是所需元素的完整列表。括号中包含的行号对于V7.5.x和7.6.x是正确的：

i。元字符集（第4行） - 多语言正常运行所必需的。
II。页面标题（第7行） - 根据WHMCS客户区域内正在呈现/审阅的页面动态设置。
III。头包括（第9行） - 这个包含文件包括许多javascript和css库，以及定义WHMCS正常运行所需的javascript变量。
IV。头输出（第11行） - 由模块和插件用于输出页面部分所需的内容。这应该包含在结束标记之前。
v。电话号码输入样式（第14行） - 由WHMCS用于确定如何在客户区
vi 内呈现电话号码输入。标题输出（第16行） - 由模块和插件用于输出页面正文中所需的内容。
七。导航菜单（第102-131行） - 链接和导航选项由WHMCS中的菜单系统动态生成。这允许模块和插件动态地与客户区的这些区域交互和操作。确保为用户导航呈现$ primaryNavbar和$ secondaryNavbar菜单项非常重要。可以通过编辑〜/ includes / navbar.tpl模板文件来自定义这些菜单项的输出。
八。侧栏菜单（第228行+ footer.tpl第5行） - 类似于导航菜单，侧栏菜单由WHMCS中的菜单系统动态生成。这允许模块和插件与他们自己的附加侧边栏内容元素进行交互，操作和定义。确保同时呈现$ primarySidebar和$ secondarySidebar菜单项非常重要。可以通过编辑〜/ includes / sidebar.tpl模板文件来自定义这些菜单项的输出。

还有许多其他可选元素，您可能需要考虑保留或合并到自定义设计中以保留完整功能：

i。语言选择器下拉列表（第21-37行） 
ii。帐户通知弹出窗口（第40-60行） 
iii。查看购物车按钮（第77-79行） 
iv。电子邮件验证包括标题（第215行） 

7。接下来，再次返回基页，这次将所有内容从内容输出容器的末尾复制到页面末尾。
8.现在将该内容粘贴到footer.tpl模板文件中。默认WHMCS页脚模板中有许多重要元素，必须保留这些元素才能正常运行。它们包括：

i。模态（第20-46行） - 由客户区
ii的各种功能使用的引导模式容器。页脚输出（第48行） - 由模块和插件用于在页面页脚中输出所需内容。这应该包含在结束标记之前。

9.将更改保存到两个模板文件中，如果处理文件的本地副本，则上载到WHMCS安装。

WHMCS使用流行的Bootstrap前端Web框架构建。今天的许多网站设计都是使用引导框架构建的，这使得将这些设计集成到WHMCS中变得简单方便。

我们故意尽可能少地对默认的Bootstrap样式进行自定义，以便我们为自定义和集成提供中立的起点，同时也确保如果您的站点是使用bootstrap构建的，那么您所做的任何自定义都会在WHMCS客户区没有任何额外的工作。

如果您需要更改任何默认样式或覆盖WHMCS中使用的任何样式，我们强烈建议您在提供的〜/ css / custom.css中添加自定义CSS样式 文件，因为它提供了一种简单的方法来维护任何自定义CSS样式，并将简化在将来升级中维护这些自定义的过程。 

在处理新模板时，在向现实世界的访问者开放之前预览它的能力通常很有用。

好消息是WHMCS有一个内置的方法来做到这一点。

要预览新模板，只需导航到https://www.yourdomain.com/path/to/whmcs/?systpl=yourtemplatenamehere 

这将设置新模板，用于当前浏览器会话的持续时间，而不会影响其他访问您网站的访问者。

一旦您对您的模板很好并且一切正常并按照您的预期显示感到高兴，就可以实时制作新模板了。

要执行此操作，请登录WHMCS管理区域并导航到“设置”>“常规设置”，然后在“模板”下，选择刚刚创建的新模板的名称。然后点击“保存更改”以使更改生效。

请记住，如果您使用上面的预览选项，则会持续浏览器会话的持续时间，因此请务必重新启动浏览器以验证WHMCS客户端区域的访问者将看到哪些内容。

这只是您在WHMCS中使用强大的模板系统可以做的事情的开始。

有关更多指南和信息，请访问我们的主题开发人员文档，网址 为https://developers.whmcs.com/themes/