Magento 2에서 자식 테마를 만드는 방법

기본 Luma 테마의 특정 측면을 수정하고 싶지만 원본 파일을 유지하고 Magento를 업데이트 할 때마다 변경 사항도 보존하여이를 유지하고 싶습니다.

Child Theme를 통해이 작업을 수행하고 싶습니다.

Magento 2는 하위 테마를 지원합니까? 그렇다면 그렇게하려면 디렉토리 경로를 어떻게 구성해야합니까?

magento2 parent-child-theme

— H. 페 렌스
소스

이 질문을 해주셔서 감사합니다. 나는 같은 것을 궁금해했다!

— camdixon

답변:

Magento 2의 모든 사용자 정의 테마가 여기에 있도록 하위 테마를 만들 수 있습니다.

app / design / frontend / company_name / theme_name

회사 이름은 mycompany이고 테마 이름은 기본이라고 가정하겠습니다. 테마를 위해 다음 디렉토리 구조를 작성해야합니다.

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

내 회사 :-

테마 패키지의 이름

기본 :- 테마의 이름. mycompany 폴더 안에 여러 개의 테마가있을 수 있습니다.

etc / view.xml :-

이 파일은 제품 이미지 크기, 축소판 등을 지정하는 데 사용됩니다.

Magento_Theme :- 이 디렉토리는 기존 Magento의 테마 파일을 재정의하는 데 사용됩니다.

Magento_Theme / layout / default.xml :- 기본적으로 Magento2는 테마의 로고 파일이 다음과 같아야한다고 가정합니다. 로고에 /web/media/logo.svg 다른 파일을 원하면 파일로 선언해야 default.xml합니다.

이 파일은 기본 테마 설정을 재정의하는 데에도 사용됩니다.

media / preview.png :- 현재 테마의 미리보기.

web :- 이 디렉토리는 이미지, 스타일, 자바 스크립트, 글꼴 등과 같은 테마의 모든 정적 데이터를 포함합니다.

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>

이제 테마가 준비되었습니다. 캐시를 비우면 관리자로부터 새 테마를 선택합니다.

이제 관리자로 로그인하여 다음 경로로 이동하십시오.

Content -> Design -> Themes

테마가 표시되어야합니다.

이제 가십시오 :

Stores -> Configuration -> Design

왼쪽 상단의 Store View 앞에서 Main Website를 선택하십시오. 이제 클릭

Desgin -> Design Theme

기본 사용 확인란을 선택 취소하고 테마를 선택하십시오. 구성 저장을 클릭하고 캐시를 지우면 새 테마가 준비됩니다. 홈페이지를 확인하십시오.

자세한 내용은 여기를 참조하십시오.

— 아루 넨 드라
소스

광범위한 단계별 가이드 @Arunendra에 감사합니다. 잠시 후 다시 게시하겠습니다.

— H. Ferrence

이것은 @Arunendra입니다. 완벽하게 작동했습니다. 단계를 건너 뛰지 않고 완전히 따라야합니다.

— H. Ferrence

훌륭한 단계별 @Arunendra. 누군가 나와 같은 문제가 발생하는 경우 등록 테마를 적용한 위치가에서 (으) Design -> Design Theme로 변경되었습니다 Content/Design/Configuration.

— Kedmasterk

중요 사항 : 파일 media/preview.png이 존재해야합니다. 그렇지 않으면 Magento에서 예외가 발생합니다.

— 살만 폰 압바스

디렉토리를 작성하십시오.

루트 디렉토리로 루트로 이동하여 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에 미디어 디렉토리를 만듭니다 .

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의 관리자 패널을 열고 컨텐츠 → 구성으로 이동하십시오.
편집 옵션을 클릭하십시오.
Applied Theme 드롭 다운 메뉴에서 Mytheme을 선택하고
Save Configuration을 클릭 하십시오.

명령 실행

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
소스