ストアフロントテーマを作成

#ストアフロントテーマを作成

店頭テーマのステップを作成ステップス:

1.以下のディレクトリにテーマのディレクトリを作成します
<br>`app/design/frontend/[your_vendor_name]/[your_theme_name]`.
2. `theme.xml`ファイルにテーマを宣言する
3. `registration.php`ファイルにテーマを登録する
4. `etc/view.xml`ファイルに画像の設定を設定する
5. テーマロゴを宣言する
6. 管理画面でテーマを構成します。

##テーマのディレクトリを作成

Go to `MAGENTO_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`ファイルはテーマの基本情報（テーマ名、親テーマ、プレビュー画像など）を設定します。

```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`ファイルにテーマを登録する

テーマの登録ファイルは以下のような感じです。

```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`ファイルに画像の設定を設定する
これは構成ファイルです。このファイルは、Magento 2テーマでは「必須」※です。
※ - **親テーマに存在する場合はオプションです。**


 `app/design/frontend/Karabiner/green/` に、 `etc/view.xml`ファイルを作成する
`Blank` テーマなどの親テーマでview.xmlファイルをコピーできます。
`vendor/magento/theme-frontend-blank/etc/view.xml`

```xml:app/design/frontend/Karabiner/green/etc/view.xml
<image id="category_page_grid" type="small_image">
    <width>250</width>
    <height>250</height>
</image>
```

`view.xml`では、画像のプロパティは要素のスコープで設定されます：

```xml:app/design/frontend/Karabiner/green/etc/view.xml
<images module="Magento_Catalog">
...
<images/>
```
画像プロパティは、 `image`タグのidとtype属性によって定義される各画像タイプに対して設定されます：

```xml: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/>
```

##テーマロゴを宣言する
Magento 2のデフォルトでは、 `[theme_dir]/web/images/logo.svg`を使用します。`default.xml`では、png、jpgなどの別の画像形式に変更できますが、設定する必要があります。

ロゴのサイズは100x100pxにします
`[theme_dir]/Magento_Theme/layout/default.xml`

```xml:app/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>
```

##管理画面でテーマを設定します。
#### Magentoにテーマが登録されたことを確認するには
`Admin panel -> content -> under Design -> click on Themes`
![content-design-themes.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275433/e3478684-603f-ae5c-2b76-d6f609e83794.png)

テーマページに新しいテーマが表示されます。

![content-design-themes-new-theme.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275433/a76ddc2e-8f97-bb14-f0e4-a1a1f6217a1b.png)


####テーマを設定する
`Admin panel -> content -> under Design ->  Configuration`

![content-design-config.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275433/a0afca9d-185e-abf4-049b-414073935787.png)

**テーマを選択して、 [save Configuration]にクリックする**
![content-design-config-change-theme.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275433/39261afd-3eec-a139-32b6-ae300fa03701.png)

####キャッシュをクリアして、フロントエンドを確認します
karabinerロゴを表示される
![logo-changed.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275433/6dd62624-ce27-4e6c-8030-24808f4882ca.png)