如何在 Magento 中创建自定义主题

已发表: 2015-04-06

尽管 Magento 2 处于开发阶段，但由于采用了新的和改进的前端方法，它已经在电子商务行业引起了很大的轰动，但它有望提供。 虽然前端的改进似乎使 Magento 主题过程更加高效，但许多开发人员（尤其是初学者）仍然不了解在 Magento 2 中创建自定义主题的过程。

通过这篇文章，我将逐步介绍创建自定义 Magento 2 主题的过程。 但在此之前，让我们先概述一下 Magento 主题。

Magento 主题 – 概述

主题有助于创建 Magento 商店的视觉表示，使用以下组合：

  • 自定义模板
  • 布局
  • CSS/LESS 文件

Magento 应用程序提供了两种不同的设计主题，即 Luma（也称为演示主题）和 Blank（用于自定义主题创建）。 由于我们需要创建自定义 Magento 主题，我们将使用 Magento Blank 主题。

为了使用空白创建新主题，您必须对其进行自定义。 但是，每次更新默认文件的新版本时，对默认主题进行更改都会覆盖更改。 此问题的可行替代方案是创建一个新的自定义主题，该主题继承默认主题或任何现有主题的功能。

简单地说，我们将创建一个继承现有主题功能的自定义子主题。 这样做，将帮助您解决从头开始创建新的独立主题的麻烦。 因此，无需复制大量文件并修改它们，您只需覆盖和扩展父主题中的现有文件。

现在让我们开始讨论创建一个新的 Magento 主题所涉及的步骤（即一个一个。

了解主题创建过程

在本节中，我们将介绍如何创建有助于主题创建的文件。 此外，我们还将了解为主题添加徽标的过程或我们如何配置图像。

第 1 步 - 创建主题目录

第一步，您需要在创建自定义主题时执行要求您创建主题目录结构。 为此，请遵循以下提到的关键点：

  1. 访问并打开您的 Magento 安装管理后端，然后移动到 dir>/app/design/frontend。
  1. 大多数电子商店提供不同供应商的产品，因此有一个单独的供应商目录非常重要，其中列出了供应商提供的所有产品。 因此，下一步是创建一个名称与供应商名称类似的新目录：/app/design/frontend/<Vendor>。

如果您使用任何内置的 Magento 主题，则需要参考目录：app/design/frontend/Magento

  1. 现在您已经创建了供应商目录，在供应商目录下创建另一个与您的主题名称相似的目录，如下所示。

应用程序/设计/前端/

>> <供应商>/

>>…<主题>/

>> …

第 2 步 - 理解主题声明

创建完主题的目录结构后，您必须创建 theme.xml 来定义主题布局。 xml 文件必须至少包含子主题名称和父主题名称。 对主题布局所做的所有更新都将存储在此文件中。

您的主题布局需要执行两项任务。

  • 首先将当前 theme.xml 中的内容添加或复制到您的主题目录 app/design/frontend/<Vendor>/<theme>
  • 其次，要使您的主题可见，您需要对其进行配置。 为此，请使用以下示例：

<主题 xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”../../../../../lib/internal/Magento/Framework /Config/etc/theme.xsd”>

<title>新主题</title> <!– 您的主题名称 –>

<parent>Magento/blank</parent> <!– 父主题，以防您的主题继承自现有主题 –>

<媒体>

<preview_image>media/preview.jpg</preview_image> <!– 主题预览图像的路径–>

</媒体>

</主题>

为了确保 Magento 应用程序能够识别您的主题，请登录到 Magento 管理面板并检查您是否可以在 Content-> Design -> Themes 下的网格中看到该主题。

图二 别针

第 4 步 - 配置图像（更改产品图像的大小）

上传产品图片时，如果其大小超过默认主题的大小，则必须添加 view.xml 文件。 此文件包含显示在店面上的产品图像大小的配置详细信息。 现在让我们看看配置图像需要遵循的步骤：

  1. 登录到您的 Magento 服务器，但是，您需要以具有特定权限集的用户身份访问服务器。 您必须具有在 Magento 安装目录中创建目录和文件的权限。
  1. 在您的主题文件夹中，创建 etc 目录。
  1. 接下来，将 view.xml 文件从现有主题的“etc 目录”（例如，从空白主题）复制到自定义主题新创建的 etc 目录。
  1. 最后，您需要在 view.xml 中配置商店前端使用的所有产品图像尺寸。 例如，您可以选择将产品类别网格视图中的产品图像描绘为正方形，方法是为其分配 250 x 250 像素的大小。 让我们看一下图像配置的样子：

<var name="category_page_grid:type">small_image</var>

<var name="category_page_grid:width">250</var>

<var name="category_page_grid:ratio">1</var>

<var name="category_page_grid:height">250</var>

第 5 步 - 为您的主题的静态文件创建目录

就像任何标准的 Magento 主题一样，您的主题也将包含多个静态文件，包括样式、JavaScript、图像和其他文件。 确保将每种文件类型存储在主题文件夹中单独的“web”子目录中，如下所示：

app/design/<区域>/<供应商>/<主题>/

>> 网络/

>> css/

>> 来源/

>> 字体/

>> 图片/

>> js/

注意：所有通用的主题静态文件都应该存放在...<theme>/web/images，例如你的主题的logo需要存放在...<theme>/web/images。 您的主题更有可能包含一些特定于模块的文件。 这些文件存储在子目录中，例如 …/<theme>/<Namespace_Module>/web/css 和相关子目录。 然而，这是一个全新的讨论话题。 所以，现在我们将跳过这个话题。

在 Magento 中应用和配置您的主题

本节将告诉您如何将主题应用到 Magento 店面。 为此，只需按照以下列出的步骤操作：

第 1 步 – 打开您的 Magento 安装管理面板并导航到内容-> 设计-> 主题。 确保您可以在给定的主题列表中看到您的主题。

第 2 步 – 从您的管理面板访问商店 -> 配置 -> 设计。

第 3 步 – 从“范围”下拉字段中，选择您想要应用主题的商店视图。

第 4 步 – 接下来，从“设计”主题选项卡中，选择您刚刚在“设计主题”下拉列表中创建的主题。

第 5 步 – 最后，单击“保存配置”选项以应用您到目前为止所做的更改。 完成后，请确保重新加载店面页面。

注意：如果您的 Magento 后端启用了缓存，请务必清除缓存，否则您可能无法看到刚刚应用的更改。

结论

希望阅读本教程将作为基本指南，帮助您了解在 Magento 2 中创建自定义主题的过程。

作者简介：

Isabella Morris 目前受雇于一家著名的定制 Magento 开发公司，并且还致力于撰写有关 Magento 开发的最佳工具和技巧的信息性文章。 事实证明，她的文章对全球更广泛的 Magento 开发人员群体有益。