在 Magento 中编辑子主题答案

【问题标题】：Editing a child theme in Magento在 Magento 中编辑子主题
【发布时间】：2017-11-07 22:08:07
【问题描述】：

我通过将文件添加到 C:\xampp\htdocs\magento\app\design\frontend\Magento\themename 来创建了一个子主题

我有一个 theme.xml 文件、一个 registration.php 文件、web 文件夹、媒体文件夹和一个 Magento_Theme 文件夹。

我的问题如下：

这个子主题使用 C:\xampp\htdocs\magento\vendor\magento\theme-frontend-blank 结构。例如，对于我的主页，我将如何更改头文件。它有一个顶部菜单、一个搜索和一个徽标。我怎样才能重新安排这个？甚至是主页。我将如何为此进行新的布局，可能有 3/5 列的正常内容和 2/5 的最新产品内容（例如）。

任何方向都会很棒！

【问题讨论】：

标签： php magento themes magento2

【解决方案1】：

更改标题

覆盖徽标：将 vendor\magento\module-theme\view\frontend\templates\html\header.phtml 复制到 app\design\frontend\Magento\themename\Magento_Theme\templates\html\header.phtml 并根据需要进行修改。

覆盖顶部菜单：将vendor\magento\module-theme\view\frontend\templates\html\topmenu.phtml 复制到app\design\frontend\Magento\themename\Magento_Theme\templates\html\topmenu.phtml 并根据需要进行修改。

覆盖搜索框：有点不同。将vendor\magento\module-search\view\frontend\templates\form.mini.phtml 复制到app\design\frontend\Magento\themename\Magento_Search\templates\form.mini.phtml 并根据需要进行修改。

参考：

http://devdocs.magento.com/guides/v2.2/frontend-dev-guide/themes/theme-inherit.html#theme-inherit-templates

创建布局

创建文件app\design\frontend\Magento\themename\Magento_Theme\page_layout\new-layout.xml，内容如下：

<?xml version="1.0" ?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="2columns-left"/>
</layout>

创建文件app\design\frontend\Magento\themename\Magento_Theme\page_layout\layouts.xml，内容如下：

<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="new-layout">
        <label translate="true">My New Layout</label>
    </layout>
</page_layouts>

编写CSS文件来声明宽度：

.page-layout-new-layout .column.left {
    width: 60%;
    float: left;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}


.page-layout-new-layout .column.main {
    width: 40%;
    float: right;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}

清除缓存

参考：

【讨论】：