Magento 2: how to create a custom theme in Magento 2

Lascia un commento / Di /

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

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/

Configura le immagini dei prodotti del catalogo

Come puoi vedere nella struttura del tema che ho menzionato sopra, c’è un file chiamato etc / view.xml. Questo è il file di configurazione. Questo file è richiesto per il tema Magento 2 ma è facoltativo se esiste nel tema principale.

Vai su app / design / <area> / Magentiamo / simple / e crea una cartella etc e il file view.xml . Puoi copiare il file view.xml nel tema principale come tema vuoto app / design / frontend / Magento / blank / etc /view.xml

Aggiorna la configurazione dell’immagine per la pagina della griglia del prodotto del catalogo.

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

In view.xml, le proprietà dell’immagine sono configurate nell’ambito dell’elemento:

<images module="Magento_Catalog">
...
<images/>

Le proprietà dell’immagine sono configurate per ogni tipo di immagine definito dagli attributi id e type dell’elemento <image>:

<images module="Magento_Catalog">
	<image id="unique_image_id" type="image_type">
	<width>100</width> <!-- Image width in px --> 
        <height>100</height> <!-- Image height in px -->
	</image>
<images/>

Dichiara il logo del tema

In Magento 2 di predefinito, si utilizza <theme_dir> /web/images/logo.svg, nel tuo tema, puoi passare a diversi formati di file come png, jpg ma devi dichiararlo.

La dimensione del logo deve essere 300x300px e apri il file <theme_dir> /Magento_Theme/layout/default.xml

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

Elementi di layout di base

I componenti di base del design della pagina Magento sono blocchi e contenitori. Esiste un contenitore al solo scopo di assegnare la struttura del contenuto a una pagina. Un contenitore non ha contenuto aggiuntivo tranne il contenuto degli elementi inclusi. Esempi di contenitori includono l’intestazione, la colonna di sinistra, la colonna principale e il piè di pagina.

containers-magenta

Tipi di file di layout e convenzioni

File di layout del modulo e del tema

I seguenti termini vengono utilizzati per distinguere i layout forniti dai diversi componenti dell’applicazione:

  • Layout di base: file di layout forniti dai moduli. Posizione convenzionale:
    • Configurazione della pagina e file di layout generico: <module_dir> / view / frontend / layout
    • File di layout di pagina: <module_dir> / view / frontend / page_layout
  • Layout dei temi: file di layout forniti dai temi. Posizione convenzionale:
    • Configurazione della pagina e file di layout generico: <theme_dir> / <Namespace> _ <Module> / layout
    • File di layout di pagina: <theme_dir> / <Namespace> _ <Module> / page_layout

Creare un file di estensione del tema

Piuttosto che copiare un layout di pagina esteso o un codice di configurazione della pagina e quindi modificare ciò che si desidera modificare, nel sistema Magento è sufficiente creare un file di layout estensibile che contenga le modifiche desiderate. Per aggiungere una configurazione di pagina di estensione o un file di layout generico:

<theme_dir>
 |__/<Namespace>_<Module>
   |__/layout
     |--<layout1>.xml
     |--<layout2>.xml

Ad esempio, per personalizzare il layout definito in <Magento_Catalog_module_dir> /view/frontend/layout/catalog_product_view.xml, è necessario aggiungere un file di layout con lo stesso nome nel tema personalizzato, come segue: <theme_dir> /Magento_Catalog/layout/catalog_product_view.xml

<theme_dir>
 |__/<Namespace>_<Module>
   |__/page_layout
     |--<layout1>.xml
     |--<layout2>.xml

Sostituire i layout di base

L’override non è necessario se un blocco ha un metodo che annulla l’effetto del metodo originariamente invocato. In questo caso, è possibile personalizzare il layout aggiungendo un file di layout in cui viene richiamato il metodo di annullamento.

Per aggiungere un file di layout di base sostitutivo (per sovrascrivere un layout di base fornito dal modulo): Metti un file di layout con lo stesso nome nel seguente percorso:

<theme_dir>
  |__/<Namespace_Module>
    |__/layout
      |__/override
         |__/base
           |--<layout1>.xml
           |--<layout2>.xml

Questi file sovrascrivono i seguenti layout:

  • <module_dir> / view / frontend / layout / <layout1> .xml
  • <module_dir> / view / frontend / layout / <layout2> .xml

Sostituire i layout del tema

Per aggiungere un file del tema sovrascrivente (per sovrascrivere il layout di un tema principale):

<theme_dir>
  |__/<Namespace_Module>
    |__/layout
      |__/override
         |__/theme
            |__/<Parent_Vendor>
               |__/<parent_theme>
                  |--<layout1>.xml
                  |--<layout2>.xml

Questi file sovrascrivono i seguenti layout:

  • <parent_theme_dir> / <Namespace> _ <Module> / layout / <layout1> .xml
  • <parent_theme_dir> / <Namespace> _ <Module> / layout / <layout1> .xml

Suggerimenti!

– Modifica del nome del blocco o alias. Il nome di un blocco non deve essere modificato e nemmeno l’alias di un blocco che rimane nello stesso elemento genitore.

– Modifica dell’ereditarietà della maniglia. Ad esempio, non modificare l’handle principale del tipo di pagina.

Congratulazioni! Ora hai il tuo primo semplice tema Magento 2.

Did you like this article? Vote for it!

Related Posts

Back to top