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

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

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

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

在这两种情况下，我建议创建一个新的自定义主题，而不是直接修改默认的主题文件，因为在更新 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 主题的运作。

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