手把手教你如何创建Magento主题

Magento magento2 magento2 theme magento2主题 magento2模板 465 浏览 871 赞

现在绝大多数独立站运营者都会去选择使用第三方主题，而作为开发人员，必须掌握如何创建主题。那如何创建自定义主题呢？接下来，Liux就手把手教大家如何创建自定义主题。

1.创建一个包含主题的文件夹

规则：Vendor_Theme

示例：创建一个名为“ Liuxds”的文件夹,路径：app\design\frontend

2.创建一个包含文件和功能文件夹<theme>的示例文件夹

在文件夹“ Liuxds”中创建新文件夹，并将其命名为 mytheme

3.创建文件主题<theme.xml>

<!--
/**
 * Copyright © 2020 Liuxds. All rights reserved.
 */
-->
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">    
    <title>Liuxds Sample Theme</title>
    <parent>Magento/luma</parent>
    <media>
        <preview_image>media/preview.png</preview_image>
    </media>
</theme>

4.创建注册文件主题<registration.php>

<?php
/**
 * Copyright © 2020 Liuxds. All rights reserved.
 */
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Liuxds/mytheme',
    __DIR__
);

5.为主题创建<composer.json>

{
"name": "liuxds/sample-theme",
"description": "Liuxds Customer Theme",
"require": {
"php": "~5.5.0|~5.6.0|~7.0.0",
"magento/theme-frontend-luma": "~100.0",
"magento/framework": "~100.0"
},
"type": "magento2-theme",
"version": "1.0.0",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"autoload": {
"files": [ "registration.php" ]
}
}

6.创建<media>文件夹

在模板根目录创建名称为“ media”的文件夹，并在其中放置图像preview.jpg，该图像为主题预览图

7.创建<web>文件夹

在里面创建 css 文件夹

创建images文件夹来放置图像

在此文件夹中，我们将图像“ logo.png”放置在=>内，这是主题的徽标

创建包含所有javascript文件的 js 文件夹

8.创建一个文件夹以连接布局主题<Magento_Theme>

创建文件夹<layout>

在layout下创建文件布局<default.xml>

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2020 Liuxds. All rights reserved.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <!--这里是重写Logo，用images目录中的logo替换原来父级主题的logo文件-->
        <referenceBlock name="logo">
            <arguments>
              <argument name="logo_file" xsi:type="string">images/logo.png</argument>
           </arguments>
        </referenceBlock>
    </body>
</page>

完成以上步骤，会得到如下结构的目录：

打开网站后台，进入Content—Themes会看到新建的主题

接下来设置前端主题：

然后，进入Content > Design > Configuration，点击编辑一个选择的store或者website。选择我们的主题（应用主题），然后点击保存。

最后，当主题被应用时请刷新页面。要刷新缓存，到System > Cache Management，更新所有无效的缓存类型。

也可以使用bin/magento cache:clean 和bin/magento cache:flush进行刷新

到此，创建自定义主题已完成，如有纰漏，还望指正。

需要了解更多的，可以加我Q联系，随时在线。

原创文章，禁止转载。

上一篇:Magento2修改后台phtml

下一篇:Magento2安装示例数据

手把手教你如何创建Magento主题

评论