Magento 2에서 테마 만들기 가이드

안녕! 업데이트와 변화가 많은 마젠토 2.0이 궁금하시죠? 오늘은 Magento 2에서 테마 만들기 가이드에 대한 블로그 게시물을 공유하고자 합니다. 매일 연습하여 항상 업데이트됩니다.

최신 업데이트: 성능 개선 및 독점 기능이 포함된 Claue Multipurpose Magento 2 테마 버전 2.0을 출시했습니다. 지금 이 테마를 확인하세요: Claue Magento Theme 2. 0

라이브 데모

Claue – 깨끗하고 최소한의 Magento 2&1 테마 는 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. 기존 테마의 etc 디렉토리(예: Blank 테마)에서 view.xml 을 테마의 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 의 별도 하위 디렉토리에 저장해야 합니다.

 앱/디자인/<영역>/<벤더>/<테마>/
├── 웹/
│ ├── CSS/
│ │ ├── 출처/ 
│ ├── 글꼴/
│ ├── 이미지/
│ ├── js/

이제 테마 디렉토리 구조

이 시점에서 테마 파일 구조는 다음과 같습니다.

 앱/디자인/프론트엔드/<공급업체>/
├── <테마>/
│ ├── 등/
│ │ ├── view.xml
│ ├── 웹/
│ │ ├── 이미지
│ │ │ ├── logo.svg
│ ├── theme.xml
│ ├── 작곡가.json

테마 로고

Magento 애플리케이션에서 로고 이미지의 기본 형식과 이름은 logo.svg 입니다. <theme_dir>/web/images 디렉토리인 기존 위치에 logo.svg 이미지를 넣으면 자동으로 테마 로고로 인식됩니다. 테마가 적용되면 스토어 페이지 헤더에 표시됩니다.

사용자 정의 테마에서 다른 이름과 형식의 로고 파일을 사용할 수 있지만 이를 선언해야 할 수도 있습니다.

선언의 필요성은 테마에 상위 테마와 로고 이미지가 있는지 여부에 따라 다릅니다. 다음과 같은 경우가 가능합니다.

• 테마에 상위 테마가 없습니다.
  • 로고 이미지 이름과 형식이 기본값인 logo.svg 인 경우 선언할 필요가 없습니다.
  • 로고 이미지 이름이나 형식이 기본값이 아닌 경우 레이아웃에서 선언해야 합니다.
• 테마에 상위 테마가 있습니다.
  • 테마 로고 이미지가 상위 테마 로고와 이름 및 형식이 같으면 선언할 필요가 없습니다.
  • 로고 이미지의 이름이나 형식이 다른 경우 레이아웃에서 선언하세요.

테마 로고 선언

테마 로고를 선언하려면 확장 <theme_dir>/Magento_Theme/layout/default.xml 레이아웃을 추가하세요.

예를 들어 로고 파일이 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