在 Magento 2 中创建主题的指南

已发表: 2015-11-20

你好！ 你对 Magento 2.0 有很多更新和变化感到好奇吗？ 今天，我们想和大家分享一篇关于 Magento 2 主题创建指南的博文。每天练习更新。

最新更新：我们刚刚发布了 Claue Multipurpose Magento 2 主题的 2.0 版，其中包含一系列性能改进和独家功能。 立即查看此主题：Claue Magento Theme 2. 0

claue2_edited (1)

现场演示

Claue – Clean, Minimal Magento 2&1 Theme是一个优秀的模板，适用于现代和干净的电子商务商店，拥有 40 多种主页布局和大量商店、博客、投资组合、商店定位器布局和其他有用页面的选项。 Claue 版本 2. 0 带有一系列独家功能，包括：

  • 基于 Luma 主题。
  • 满足 Magento 主题的所有标准
  • 显着的性能提升
  • 与大多数第三方扩展兼容。
  • 与 Magento 2.4.x 完全兼容

第二个高级版本与之前的版本完全不同。 因此，如果您使用 Claue 版本 1 并想更新到 Claue 版本 2，则只能重建新网站，而不是从旧版本更新。 现在，让我们回到主题。

Magento 2 中的主题系统发生了一些变化，但也有相似之处。 本主题讨论如何创建构成主题的文件、如何将徽标添加到主题以及如何调整图像大小。

创建主题目录

为您的主题创建目录：

  1. 转到<your Magento install dir>/app/design/frontend 。
  2. 创建一个根据您的供应商名称命名的新目录： /app/design/frontend/<Vendor> 。
  3. 在供应商目录下，创建一个根据您的主题命名的目录。
 应用程序/设计/前端/
├── <供应商>/
│ │ ├──...<主题>/
│ │ │ ├── ...
│ │ │ ├── ...

文件夹名称通常与主题代码中使用的命名相匹配：供应商认为合适的任何字母数字字符集都是可以接受的。 这个约定只是一个建议，所以没有什么可以阻止以另一种方式命名这个目录。

声明你的主题

为主题创建目录后，您必须创建至少包含主题名称和父主题名称（如果主题继承自其中一个主题）的theme.xml 。 或者，您可以指定主题预览图像的存储位置。

  1. 从现有的theme.xml添加或复制到您的主题目录app/design/frontend/<Vendor>/<theme>
  2. 使用以下示例对其进行配置：
 <theme xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation= "urn:magento:framework:Config/etc/theme.xsd" > <title> New theme </title> <!-- your theme's name --> <parent> Magento/blank </parent> <!-- the parent theme, in case your theme inherits from an existing theme --> <media> <preview_image> media/preview.jpg </preview_image> <!-- the path to your theme's preview image --> </media> </theme>

使您的主题成为 Composer 包（可选）

gento 默认主题作为 Composer 包分发。

要将主题作为包分发，请将composer.json文件添加到主题目录并在打包服务器上注册包。 默认的公共打包服务器是 https://packagist.org/。

composer.json提供主题依赖信息。

主题composer.json的示例：

 { "name" : "magento/theme-frontend-luma" , "description" : "N/A" , "require" : { "php" : "~5.5.0|~5.6.0|~7.0.0" , "magento/theme-frontend-blank" : "100.0.*" , "magento/framework" : "100.0.*" }, "type" : "magento2-theme" , "version" : "100.0.1" , "license" : [ "OSL-3.0" , "AFL-3.0" ], "autoload" : { "files" : [ "registration.php" ] } }

您可以在 Composer 集成中找到有关 Magento 系统中 Composer 集成的详细信息。

添加registration.php

要在系统中注册您的主题，请在您的主题目录中添加一个registration.php文件，其中包含以下内容：

 <?php /** * Copyright 2015 Magento. All rights reserved. * See COPYING.txt for license details. */ \Magento\Framework\Component\ComponentRegistrar :: register ( \Magento\Framework\Component\ComponentRegistrar :: THEME , 'frontend/<Vendor>/<theme>' , __DIR__ );

<Vendor>是您的供应商名称， <theme>是主题代码。

有关说明，请参阅 Magento Luma 主题的 registration.php 文件。

配置图像

店面使用的产品图像大小和其他属性在view.xml配置文件中进行配置。 它是主题所必需的，但如果存在于父主题中则是可选的。

如果您的主题的产品图像大小与父主题的不同，或者您的主题没有从任何主题继承，请使用以下步骤添加view.xml ：

  1. 以有权在 Magento 安装目录中创建目录和文件的用户身份登录到您的 Magento 服务器。 （通常，这是 Magento 文件系统的所有者。）
  2. 在主题文件夹中创建etc目录
  3. 将view.xml从现有主题的etc目录（例如，从空白主题）复制到主题的etc目录。
  4. 在view.xml中配置所有店面产品图像大小。 例如，您可以通过指定 250 x 250 像素的大小使类别网格视图产品图像为正方形，以下是相应配置的样子：
 ... <image id= "category_page_grid" type= "small_image" > <width> 250 </width> <height> 250 </height> </image> ...

有关view.xml中图像配置的详细信息，请参阅为主题配置图像属性主题。

为静态文件创建目录

您的主题可能包含几种类型的静态文件：样式、字体、JavaScript 和图像。 每种类型都应存储在主题文件夹中web的单独子目录中：

 app/design/<区域>/<供应商>/<主题>/
├── 网络/
│ ├── css/
│ │ ├── 来源/ 
│ ├── 字体/
│ ├── 图片/
│ ├── js/

在.../<theme>/web/images中存储一般主题相关的静态文件。 例如，主题徽标存储在...<theme>/web/images中。 您的主题可能还会包含特定于模块的文件，这些文件存储在相应的子目录中，例如.../<theme>/<Namespace_Module>/web/css等。 本指南的以下部分将讨论管理特定于模块的主题文件。

你现在的主题目录结构

此时您的主题文件结构如下所示：

 应用程序/设计/前端/<供应商>/
├── <主题>/
│ ├── 等/
│ │ ├── view.xml
│ ├── 网络/
│ │ ├── 图片
│ │ │ ├── logo.svg
│ ├── 主题.xml
│ ├── composer.json

主题标志

在 Magento 应用程序中，徽标图像的默认格式和名称是logo.svg 。 当您将logo.svg图片放在常规位置，即<theme_dir>/web/images目录时，它会自动识别为主题 logo。 应用主题后，它会显示在您的商店页面标题中。

在您的自定义主题中，您可以使用具有不同名称和格式的徽标文件，但您可能需要声明它。

声明的必要性取决于您的主题是否有父主题及其徽标图像。 以下情况是可能的：

  • 您的主题没有父主题：
    • 如果您的 logo 图片名称和格式为默认logo.svg ，则无需声明；
    • 如果您的标志图像名称或格式不是默认的，您需要在布局中声明它。
  • 您的主题有一个父主题：
    • 如果您的主题标志图片与父主题标志的名称和格式相同，则无需声明；
    • 如果您的徽标图像具有不同的名称或格式，请在布局中声明。

声明主题标志

要声明主题徽标，请添加扩展<theme_dir>/Magento_Theme/layout/default.xml布局。

例如，如果你的 logo 文件是my_logo.png大小为 300x300px，你需要声明它如下：

 <page xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation= "urn:magento:framework:View/Layout/etc/page_configuration.xsd" > <body> <referenceBlock name= "logo" > <arguments> <argument name= "logo_file" xsi:type= "string" > images/my_logo.png </argument> <argument name= "logo_img_width" xsi:type= "number" > 300 </argument> <argument name= "logo_img_height" xsi:type= "number" > 300 </argument> </arguments> </referenceBlock> </body> </page>

声明徽标大小是可选的。

访问 Magesolution 博客以阅读完整的 Magento 2 教程并更新有关 Magento 2 的最新教程。

来源：magento.com