Create a new storefront theme

10131 ワード
Magento2 PHP フロントエンド PHP テキストリンク

Create a storefront theme:

Create a storefront theme steps:

  1. Create a directory for the theme under
    app/design/frontend/[your_vendor_name]/[your_theme_name].
  2. Declare your theme theme.xml
  3. Register your theme registration.php
  4. Configure images etc/view.xml
  5. Declare your Theme Logo
  6. Configure your theme in the Admin panel.

Create a theme directory

To create the directory for your theme:

Go to MAGENTO_DIRECTORY/app/design/frontend.

Under a dove directory, create the directory, create a directory named according to your theme.
In my case I will set:
- vendor name: Karabiner
- theme name: green.

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

Declare your theme theme.xml

Now we have folder app/design/frontend/Karabiner/green, now create a file named theme.xml that define basic information about the theme such as Name, parent theme (in case your theme inherits from an existing theme), preview image

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>

Register your theme registration.php

You can add the following content to register the theme to Magento 2

app/design/frontend/Karabiner/green/registration.php
<?php

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

※You should change Karabiner, green to your vendor, theme name.

Configure images etc/view.xml

This is the configuration file. This file is required※ for Magento 2 theme.
※ - it is optional if it exists in the parent theme.

Go to app/design/frontend/Karabiner/green/ and create a file etc/view.xml
You can copy the view.xml file in parent theme such as the Blank theme.
vendor/magento/theme-frontend-blank/etc/view.xml

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

In view.xml, image properties are configured in the scope of element:

app/design/frontend/Karabiner/green/etc/view.xml
<images module="Magento_Catalog">
...
<images/>

Image properties are configured for each image type defined by the id and type attributes of the element:

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/>

In Magento 2 default, it uses [theme_dir]/web/images/logo.svg, in your theme, you can change to a different image format such as png, jpg but you have to declare it.

Logo size should be sized 300x300px and you open file [theme_dir]/Magento_Theme/layout/default.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>

Configure your theme in the Admin panel.

To confirm the theme successfully registered into Magento

Admin panel -> content -> under Design -> click on Themes

you can see a new theme listed on the themes page.

To Configure the theme.

Admin panel -> content -> under Design -> click on Configuration

change default Theme and [save Configuration]

clear cache and check front end

you can see the logo was changed to karabiner logo