Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. OpenCart
Code

用 OpenCart 创建自定义主题:第二部分

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Create a Custom Theme With OpenCart.
Create a Custom Theme With OpenCart: Introduction
Create a Custom Theme With OpenCart: Part Three

Chinese (Simplified) (中文(简体)) translation by Niau Wu (you can also view the original English article)

在本系列的第一篇文章中 ,我们探讨了 OpenCart 的基本主题结构。现在,让我们进一步学习如何创建自定义主题。如果您还没有看过本系列教程的第一部分,请仔细阅读之,以便您了解本文要做什么,我们将要继续建立自己的主题。

OpenCart 内建还不错的默认主题,将用来当作自定义主题的基础。一般来说,要创建自定义主题,有两种情况:

  1. 想要用所选择的新界面完全取代预设的前端界面,
  2. 想改变一些东西如颜色组合、布局结构和品牌相关的变化。

在这两种情况下,我建议创建一个新的自定义主题,而不是直接修改默认的主题文件,因为在更新 OpenCart 的版本过程中会比较容易。

在开始之前,您应该有安装了 OpenCart。如果还没有安装,去安装并设置好。

一旦安装好了,就让我们开始吧!

建立骨架

catalog/view/theme 底下创建一个新的目录,命名为 mycustomtheme。用来装其他文件,如图片(iamge),样式表单(stylesheet)和模板(template)。接下来,需要在 mycustomtheme 目录下创建三个目录:imagestylesheettemplates

基本骨架结构

一旦完成了,就表示已经设定好需要的自定义主题基本骨架结构。事实上,可以继续前进了,从后端实现自定义主题,其会运作的相当好。

启动(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.tplheader.tpl 模板文件。贴到我们主题的新创建的 common目录。

同样,从 default 主题的 stylesheet 目录复制所有的样式表单文件,并贴到我们主题的 stylesheet 目录。image 目录亦同,虽然目前我们会忽略这个目录。

此时,新的主题目录树看起来应该像这样:

自定义主题结构

在我们进行之前,有几个重要的事情要注意。您应该只将需要自定义的模板文件复制到自定义主题。因为缺少的文件会从 default 主题中获取,所以没有必要保持相同文件的副本,除非您需要修改它。

还有一点要注意的是,应该保持和 default 主题相似的文件结构,特别是模板文件。如您所见,当我们复制 home.tplheader.tpl 文件到与默认主题模仿的结构时,我们创建了一个common 目录。

从现在起,我提到的所有路径都是自定义主题目录中的文件相对路径。接下来,用您喜欢的文本编辑器打开 template/common/header.tpl 文件。该文件中的代码负责显示网站的头部。如果您细看代码,会发现“默认”主题有引用一些样式表单。

让我们从自定义主题获取并来改变之。

找到下面的代码,

并替换成,

其它所需要的样式表单引用亦同。

通过这种方式,我们确保了所有的样式表单文件是从自定义主题加载。现在打开 template/common/home.tpl 文件,并替换成以下内容。

请检查您的主页,应该会看到的变化。

这只是如何覆盖和使用自定义主题自定义模板的一个例子。当然,在实际情况中,您可能需要改变很多模板,使之对应自定义设计。稍后在本系列中,我们将学习如何找到前端特定页面相关的模板。

结论

最后,本文旨在帮助您了解创建自定义主题的精妙之处。您可以继续探索其他模板文件的代码,以便更好地了解 OpenCart 主题的运作。

在接下来的部分,我们将看看一些具体的公共模板。当然,最欢迎反馈,请在评论留下疑问,意见等。

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.