스토리지 프론트 데스크톱 테마 만들기

7674 단어 PHP Magento2

스토리지 프론트 데스크톱 테마 만들기

매장 테마 만들기 단계:
1. 다음 디렉토리에 테마 디렉토리를 만듭니다.app/design/frontend/[your_vendor_name]/[your_theme_name] .
2. theme.xml 파일에서 주제 선언
3. registration.php 파일에 주제 등록
4. etc/view.xml 파일에서 이미지 설정
5. 주제 로고 선언
6. 관리 화면에서 테마를 설정합니다.

테마 디렉터리 만들기

Go toMAGENTO_DIRECTORY/app/design/frontend에서
상기 디렉터리에서 테마 디렉터리를 만들기 위해 <vendor> 디렉터리를 만듭니다.
나의 경우 다음과 같은 내용을 설정한다.
- 공급업체 이름: Karabiner- 주제 이름: green.
app/design/frontend/

Karabiner
├── green/
│   ├── etc/
│   │   ├── view.xml
│   ├── web/
│   │   ├── images
│   │   │   ├── karabiner_logo.svg
│   ├── registration.php
│   ├── theme.xml

theme.xml 파일에서 테마 설명하기

app/design/frontend/Karabiner/green에서 theme.xml 파일을 생성합니다.theme.xml 파일 설정 테마의 기본 정보(주제 이름, 부모 테마, 이미지 미리 보기 등).
app/design/frontend/Karabiner/green/theme.xml

<?xml version="1.0" encoding="UTF-8"?>
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Green</title> <!-- your theme's name -->
    <parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->
</theme>

registration.php 파일에 테마 등록

테마의 로그인 파일은 다음과 같은 느낌입니다.
app/design/frontend/Karabiner/green/registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Karabiner/green', // theme path
    __DIR__
);

etc/view.xml 파일에서 이미지 설정 설정

이것은 프로필입니다.이 파일은 Magento2 테마에서 "필수"※ 입니다.
※ - 부모 테마에 존재하는 경우 선택할 수 있습니다.app/design/frontend/Karabiner/green/에서 파일 생성 etc/view.xmlBlank 테마 등 부모 테마의view.xml 파일을 복사할 수 있습니다.vendor/magento/theme-frontend-blank/etc/view.xmlapp/design/frontend/Karabiner/green/etc/view.xml

<image id="category_page_grid" type="small_image">
    <width>250</width>
    <height>250</height>
</image>

view.xml 요소의 역할 영역에서 이미지 속성을 설정합니다.
app/design/frontend/Karabiner/green/etc/view.xml

<images module="Magento_Catalog">
...
<images/>

image 표시된 id와 type 속성에 정의된 이미지 형식마다 이미지 속성을 설정합니다.
app/design/frontend/Karabiner/green/etc/view.xml

<images module="Magento_Catalog">
    <image id="unique_image_id" type="image_type">
    <width>100</width> <!-- Image width in px --> 
        <height>100</height> <!-- Image height in px -->
    </image>
<images/>

테마 로고 선언

기본적으로 Magento2는 사용됩니다[theme_dir]/web/images/logo.svg.default.xml에서 png, jpg 등 다른 이미지 형식으로 변경할 수 있지만 설정해야 합니다.
로고 크기는 100x100px[theme_dir]/Magento_Theme/layout/default.xmlapp/design/frontend/Karabiner/green/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/karabiner_logo.svg</argument>
                <argument name="logo_img_width" xsi:type="number">100</argument> 
                <argument name="logo_img_height" xsi:type="number">100</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>