Magento主题开发：入门

您将要创造的

在本教程系列中，我们将从头开始开发Magento主题。 由于Magento是一个巨大的电子商务CMS，具有大量的自定义选项，因此通常认为Magento主题的开发非常复杂，但是我希望一旦您遵循本系列文章，您将对Magento术语及其开发方式非常熟悉。 。 我将尝试逐步解释所有内容，并逐步开发页面的每个组件。

安装Magento

进行任何Magento开发的第一步是在本地服务器上安装Magento副本。 您也可以在Web服务器上安装Magento副本，但这只会减慢您的开发速度。 因此，我始终建议使用本地服务器进行开发，完成开发并全面测试最终产品后，才应将其上传到服务器上。

我不会通过解释如何在本地服务器上安装Magento来重新发明轮子。 互联网上有很多不错的文章。 您还可以在我们的网站上找到Magento安装文章，例如Tuts +文章 ，它将指导您如何在本地服务器上安装Magento。

在安装Magento时，您还需要安装Magento的示例数据。 该样本数据将添加许多目录，产品，评论等，通过它我们可以在开发过程中测试不同的场景。

安装代码编辑器和调试器

一旦完成Magento的安装，下一步就是准备好开发工具。 您可以在此处使用代码编辑器或所选的IDE。 您满意的任何代码编辑器都可以在这里正常工作。 如果您以前从未使用过任何代码编辑器，那么我建议您安装Notepad ++，因为它是一种重量轻，易于使用且免费的代码编辑器。

我们还需要一个元素检查器来检查和编辑网页上CSS样式。 如果您使用Firefox，则可以为此安装Firebug扩展 。 但是，如果您使用的是Chrome，Chrome Web Inspector的效果很好。 它随Chrome一起提供，因此您无需为此安装任何扩展程序。 就本系列而言，我将使用Chrome Web Inspector调试和编辑CSS样式。

我们将使用HTML简介

为了这个系列的目的，我已经开发了一些HTML。 HTML包含主要在电子商务主题中使用的设计模式和元素，例如顶部购物车，标题滑块，货币和语言选择器等。我们将逐步将HTML转换为可用的Magento主题。 HTML主题包已随附在此处供您下载。

预读清单

在我们进入实际开发阶段之前，我强烈建议您阅读有关Magento主题开发的Tuts +文章系列 。 这套包含三个教程的系列文章将使您熟悉Magento主题背后的理论及其基本原理。 Magento主题开发的知识在您开始尝试使用实际的主题编码之前特别有用。

我们将要编辑的文件

现在您应该已经可以使用Magento安装和开发工具，并且已经阅读了上面推荐的系列文章，从而了解了主题开发的基础知识，让我简要地介绍一下我们将在其中编辑文件的文件夹。

当您打开Magento根文件夹时，您将在其中看到一个文件夹列表。 在这些文件夹中，我们要编辑文件的文件夹只是app文件夹和skin文件夹。

如果有时还可能使用js文件夹来放置jQuery之类JavaScript库文件（如果还没有的话）。 在开始按照本系列下一篇文章中的步骤进行操作之前，请先熟悉一下应用程序和外观文件夹中包含的文件夹。

设置Magento开发环境

我们需要更改Magento中的某些设置，这将有助于我们更快地开发Magento主题，并让我们知道Magento中是否有任何问题。

首先，我们将禁用Magento Cache。 为此，转到系统>缓存管理 ，然后选择所有类型的缓存。 从操作中选择“ 禁用” ，然后提交。

禁用所有缓存后，下一步就是重新索引数据。 为此，请转到系统>索引管理 。 选择所有索引，然后从操作中选择Reindex Data并提交。

现在，我们将在Magento中启用日志和阻止提示。 转到系统>配置 ，然后在左侧边栏中，最后一项将是Developer 。 点击那个。 在下一页的“ 日志设置”中 ，启用日志，然后单击右上角的“ 保存配置”按钮。

接下来，在左侧边栏的顶部，您将看到“ 当前配置范围”选择栏。 从那里选择主要网站 。

现在，从“ 调试”部分启用“ 模板路径提示” ，然后再次单击“ 保存配置”按钮。

最后，转到Magento根目录，然后从那里打开index.php文件。 在第77行，取消注释以下代码行：

ini_set(‘display_errors’,1);

下一步是什么？

现在就这样。 您可能没有意识到，但是在本系列的下一篇教程中，我们为实际主题开发奠定了良好的基础。 最后，如果您还没有的话，我会再次鼓励您仔细阅读以上我推荐的Magento主题开发系列 。

在下一个教程中，我们将创建新主题的文件夹结构。 我们将从HTML复制CSS，JS和图像文件到主题中，并创建主题的local.xml文件，以确保我们的主题链接到这些文件。

就是这样，我希望您能在下一个教程中跟着我们。

翻译自: https://code.tutsplus.com/articles/magento-theme-development-getting-started--cms-24553