TL: DR
Costruisci usando il luma nativo o il tema vuoto? O qualsiasi altra cosa ?
Dipende da te, dichiarare un tema genitore è facoltativo. Se non dichiari un genitore, tornerai comunque ai moduli (ad es. Magento_Catalog) che forniscono file XML e template ma senza stile.
Usi qualche estensione per aiutarti a sviluppare il tuo tema?
Dato che preferisco lavorare con SCSS e GULP ora uso Frontools e il tema SCSS vuoto . Elimina gran parte dello stress derivante dalla gestione del worflow Grunt / LESS predefinito.
Quali passi segui quando sviluppi un tema da zero?
- Dichiara il tema
- Rimuovi CSS tema principale (se richiesto)
- Aggiungi il tuo CSS / LESS / SCSS
La mia opinione personale è che è meglio creare il tuo "tema vuoto" da zero in quanto puoi personalizzare questo per essere esattamente ciò di cui hai bisogno.
Ecco come avrei creato un tema da zero, ho usato NewStore / default come nome del mio fornitore e tema.
Ora per la risposta più dettagliata ...
Crea il tema (come da documenti ufficiali)
Crea il tema secondo i documenti ufficiali
Facoltativamente dichiarando un genitore
All'interno app/design/frontend/NewStore/default/theme.xmlhai la scelta di dichiarare o meno un tema genitore, per questo esempio ho escluso la linea 3 ( <parent>Vendor/theme</parent>), quindi non esiste un tema genitore . Ciò significa che tutti i modelli / file di layout provengono dai moduli stessi e non da quelli vuoti o Luma, e non ci sarà uno stile del tema poiché questo viene aggiunto nel tema vuoto.
Il mio theme.xml è simile al seguente:
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>NewStore default</title>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>
Rimuovi lo stile (se imposti un tema principale) e aggiungi il tuo CSS
Se si imposta vuoto o Luma come genitore, sarà necessario impedire il caricamento dei file CSS. Per fare ciò, crea app/design/frontend/NewStore/default/Magento_Theme/layout/default_head_blocks.xmle aggiungi il seguente XML:
<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<!-- Remove blank/luma theme styling if you declared a parent -->
<remove src="css/styles-m.css" />
<remove src="css/styles-l.css" />
<remove src="css/print.css" />
<!-- Add your own CSS files -->
<css src="css/styles.css" />
</head>
</page>
Questo rimuove styles-m.css, styles-l.csse print.cssaggiunto dal tema vuoto. Aggiunge inoltre styles.css come base per il proprio CSS.
Se non hai specificato un genitore, puoi rimuovere i 3 <remove />tag nel codice sopra.
Aggiungi il tuo CSS
Ora puoi modellare il tuo tema come preferisci, sono un fan di Sass piuttosto che MENO, quindi ho aggiunto questo file - app/design/frontend/NewStore/default/web/css/styles.scss
Ho cambiato il colore di sfondo qui solo per provare che funziona, idealmente dovresti usare questo file solo per importare altri file Sass / Less.
Risultato
Il risultato di quello che ho appena fatto è un tema senza stile (a parte il mio bellissimo sfondo verde) che consente di modellare il tema senza lavorare con lo stile di Magento (a volte difficile da lavorare).
Suggerimenti
Se preferisci lavorare con SCSS e non hai il tempo di creare un tema da zero, ti consiglio di usare Frontools e il tema SCSS in bianco e nero di Snowdog Apps .
Trovo l'aspetto più frustrante nel lavorare con il codice front-end di Magento è quanto sia specifico il loro stile, per evitare questo consiglio di usare la convenzione di denominazione BEM quando scrivo il tuo stile.
Anche i commenti utili sono fondamentali, se uno sviluppatore abituato a lavorare con Luma / Blank lavorasse su un tema creato da zero probabilmente troverebbe le cose che funzionano in modo molto diverso da quello che si aspettano.