Chinese (Simplified) (中文(简体)) translation by Niau Wu (you can also view the original English article)
在本系列的第一篇文章中 ,我们探讨了 OpenCart 的基本主题结构。现在,让我们进一步学习如何创建自定义主题。如果您还没有看过本系列教程的第一部分,请仔细阅读之,以便您了解本文要做什么,我们将要继续建立自己的主题。
OpenCart 内建还不错的默认主题,将用来当作自定义主题的基础。一般来说,要创建自定义主题,有两种情况:
- 想要用所选择的新界面完全取代预设的前端界面,
- 想改变一些东西如颜色组合、布局结构和品牌相关的变化。
在这两种情况下,我建议创建一个新的自定义主题,而不是直接修改默认的主题文件,因为在更新 OpenCart 的版本过程中会比较容易。
在开始之前,您应该有安装了 OpenCart。如果还没有安装,去安装并设置好。
一旦安装好了,就让我们开始吧!
建立骨架
在 catalog/view/theme
底下创建一个新的目录,命名为 mycustomtheme
。用来装其他文件,如图片(iamge),样式表单(stylesheet)和模板(template)。接下来,需要在 mycustomtheme
目录下创建三个目录:image
、stylesheet
和 templates
。

一旦完成了,就表示已经设定好需要的自定义主题基本骨架结构。事实上,可以继续前进了,从后端实现自定义主题,其会运作的相当好。
启动(Active)新主题
接下来,从后端启动自定义主题。登录后端,进入System(系统)>Settings(设置)。 会列出所有 OpenCart 安装存储可用的商店(store) 。

在大多数情况下,会显示一个商店入口,但如果有多个存储设置,会看到不只一行。OpenCart 一次安装就可以设置多个商店。
这确实是一个重要的功能,如果有多个商店,当然不希望每个商店都要安装一个 OpenCart。可以使用单一界面管理所有商店!成立多个商店超出了本教程的范围,但其为值得探索的重要功能。
回到我们的商店,点击 Action(动作)字段的 Edit(编辑)链接,应该会开启商店的配置界面。

点击 Store(商店){/标签。这将打开配置窗体,使我们能够选择一个前端的主题。应该会看到,我们的自定义主题, mycustomtheme
,列在 default
主题的 Template(模板)下拉框中。选择并点击 Save(保存)按钮来套用变更。

现在,如果检查前端,可以发现一切正常运作。我们连一个自定义主题的文件都还没有创建,但是 - 怎么会运作呢?这就是模板复写(overriding)的强大之处。
了解模板复写的魔术
即使我们已经建立了新的主题 - mycustomtheme
- 商店内的启动主题,在我们起从后台启动新的主题之前,前端还是会寻找一模一样的主题。这是由于模板复写系统适当地运作。
让我们来看一个简单的例子,以便更容易地理解这一点:要渲染的主页,OpenCart 使用的模板位于 catalog/view/theme/*/template/common/home.tpl
。路径的星号映像到主题名称。现在 OpenCart 执行以下过程,以便找到 home.tpl
模板:
- 已经建立了
mycustomtheme
作为商店的启动主题,首先会在catalog/view/theme/mycustomtheme/template/common/home.tpl
尝试找文件。如果找到了,OpenCart 就会使用该文件,并停止搜寻过程。
- 如果 OpenCart 在启动主题找不到
home.tpl
,将还回到默认的主题,并尝试使用catalog/view/theme/default/template/common/home.tpl
。显然,这是home.tpl
一定会在那里,除非您限制了默认主题模板文件!
当无法找到有效的自定义主题所需的模板文件时,OpenCart 总是会回到 default
主题,。所以,实际上,default
主题总是在待命,即使设置了 mycustomtheme
。
这在您只需要调整一些选定的模板文件的情况下非常方便。在这种情况下,只需将这些文件复制到自定义主题目录来完成需求。
扩展空白自定义主题
至于我们自定义主题 mycustomtheme
,目前只是一个空壳子。且让我们用一些有用的内容丰富它。
继续在自定义的主题目录 template
下创建一个名为 common
的新目录。现在从 default
主题的 template/common
目录复制 home.tpl
和 header.tpl
模板文件。贴到我们主题的新创建的 common
目录。
同样,从 default
主题的 stylesheet
目录复制所有的样式表单文件,并贴到我们主题的 stylesheet
目录。image
目录亦同,虽然目前我们会忽略这个目录。
此时,新的主题目录树看起来应该像这样:

在我们进行之前,有几个重要的事情要注意。您应该只将需要自定义的模板文件复制到自定义主题。因为缺少的文件会从 default
主题中获取,所以没有必要保持相同文件的副本,除非您需要修改它。
还有一点要注意的是,应该保持和 default 主题相似的文件结构,特别是模板文件。如您所见,当我们复制 home.tpl
和 header.tpl
文件到与默认主题模仿的结构时,我们创建了一个common
目录。
从现在起,我提到的所有路径都是自定义主题目录中的文件相对路径。接下来,用您喜欢的文本编辑器打开 template/common/header.tpl
文件。该文件中的代码负责显示网站的头部。如果您细看代码,会发现“默认”主题有引用一些样式表单。
让我们从自定义主题获取并来改变之。
找到下面的代码,
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet.css" />
并替换成,
<link rel="stylesheet" type="text/css" href="catalog/view/theme/mycustomtheme/stylesheet/stylesheet.css" />
其它所需要的样式表单引用亦同。
通过这种方式,我们确保了所有的样式表单文件是从自定义主题加载。现在打开 template/common/home.tpl
文件,并替换成以下内容。
<?php echo $header; ?> <?php echo $column_left; ?> <?php echo $column_right; ?> <div style="background: #00F;color: #FFF;font-weight: bold;padding-left: 10px;">If this line appears, Our custom theme is doing it's part!</div><br/> <div id="content"> <?php echo $content_top; ?> <h1 style="display: none;"><?php echo $heading_title; ?></h1> <?php echo $content_bottom; ?> </div> </div> <?php echo $footer; ?>
请检查您的主页,应该会看到的变化。
这只是如何覆盖和使用自定义主题自定义模板的一个例子。当然,在实际情况中,您可能需要改变很多模板,使之对应自定义设计。稍后在本系列中,我们将学习如何找到前端特定页面相关的模板。
结论
最后,本文旨在帮助您了解创建自定义主题的精妙之处。您可以继续探索其他模板文件的代码,以便更好地了解 OpenCart 主题的运作。
在接下来的部分,我们将看看一些具体的公共模板。当然,最欢迎反馈,请在评论留下疑问,意见等。
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post