Własny motyw

W tym temacie pokażę w jaki sposób utworzyć własny motyw w Magento 2. Domyślnie mamy do wyboru dwa motywy: Blank i Luma. Możesz je podejrzeć po zalogowaniu się do panelu admina – w sekcji „Motywy”: Menu -> Content -> Design -> Themes.

themes

Po co nam własny motyw? A po to, by aktualizować lub modyfikować wygląd strony nie ingerując w oryginalne pliki Magento.

TWORZENIE MOTYWU

1. Utwórz strukturę katalogów według wzoru:

app/design/frontend/<Vendor>/<Theme>

1	app/design/frontend/<Vendor>/<Theme>

Np:

app/design/frontend/Spin/Geek

1	app/design/frontend/Spin/Geek

2. Utwórz plik theme.xml z deklaracją motywu (app/design/frontend/Spin/Geek/theme.xml):

 <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
      <title>Spin Geek</title>
      <parent>Magento/luma</parent>
	  <!-- opcjonalnie obrazek z podglądem motywu:
      <media>
          <preview_image>media/preview.jpg</preview_image>
      </media> -->
 </theme>

<parent>Magento/luma</parent>

<!-- opcjonalnie obrazek z podglądem motywu:

<media>

<preview_image>media/preview.jpg</preview_image>

</media> -->

</theme>

title (Spin Geek) – to nazwa motywu (widoczna będzie w panelu admina),
parent (Magento/luma) – to nazwa motywu rodzica, po którym będzie „dziedziczył” wygląd nasz nowy motyw.

3. Utwórz plik composer.json (app/design/frontend/Spin/Geek/composer.json):

{
    "name": "Spin/Geek",
    "description": "N/A",
    "config": {
        "sort-packages": true
    },
    "require": {
        "php": "~7.1.3||~7.2.0",
        "magento/framework": "*",
        "magento/theme-frontend-blank": "*"
    },
    "type": "magento2-theme",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

{

"name": "Spin/Geek",

"description": "N/A",

"config": {

"sort-packages": true

"require": {

"php": "~7.1.3||~7.2.0",

"magento/framework": "*",

"magento/theme-frontend-blank": "*"

"type": "magento2-theme",

"license": [

"OSL-3.0",

"AFL-3.0"

"autoload": {

"files": [

"registration.php"

]

}

4. Utwórz plik registration.php (app/design/frontend/Spin/Geek/registration.php), aby zarejestrować nowy motyw:

<?php
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Spin/Geek',
    __DIR__
);

<?php

/**

* See COPYING.txt for license details.

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::THEME,

'frontend/Spin/Geek',

__DIR__

);

5. Opcjonalnie utwórz strukturę katalogów dla plików statycznych (skryptów js, stylów css, obrazków, zdjęć, etc):

app/design/frontend/Spin/Geek/
├── web/
│ ├── css/
│ │ ├── source/ 
│ ├── fonts/
│ ├── images/
│ ├── js/

app/design/frontend/Spin/Geek/

├── web/

│ ├── css/

│ │ ├── source/

│ ├── fonts/

│ ├── images/

│ ├── js/

6. Włącz motyw w panelu admina:

Menu -> Content -> Design -> Configuration

Nowy motyw powinien pojawić się w liście, jak na poniższym obrazku:

Zobacz również: „NADPISYWANIE SZABLONÓW MAGENTO WE WŁASNYM MOTYWIE”

#magento #Magento 2

TWORZENIE MOTYWU

KOMENTARZE