Przewodnik tworzenia motywu w Magento 2

Cześć! Czy jesteś ciekawy Magento 2.0 z wieloma aktualizacjami i zmianami? Dzisiaj chcielibyśmy podzielić się z Wami wpisem na blogu o Przewodniku tworzenia motywu w Magento 2. Zawsze bądź na bieżąco, ćwicząc codziennie.

Najnowsza aktualizacja: Właśnie wydaliśmy wersję 2.0 uniwersalnego motywu Claue Magento 2 z kilkoma ulepszeniami wydajności i wyjątkowymi funkcjami. Sprawdź teraz ten motyw: Claue Magento Theme 2. 0

Demo na żywo

Claue – czysty, minimalistyczny motyw Magento 2&1 to doskonały szablon dla nowoczesnego i przejrzystego sklepu eCommerce z ponad 40 układami strony głównej i mnóstwem opcji dla sklepu, bloga, portfolio, układów lokalizatora sklepów i innych przydatnych stron. Claue w wersji 2.0 zawiera szereg ekskluzywnych funkcji, w tym:

• Opierając się na motywie Luma.
• Poznaj wszystkie standardy Magento Theme
• Znacząca poprawa wydajności
• Kompatybilny z większością rozszerzeń innych firm.
• W pełni kompatybilny z Magento 2.4.x

Ta druga zaawansowana wersja całkowicie różni się od poprzedniej. Tak więc, jeśli używasz Claue w wersji 1 i chcesz zaktualizować Claue w wersji 2, możesz tylko odbudować nową stronę internetową, a nie aktualizować ze starej wersji. Wróćmy teraz do głównego tematu.

System motywów zmienił się nieco w Magento 2, ale są pewne podobieństwa. W tym temacie omówiono sposób tworzenia plików składających się na motyw, dodawania logo do motywu oraz określania rozmiaru obrazów.

Utwórz katalog motywów

Aby utworzyć katalog dla swojego motywu:

1. Przejdź do <your Magento install dir>/app/design/frontend .
2. Utwórz nowy katalog o nazwie zgodnej z nazwą dostawcy: /app/design/frontend/<Vendor> .
3. W katalogu dostawcy utwórz katalog o nazwie zgodnej z Twoim motywem.

 aplikacja/projekt/frontend/
├── <Dostawca>/
│ │ ├──...<motyw>/
│ │ ├── ...
│ │ ├── ...

Nazwa folderu konwencjonalnie pasuje do nazewnictwa używanego w kodzie motywu: dowolny zestaw znaków alfanumerycznych, według dostawcy, jest akceptowalny. Ta konwencja jest jedynie zaleceniem, więc nic nie stoi na przeszkodzie, aby nazwać ten katalog w inny sposób.

Zadeklaruj swój motyw

Po utworzeniu katalogu dla motywu należy utworzyć theme.xml zawierający co najmniej nazwę motywu i nazwę motywu nadrzędnego (jeśli motyw dziedziczy po jednym). Opcjonalnie możesz określić, gdzie ma być przechowywany obraz podglądu motywu.

1. Dodaj lub skopiuj z istniejącego theme.xml do katalogu motywów app/design/frontend/<Vendor>/<theme>
2. Skonfiguruj go, korzystając z następującego przykładu:

 <theme xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation= "urn:magento:framework:Config/etc/theme.xsd" > <title> New theme </title> <!-- your theme's name --> <parent> Magento/blank </parent> <!-- the parent theme, in case your theme inherits from an existing theme --> <media> <preview_image> media/preview.jpg </preview_image> <!-- the path to your theme's preview image --> </media> </theme>

Zmień swój motyw w pakiet kompozytorski (opcjonalnie)

Domyślne motywy gento są dystrybuowane jako pakiety Composer.

Aby rozpowszechniać motyw jako pakiet, dodaj plik composer.json do katalogu motywu i zarejestruj pakiet na serwerze pakietów. Domyślnym publicznym serwerem pakietów jest https://packagist.org/.

composer.json zawiera informacje o zależnościach motywu.

Przykład motywu composer.json :

 { "name" : "magento/theme-frontend-luma" , "description" : "N/A" , "require" : { "php" : "~5.5.0|~5.6.0|~7.0.0" , "magento/theme-frontend-blank" : "100.0.*" , "magento/framework" : "100.0.*" }, "type" : "magento2-theme" , "version" : "100.0.1" , "license" : [ "OSL-3.0" , "AFL-3.0" ], "autoload" : { "files" : [ "registration.php" ] } }

Szczegóły dotyczące integracji Composera w systemie Magento znajdziesz w dziale Integracja Composer.

Dodaj rejestrację.php

Aby zarejestrować motyw w systemie, w katalogu motywów dodaj plik registration.php o następującej treści:

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

Gdzie <Vendor> to nazwa dostawcy, <theme> to kod motywu.

Aby zobaczyć ilustrację, zobacz plik registration.php motywu Magento Luma.

Skonfiguruj obrazy

Rozmiary obrazów produktów i inne właściwości używane w witrynie sklepowej są konfigurowane w pliku konfiguracyjnym view.xml . Jest to wymagane dla motywu, ale jest opcjonalne, jeśli istnieje w motywie nadrzędnym.

Jeśli rozmiary obrazu produktu w Twoim motywie różnią się od tych z motywu nadrzędnego lub jeśli motyw nie dziedziczy z żadnego motywu, dodaj view.xml , wykonując następujące czynności:

1. Zaloguj się do serwera Magento jako użytkownik z uprawnieniami do tworzenia katalogów i plików w katalogu instalacyjnym Magento. (Zazwyczaj jest to właściciel systemu plików Magento.)
2. Utwórz katalog etc w swoim folderze motywu
3. Skopiuj view.xml z katalogu etc istniejącego motywu (na przykład z motywu Blank) do katalogu etc motywu.
4. Skonfiguruj wszystkie rozmiary obrazów produktów w witrynie sklepowej w view.xml . Na przykład, możesz sprawić, by siatka kategorii wyświetlała zdjęcia produktów jako kwadratowa, określając rozmiar 250 x 250 pikseli, oto jak wyglądałaby odpowiednia konfiguracja:

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

Aby uzyskać szczegółowe informacje na temat konfiguracji obrazów w view.xml , zobacz właściwości Konfigurowanie obrazów dla tematu kompozycji.

Twórz katalogi dla plików statycznych

Twój motyw prawdopodobnie będzie zawierał kilka typów plików statycznych: style, czcionki, JavaScript i obrazy. Każdy typ powinien być przechowywany w osobnym podkatalogu web w folderze motywu:

 aplikacja/projekt/<obszar>/<Dostawca>/<motyw>/
├── sieć/
│ ├── css/
│ │ ├── źródło/ 
│ ├── czcionki/
│ ├── obrazy/
│ ├── js/

Twoja struktura katalogów motywów teraz

W tym momencie struktura pliku motywu wygląda następująco:

 aplikacja/projekt/frontend/<Dostawca>/
├── <motyw>/
│ ├── itp/
│ │ ├── view.xml
│ ├── web/
│ │ ├── obrazy
│ │ │ logo.svg
│ ├── motyw.xml
├── kompozytor.json

Logo motywu

W aplikacji Magento domyślnym formatem i nazwą obrazu logo jest logo.svg . Po umieszczeniu obrazu logo.svg w konwencjonalnej lokalizacji, czyli <theme_dir>/web/images , jest on automatycznie rozpoznawany jako logo motywu. Jest wyświetlany w nagłówku strony sklepu po zastosowaniu motywu.

W motywie niestandardowym możesz użyć pliku logo o innej nazwie i formacie, ale może być konieczne jego zadeklarowanie.

Konieczność deklaracji zależy od tego, czy Twój motyw ma motyw nadrzędny i jego logo. Możliwe są następujące przypadki:

• Twój motyw nie ma motywu nadrzędnego:
  • jeśli nazwa i format obrazu logo jest domyślny, logo.svg , nie ma potrzeby deklarowania tego;
  • jeśli nazwa lub format obrazu logo nie jest domyślny, należy to zadeklarować w układzie.
• Twój motyw ma motyw nadrzędny:
  • jeśli obraz logo motywu ma taką samą nazwę i format jak logo motywu rodzica, nie ma potrzeby deklarowania go;
  • jeśli obraz logo ma inną nazwę lub format, zadeklaruj to w układzie.

Deklarowanie logo motywu

Aby zadeklarować logo motywu, dodaj rozszerzający układ <theme_dir>/Magento_Theme/layout/default.xml .

Na przykład, jeśli plik logo ma rozmiar my_logo.png 300x300px, musisz zadeklarować go w następujący sposób:

 <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/my_logo.png </argument> <argument name= "logo_img_width" xsi:type= "number" > 300 </argument> <argument name= "logo_img_height" xsi:type= "number" > 300 </argument> </arguments> </referenceBlock> </body> </page>

Deklarowanie rozmiaru logo jest opcjonalne.

Odwiedź blog Magesolution, aby przeczytać pełny samouczek Magento 2 i zaktualizować najnowsze samouczki dotyczące Magento 2.

Źródło: magento.com