如何在Magento 2中创建儿童主题

18

我想修改开箱即用的Luma主题的某些方面，但我想通过保留原始文件并确保每次更新Magento时也保留所做的更改来做到这一点。

我想通过儿童主题来做到这一点。

Magento 2是否支持子主题，如果支持，我如何构建目录路径以实现此目的？

magento2  parent-child-theme 
— 费伦斯
source
1
感谢您提出这个问题。我想知道同样的事情！
— camdixon

Answers:

26

让我们创建一个子主题，以便我们在Magento 2中使用的所有自定义主题都位于此处：

应用/设计/前端/公司名称/主题名称

让我们假设，我们的公司名称是mycompany，主题名称是basic。我们需要为主题创建以下目录结构：

app
└────design
     └──────frontend
            └──mycompany
               └───basic
                   └──etc
                   └──Magento_Theme
                   │       └─layout
                   │             default.xml
                   └──media
                   │       preview.png
                   └──web
                   │  └─css
                   │  └─fonts
                   │  └─images
                   │  └─js
                   │ theme.xml
                   │ registration.php

我的公司 ：-

主题包的名称

basic：- 主题名称。我们的mycompany文件夹中可以有多个命名主题。

等/ view.xml的：-

该文件用于指定产品图像尺寸，缩略图等。

Magento_Theme：- 此目录用于覆盖现有的Magento主题文件。

Magento_Theme / layout / default.xml： 默认情况下，Magento2假定您主题的徽标文件应为：/web/media/logo.svg 如果您想要其他徽标文件，则必须在default.xml文件中声明它。

该文件还用于覆盖默认主题的设置。

media / preview.png：- 当前主题的预览。

web：- 此目录包含所有主题的静态数据，例如图像，样式，javascript，字体等。

registration.php：- 此文件是将我们的主题注册到Magento2系统所必需的。

theme.xml：- 这是一个强制性文件，用于定义我们的主题名称，其父主题和可选的主题预览图像。

创建主题文件

现在让我们一个一个地创建文件。

theme.xml（app / design / frontend / mycompany / basic / theme.xml）

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
   <title>Basic</title> <!-- your theme's name -->
   <parent>Magento/blank</parent> <!-- the parent theme -->
   <media>
        <preview_image>media/preview.jpg</preview_image> <!-- theme's preview image -->
   </media>
</theme>

registration.php（app / design / frontend / mycompany / basic / registration.php）

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/mycompany/basic',
    __DIR__
);

default.xml（app / design / frontend / mycompany / basic / Magento_Theme / layout / default.xml）

<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">200</argument>
              <argument name="logo_img_height" xsi:type="number">200</argument>
           </arguments>
        </referenceBlock>
    </body>
</page>

至此，我们的主题已经准备就绪。清除您的缓存，我们现在将从admin中选择新主题。

现在，登录到admin并移动到以下路径：

Content -> Design -> Themes

您应该看到您的主题已列出。

现在去：

Stores -> Configuration -> Design

在左上方的商店视图前面选择主要网站。现在点击

Desgin -> Design Theme

取消选中使用默认复选框，然后选择您的主题。单击“保存配置”，清除缓存，新主题准备就绪。检查您的主页。

有关更多详细信息，请参见此处。

— 阿鲁嫩德拉
source
感谢您提供详尽的分步指南@Arunendra。我会尽快尝试并发回。
— H. Ferrence '16
这是很棒的@Arunendra。工作完美。只需完全遵循它，而无需跳过任何步骤。
— H. Ferrence '16
1
很棒的循序渐进@Arunendra。以防万一有人遇到与我相同的问题，将您注册主题的应用位置从更改Design -> Design Theme为Content/Design/Configuration。
— Kedmasterk
重要说明：文件media/preview.png必须存在，否则Magento会引发异常。
— Salman von Abbas
5

创建目录：

转到root到根目录，然后导航到app / design / frontend，创建目录Demo。

现在在app / design / frontend / Demo中创建Mytheme目录。

在app / design / frontend / Demo / Mytheme中创建Mangento_Theme目录。

在app / design / frontend / Demo / Mytheme / Magento_Theme中创建布局目录。

在app / design / frontend / Demo / Mytheme中创建媒体目录。

在以下位置创建Web目录 app / design / frontend / Demo / Mytheme中。

在app / design / frontend / Demo / Mytheme / web中创建图像目录。

主题宣言

在app / design / frontend / Demo / Mytheme中创建theme.xml文件，并在其中粘贴以下代码：

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Mytheme</title>
<parent>Magento/blank</parent>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>

主题注册

现在，在app / design / frontend / Demo / Mytheme中创建registration.php文件，并将以下代码粘贴到其中：

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/Demo/Mytheme', __DIR__
);

上载主题预览图像

转到app / design / frontend / Demo / Mytheme / media，然后在此处上传预览图像（preview.jpg）。

主题徽标声明

转到app / design / frontend / Demo / Mytheme / Magento_Theme / layout并创建default.xml文件。在其中粘贴以下代码：

<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/mytheme-logo.png</argument>
<argument name="logo_img_width" xsi:type="number">200</argument>
<argument name="logo_img_height" xsi:type="number">200</argument>
</arguments>
</referenceBlock>
</body>
</page>

上传主题徽标

转到app / design / frontend / Demo / Mytheme / web / images并在此处上传徽标（mytheme-logo.png）。

套用主题

  • 打开Magento 2的管理面板，然后转到内容→配置。

  • 单击编辑选项。

  • 从“应用主题”下拉菜单中选择Mytheme，然后单击“
    保存配置”。

运行命令

打开SSH终端并转到Magento 2的根目录。现在，一一运行所有这些命令：

rm -rf var/di/* var/generation/* var/cache/* var/log/* var/page_cache/* var/session/* var/view_preprocessed/* pub/static/*
php bin/magento setup:upgrade
php bin/magento setup:db-schema:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento indexer:reindex
php bin/magento cache:clean
php bin/magento cache:flush
— Syed Muneeb Ul Hasan
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.