Questo articolo fa parte del tutorial a puntate “Creare un tema WordPress personalizzato con _s e Bootstrap“, dove narro le mie peripezie per creare il mio primo tema in WordPress personalizzato, dopo aver sperimentato un tema troppo lento e insoddisfacente per il mio sito, seppure bello esteticamente.
==> Vuoi usare un tema già fatto per WordPress? Scopri i miei consigli
Imparare ad usare Less è stata una tappa obbligata, essendomi basata, per il mio tema, su un “base theme” costruito su base _s e poi integrato con Less e Bootstrap. Consiglio comunque il suo utilizzo a tutti i web designer, visto che velocizza ed uniforma enormemente il lavoro sui css. Imparare Less è utile, per chi lavora con i css, per migliorarsi la vita, migliorandosi il flusso di lavoro.
Consiglio innanzitutto di studiare il sito Less, per capire come funziona e quali strumenti utilizzare.
Less è un linguaggio complementare al CSS, consente di creare variabili (ad esempio un colore), e di applicarle in più punti del foglio di stile, senza doverle riscrivere ogni volta in più parti. Consente anche di nidificare gli stili, di organizzare meglio molteplici fogli css, e molto altro.
I file .less vanno poi compilati, ed avremo un normale css da includere nel sito.
Dopo le prime difficoltà a trovare un compilatore (ho provato SimpleLess ma mi dava errori), mi sono orientata su Crunch, perchè oltre a compilare correttamente i file, consente di editarli, con la giusta evidenziazione, e consente di lavorare su un progetto che comprende più file. Devi infatti sapere, che Dreamweaver non supporta i file .less, e vede il testo al loro interno completamente grigio.
I file .less del tema base _strap sono nella cartella bootstrap > less, inoltre nella root abbiamo style.less e style.css.
Style.less sarà l’unico file che andremo a compilare con Crunch, anche se modificheremo anche gli altri file .less.
Fondamentale, nella cartella bootstrap > less, il file variables.less, che contiene tutte le impostazioni di base del .css del tema.
E’ consigliabile non sovrascrivere i css esistenti, per evitare casini una volta che viene aggiornato Bootstrap, ma crearsi un file contententi le nostre variabili personali e un file css con le nostre classi, includendole in style.less.
Una volta chiara la struttura dei css del tema _strap, è molto semplice fare le modifiche, infatti le classi sono divise in vari file, per tipologia, ad esempio le classi che riguardano la tipografica sono in type.less, quelle della griglia in grid.css, ecc.
Piero Bellomo ha fatto un ottimo lavoro mantenendo nomi di file chiari e ben commentati.
Una volta iniziato il lavoro, ho poi proceduto spedita creandomi le mie classi e variabili per modificare il mio tema. La parte più interessante del lavoro è stato capire come erano strutturate le pagine del tema, quali erano i template utilizzati, e creare la grafica per ognuno di essi.
Per scoprire le soluzioni ai problemi che ho incontrato in questa fase vai alla alla puntata successiva: Aggiungere le pagine portfolio
Oppure torna alla puntata precedente del tutorial: Progettare la struttura di un tema WordPress
==> Vuoi usare un tema già fatto per WordPress? Scopri i miei consigli
