Ghid pentru a crea o temă în Magento 2

Salut! Te simți curios despre Magento 2.0, cu o mulțime de actualizări și modificări? Astăzi, am dori să vă împărtășim o postare pe blog despre Ghidul pentru a crea o temă în Magento 2. Fiți mereu actualizat exersând în fiecare zi.

Ultima actualizare: tocmai am lansat versiunea 2.0 a temei Claue Multipurpose Magento 2, cu o mulțime de îmbunătățiri ale performanței și funcții exclusive. Verificați această temă acum: Claue Magento Theme 2. 0

Demo live

Claue – Tema Clean, Minimal Magento 2&1 este un șablon excelent pentru un magazin de comerț electronic modern și curat, cu peste 40 de aspecte de pagină de pornire și o mulțime de opțiuni pentru magazin, blog, portofoliu, machete de locator de magazine și alte pagini utile. Claue versiunea 2.0 vine cu o mulțime de caracteristici exclusive, inclusiv:

• Avand la baza tema Luma.
• Îndeplinește toate standardele temei Magento
• Îmbunătățirea semnificativă a performanței
• Compatibil cu majoritatea extensiilor de la terți.
• Complet compatibil cu Magento 2.4.x

Această a doua versiune avansată se diferențiază complet de cea anterioară. Astfel, dacă utilizați Claue versiunea 1 și doriți să actualizați la Claue versiunea 2, nu puteți decât să reconstruiți un nou site web, mai degrabă decât să actualizați de la versiunea veche. Acum, să revenim la subiectul principal.

Sistemul de teme s-a schimbat puțin în Magento 2, dar există asemănări. Acest subiect discută cum să creați fișierele care alcătuiesc o temă, cum să adăugați un logo la o temă și cum să dimensionați imaginile.

Creați un director de teme

Pentru a crea directorul pentru tema dvs.:

1. Accesați <your Magento install dir>/app/design/frontend .
2. Creați un nou director denumit în funcție de numele furnizorului dvs.: /app/design/frontend/<Vendor> .
3. Sub directorul furnizorului, creați un director numit în funcție de tema dvs.

 aplicație/design/frontend/
├── <Vânzător>/
│ │ ├──...<temă>/
│ │ │ ├── ...
│ │ │ ├── ...

Numele folderului se potrivește în mod convențional cu denumirea utilizată în codul temei: orice set alfanumeric de caractere, după cum consideră de cuviință furnizorul, este acceptabil. Această convenție este doar o recomandare, așa că nimic nu împiedică denumirea acestui director în alt mod.

Declarați-vă tema

După ce creați un director pentru tema dvs., trebuie să creați theme.xml care să conțină cel puțin numele temei și numele temei părinte (dacă tema moștenește de la unul). Opțional, puteți specifica unde este stocată imaginea de previzualizare a temei.

1. Adăugați sau copiați dintr-un theme.xml existent în directorul dvs. de teme app/design/frontend/<Vendor>/<theme>
2. Configurați-l folosind următorul exemplu:

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

Faceți din tema un pachet Composer (opțional)

Temele implicite gento sunt distribuite ca pachete Composer.

Pentru a vă distribui tema ca pachet, adăugați un fișier composer.json în directorul temei și înregistrați pachetul pe un server de ambalare. Un server de ambalare public implicit este https://packagist.org/.

composer.json oferă informații despre dependența temei.

Exemplu de temă 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" ] } }

Puteți găsi detalii despre integrarea Composer în sistemul Magento în Integrare Composer.

Adăugați registration.php

Pentru a vă înregistra tema în sistem, în directorul dvs. de teme adăugați un fișier registration.php cu următorul conținut:

 <?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__ );

Unde <Vendor> este numele furnizorului dvs., <theme> este codul temei.

Pentru ilustrare, consultați fișierul registration.php al temei Magento Luma.

Configurați imagini

Dimensiunile imaginii produsului și alte proprietăți utilizate în vitrina sunt configurate într-un fișier de configurare view.xml . Este necesar pentru o temă, dar este opțional dacă există în tema părinte.

Dacă dimensiunile imaginii de produs ale temei dvs. diferă de cele ale temei părinte sau dacă tema dvs. nu moștenește de la nicio temă, adăugați view.xml utilizând următorii pași:

1. Conectați-vă la serverul dvs. Magento ca utilizator cu permisiuni pentru a crea directoare și fișiere în directorul de instalare Magento. (De obicei, acesta este proprietarul sistemului de fișiere Magento.)
2. Creați directorul etc în folderul dvs. de teme
3. Copiați view.xml din directorul etc al unei teme existente (de exemplu, din tema Blank) în directorul etc al temei dvs.
4. Configurați toate dimensiunile imaginilor produselor din vitrine în view.xml . De exemplu, puteți face ca imaginea de produse să vizualizeze grila categoriei, specificând o dimensiune de 250 x 250 pixeli, iată cum ar arăta configurația corespunzătoare:

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

Pentru detalii despre configurarea imaginilor în view.xml , consultați subiectul Configurați proprietățile imaginilor pentru o temă.

Creați directoare pentru fișierele statice

Tema dvs. va conține probabil mai multe tipuri de fișiere statice: stiluri, fonturi, JavaScript și imagini. Fiecare tip ar trebui să fie stocat într-un subdirector separat de web în folderul dvs. de teme:

 app/design/<zonă>/<Vânzător>/<temă>/
├── web/
│ ├── css/
│ │ ├── sursa/ 
│ ├── fonturi/
│ ├── imagini/
│ ├── js/

Structura directorului dvs. de teme acum

În acest moment, structura fișierului dvs. de temă arată după cum urmează:

 app/design/frontend/<Vendor>/
├── <temă>/
│ ├── etc/
│ │ ├── vizualizare.xml
│ ├── web/
│ │ ├── imagini
│ │ │ ├── logo.svg
│ ├── temă.xml
│ ├── compozitor.json

Logo-ul temei

În aplicația Magento, formatul implicit și numele unei imagini de logo este logo.svg . Când puneți o imagine logo.svg în locația convențională, care este <theme_dir>/web/images , aceasta este recunoscută automat ca logo-ul temei. Este afișat în antetul paginii magazinului dvs. odată ce tema este aplicată.

În tema personalizată, puteți utiliza un fișier de siglă cu alt nume și format, dar este posibil să fie necesar să îl declarați.

Necesitatea declarației depinde dacă tema dvs. are o temă părinte și imaginea logo-ului acesteia. Sunt posibile următoarele cazuri:

• Tema dvs. nu are o temă părinte:
  • dacă numele și formatul imaginii logo-ului dvs. sunt implicite, logo.svg , nu este nevoie să o declarați;
  • dacă numele sau formatul imaginii logo-ului nu este implicit, trebuie să îl declarați în aspect.
• Tema dvs. are o temă părinte:
  • dacă imaginea logo-ului temei dvs. are același nume și format ca sigla temei părintelui, nu este nevoie să o declarați;
  • dacă imaginea logo-ului dvs. are nume sau format diferit, declarați-o în aspect.

Declararea logo-ului temei

Pentru a declara o siglă de temă, adăugați un aspect extins <theme_dir>/Magento_Theme/layout/default.xml .

De exemplu, dacă fișierul logo-ul dvs. este my_logo.png dimensiunea de 300x300px, trebuie să îl declarați după cum urmează:

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

Declararea dimensiunii logo-ului este opțională.

Vizitați blogul Magento pentru a citi tutorialul complet Magento 2 și pentru a actualiza cele mai recente tutoriale despre Magento 2.

Sursa: magento.com