在 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