Magento 2: come creare un tema personalizzato in Magento 2

Esistono diversi modi per creare temi personalizzati in Magento 2. Si usa theme.xml, introdotto in Magento 1.9, e una nuova struttura di cartelle in Magento 2 che funziona in modo simile a Magento 1.x, ma ha il vantaggio aggiuntivo che puoi selezionare un numero illimitato di temi principali da cui ereditare e puoi configurare il file theme.xml nel tuo tema.

Supponiamo che tu voglia creare un tema nuovo di zecca basato sul nuovo tema “Blank” di Magento. Innanzitutto, dovresti creare una nuova cartella in app / design / frontend, ad esempio Magentiamo / simple. Dovresti quindi creare un file theme.xml in questa directory, percorso: app / design / frontend / Magentiamo / simple (probabilmente è meglio copiarlo da app / design / frontend / Magento / blank / theme.xml), In questo caso, vogliamo basarci sul tema Blank di Magento 2.

Creare un tema Magento 2

Quindi il tuo file app / design / frontend / magentiamo / theme.xml dovrebbe assomigliare a questo:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../lib/internal/Magento/Framework/Config/etc/theme.xsd"> 
   <title>Magentiamo Simple</title> 
   <parent>Magento/blank</parent> 
</theme>

Struttura del Tema

app/design/frontend/Magentiamo/
├── simple/
│   ├── etc/
│   │   ├── view.xml
│   ├── web/
│   │   ├── images
│   │   │   ├── logo.svg
│   ├── registration.php
│   ├── theme.xml
│   ├── composer.json

<Vendor> è il fornitore del tema. ad esempio: Magentiamo 

<theme> è il nome del tema. ad esempio: semplice

Creazione di una cartella del tema Magento

Creazione di una cartella per il tema:

• Vai su app / design / frontend
• Creazione di una cartella del fornitore app / design / frontend / <vendor> ad esempio: app / design / frontend / Magentiamo
• Crea una cartella di temi app / design / frontend / <vendor> / <theme> es: app / design / frontend / Magentiamo / simple

app/design/frontend/
├── Magentiamo/
│   │   ├──simple/
│   │   │   ├── ...
│   │   │   ├── ...

Dichiara il tuo tema

Ora abbiamo la cartella app / design / frontend / Magentiamoa / simple, ora crea un file chiamato theme.xml che definisce le informazioni di base sul tema come: Nome, tema principale (nel caso in cui il tuo tema erediti da un tema esistente), immagine di anteprima

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
     <title>Magentiamo Simple</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>

Pacchetto Composer

Composer è uno strumento per la gestione delle dipendenze in PHP. Ti permette di dichiarare le librerie da cui dipende il tuo progetto e le gestirà (installerà / aggiornerà) per te. Per distribuire il tema come pacchetto, aggiungi un file composer.json alla directory del tema e registra il pacchetto su un server di pacchettizzazione. esempio composer.json:

{
    "name": "magentiamo/simple",
    "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"
        ]
    }
}

 File registration.php

Puoi aggiungere il seguente contenuto per registrare il tema su Magento 

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

Devi poi cambiare Magentiamo con il nome del venditore

Creazione di file statici, cartelle

In un progetto ci sono molti file statici come javascript, css, immagini e caratteri. Sono archiviati in cartelle separate nella sezione web del pacchetto del tema.

Ecco la struttura:

app/design/<area>/Magentiamo/simple/
├── web/
│ ├── css/
│ │ ├── source/
│ ├── fonts/
│ ├── images/
│ ├── js/