Guida per creare un tema in Magento 2

Pubblicato: 2015-11-20

Ciao! Ti incuriosisce Magento 2.0 con tanti aggiornamenti e modifiche? Oggi vorremmo condividere con te un post sul blog su Guida per creare un tema in Magento 2. Tieniti sempre aggiornato esercitandoti ogni giorno.

Ultimo aggiornamento: abbiamo appena rilasciato la versione 2.0 di Claue Multipurpose Magento 2 Theme con una serie di miglioramenti delle prestazioni e funzionalità esclusive. Dai un'occhiata a questo tema ora: Claue Magento Theme 2. 0

claue2_edita (1)

Dimostrazione dal vivo

Claue - Clean, Minimal Magento 2 & 1 tema è un modello eccellente per un negozio di eCommerce moderno e pulito con 40+ layout di homepage e tonnellate di opzioni per negozio, blog, portfolio, layout di localizzazione del negozio e altre pagine utili. Claue versione 2.0 include una serie di funzionalità esclusive tra cui:

  • Essendo basato sul tema Luma.
  • Soddisfa tutti gli standard del tema Magento
  • Miglioramento significativo delle prestazioni
  • Compatibile con la maggior parte delle estensioni di terze parti.
  • Pienamente compatibile con Magento 2.4.x

Questa seconda versione avanzata si differenzia completamente dalla precedente. Pertanto, se stai utilizzando Claue versione 1 e desideri eseguire l'aggiornamento a Claue versione 2, puoi ricostruire un nuovo sito Web solo no anziché aggiornare dalla vecchia versione. Ora, torniamo all'argomento principale.

Il sistema dei temi è leggermente cambiato in Magento 2 ma ci sono delle somiglianze. Questo argomento illustra come creare i file che compongono un tema, come aggiungere un logo a un tema e come ridimensionare le immagini.

Crea una directory di temi

Per creare la directory per il tuo tema:

  1. Vai a <your Magento install dir>/app/design/frontend .
  2. Creare una nuova directory denominata in base al tuo nome del venditore: /app/design/frontend/<Vendor> .
  3. Nella directory del fornitore, crea una directory denominata in base al tuo tema.
 app/design/frontend/
├── <Venditore>/
│ │ ├──...<tema>/
│ │ │ ├── ...
│ │ │ ├── ...

Il nome della cartella corrisponde convenzionalmente alla denominazione utilizzata nel codice del tema: qualsiasi insieme alfanumerico di caratteri, come ritiene opportuno dal venditore, è accettabile. Questa convenzione è solo una raccomandazione, quindi nulla impedisce a nominare questa directory in un altro modo.

Dichiara il tuo tema

Dopo aver creato una directory per il tuo tema, devi creare theme.xml contenente almeno il nome del tema e il nome del tema principale (se il tema eredita da uno). Facoltativamente, puoi specificare dove è archiviata l'immagine di anteprima del tema.

  1. Aggiungi o copia da un tema esistente.xml al tuo theme.xml Directory app/design/frontend/<Vendor>/<theme>
  2. Configuralo usando il seguente esempio:
 <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>

Rendi il tuo tema un pacchetto Composer (opzionale)

I temi predefiniti di gento sono distribuiti come pacchetti Composer.

Per distribuire il tuo tema come pacchetto, aggiungi un file composer.json alla directory del tema e registra il pacchetto su un server di packaging. Un server di confezionamento pubblico predefinito è https://packagist.org/.

composer.json fornisce informazioni sulla dipendenza del tema.

Esempio di un tema 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" ] } }

È possibile trovare dettagli sull'integrazione del compositore nel sistema Magento nell'integrazione compositore.

Aggiungi registrazione.php

Per registrare il tuo tema nel sistema, nella directory del tuo tema aggiungi un file registration.php con il seguente contenuto:

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

Dove <Vendor> è il nome del tuo venditore, <theme> è il codice del tema.

Per un'illustrazione, vedere il file registration.php del tema Magento Luma.

Configura le immagini

Le dimensioni dell'immagine del prodotto e altre proprietà utilizzate nello storefront sono configurate in un file di configurazione view.xml . È necessario per un tema, ma è facoltativo se esiste nel tema principale.

Se le dimensioni dell'immagine del prodotto del tuo tema differiscono da quelle del tema principale o se il tuo tema non eredita da nessun tema, aggiungi view.xml seguendo i passaggi seguenti:

  1. Accedi al tuo server Magento come utente con i permessi per creare directory e file nella directory di installazione di Magento. (In genere, questo è il proprietario del file system Magento.)
  2. Crea la directory etc nella cartella del tuo tema
  3. Copia view.xml dalla directory etc di un tema esistente (ad esempio, dal tema Blank) nella directory etc del tuo tema.
  4. Configura tutte le dimensioni delle immagini dei prodotti in vetrina in view.xml . Ad esempio, puoi rendere quadrata la griglia della categoria visualizza le immagini dei prodotti specificando una dimensione di 250 x 250 pixel, ecco come sarebbe la configurazione corrispondente:
 ... <image id= "category_page_grid" type= "small_image" > <width> 250 </width> <height> 250 </height> </image> ...

Per i dettagli sulla configurazione di immagini in view.xml , consultare le proprietà Configura immagini per un argomento a tema.

Crea directory per file statici

Il tuo tema probabilmente conterrà diversi tipi di file statici: stili, font, javascript e immagini. Ciascun tipo deve essere archiviato in una sottodirectory separata di web nella cartella del tema:

 app/design/<area>/<Vendor>/<tema>/
├── web/
│ ├── css/
│ │ ├── fonte/ 
│ ├── caratteri/
│ ├── immagini/
│ ├── js/

In .../<theme>/web/images memorizzi i file statici relativi al tema generale. Ad esempio, il logo di un tema è archiviato in ...<theme>/web/images . È probabile che il tuo tema contenga anche file specifici del modulo, che sono archiviati nelle sottodirectory corrispondenti, come .../<theme>/<Namespace_Module>/web/css e simili. Gestire i file temi specifici del modulo è discusso nelle seguenti sezioni di questa guida.

La struttura della tua directory dei temi ora

A questo punto la struttura del file del tema appare come segue:

 app/design/frontend/<Vendor>/
├── <tema>/
│ ├── ecc/
│ │ ├── view.xml
│ ├── web/
│ │ ├── immagini
│ │ │ ├── logo.svg
│ ├── theme.xml
│ ├── composer.json

Logo a tema

Nell'applicazione Magento, il formato predefinito e il nome di un'immagine logo è logo.svg . Quando inserisci un'immagine logo.svg nella posizione convenzionale, che è <theme_dir>/web/images , viene automaticamente riconosciuta come logo del tema. Viene visualizzato nell'intestazione della pagina del negozio una volta applicato il tema.

Nel tema personalizzato, è possibile utilizzare un file logo con un nome e un formato diverso, ma potrebbe essere necessario dichiararlo.

La necessità della dichiarazione dipende dal fatto che il tuo tema abbia un tema dei genitori e la sua immagine del logo. Sono possibili i seguenti casi:

  • Il tuo tema non ha un tema principale:
    • Se il nome e il formato dell'immagine del logo sono predefiniti, logo.svg , non è necessario dichiararlo;
    • se il nome o il formato dell'immagine del logo non è predefinito, è necessario dichiararlo nel layout.
  • Il tuo tema ha un tema principale:
    • Se l'immagine del tuo tema logo ha lo stesso nome e il formato del logo del tema del genitore, non è necessario dichiararlo;
    • se l'immagine del tuo logo ha nome o formato diverso, dichiaralo nel layout.

Dichiarazione del logo del tema

Per dichiarare il logo di un tema, aggiungi un layout <theme_dir>/Magento_Theme/layout/default.xml .

Ad esempio, se il tuo file logo è my_logo.png di dimensioni 300x300px, è necessario dichiararlo come segue:

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

La dichiarazione della dimensione del logo è facoltativa.

Visita il blog di Magesolution per leggere il tutorial completo di Magento 2 e aggiornare gli ultimi tutorial su Magento 2.

Fonte: magento.com