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.
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:
1 |
app/design/frontend/<Vendor>/<Theme> |
Np:
1 |
app/design/frontend/Spin/Geek |
2. Utwórz plik theme.xml z deklaracją motywu (app/design/frontend/Spin/Geek/theme.xml):
1 2 3 4 5 6 7 8 |
<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> |
- 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):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
{ "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:
1 2 3 4 5 6 7 8 9 10 |
<?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__ ); |
5. Opcjonalnie utwórz strukturę katalogów dla plików statycznych (skryptów js, stylów css, obrazków, zdjęć, etc):
1 2 3 4 5 6 7 |
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”