Sage: il miglior Starter Theme per WordPress

A chi è rivolto questo articolo?

In questo articolo si parla principalmente di WordPress. Questo articolo è soprattutto per gli sviluppatori che lavorano con WordPress e cercano strumenti per migliorare la loro efficienza proprio come uno Starter Theme per WordPress.

Cosa è uno starter theme per WordPress?

Uno starter theme per WordPress è uno strumento molto utile per chi sviluppa attorno a questa piattaforma.
Ci permette di essere operativi con il nostro tema in pochi minuti ed avere tutti gli strumenti essenziali allo sviluppo. Non è necessario avere un child theme in quanto Sage non è pensato per essere aggiornato come i temi a pagamento che trovi sulle varie piattaforme di vendita come Theme Forest.

Perchè utilizzare Sage?

E’ importante sottolineare che Sage non è un framework.
Sage è uno starter theme per WordPress, può essere utilizzato come punto di partenza per i nuovi progetti, sia che parliamo di blog che di un e-commerce. Inoltre è molto semplice personalizzarlo e rimuovere tutti gli elementi di cui non abbiamo bisogno.

Sage è un software open-source continuamente aggiornato dal team di professionisti di Roots. Questo è un aspetto molto importante da valutare quando scegliamo un nuovo strumento con cui lavorare, anche quando parliamo di temi e di plugin.

Il team di Roots da la massima priorità alle performance e quando inizierai ad utilizzarlo potrai notare la differenza con altri temi.

Al suo interno troverai stumenti per gestire facilmente le dipendenze npm e Composer.
La gestione e l’ottimizzazione degli assets statici è fatta attraverso il famoso module bundler WebPack.
I template php sfruttano il sistema di templating Blade preso in prestito da uno dei più importanti framework php, Laravel.
La struttura di file e cartelle è veramente efficiente e ben suddivisa, tende a renderlo il più possibile modulare.

Non ti sembrano già questi dei buoni motivi per utilizzare uno starter theme come Sage?
Io da quando iniziato ad utilizzare Sage non ho più smesso e la mia produttività è raddoppiata!

Blade Template Engine

Sage utilizza il template engine di Laravel, Blade. Questo presenta una sintassi diversa da php e permette di avere un codice molto più compatto ed aumentare la leggibilità del codice.

I vari template file sono completamente stati rimossi dalla root del tema, questo aiuta alla separazione dei template dai file che non sono dei template tipo il functions.php.

I vantaggi di utilizzare un template engine come Blade?

• Ereditarietà dei template: questo ti permette di avere un approccio DRY (don’t repeat yourself) ed avere maggior controllo sui tuoi template.
• Separazione dei dati dalle viste: puoi passare le logiche del sito ai template invece che avere degli script PHP direttamente nelle viste, questo è utilissimo per separare la logica dalle viste ed aumentare il disaccoppiamento tra questi.
• Sintassi molto pulita

Controller SoberWP

Una particolarità molto importante che presenta Sage sono i Controller delle viste. Questi sfruttano la libreria SoberWP che permette di avere disponibili delle variabili nei template Blade utilizzando un certo stile di scrittura nei Controller.

Ad esempio il seguente codice permette di avere delle immagini caricate utilizzando Advanced Custom Field plugin all’interno della pagina singola di un articolo.

<?php

namespace App\Controllers;
use Sober\Controller\Controller;

class Single extends Controller {
    /**
     * Return images from Advanced Custom Fields
     *
     * @return array
     */
    public function images()
    {
        return get_field('images');
    }
}

Richiamando all’interno del template la variabile $images hai a disposizione l’intero array di immagini caricate nel post. Come si vede nel codice seguente utilizzando la sintassi del sistema di template Blade:

@if($images)
  <ul>
    @foreach($images as $image)
      <li>
        <img src="{{$image['sizes']['thumbnail']}}" alt="{{$image['alt']}}">
      </li>
    @endforeach
  </ul>
@endif

Sono bastate poche righe ed è tutto completamente modulare.
Per rendere disponibili tali variabili viene viene utilizzato come riferimento il Template Hierarchy di WordPress in quanto tutti i metodi creati all’interno del Controller Single saranno disponibili nelle pagine singole degli atricoli del blog. Per rendere disponibili dei metodi per l’archivio del blog non ti resta altro che creare un Controller di nome Archive.php ed il gioco è fatto.
Questo meccanismo vale per qualsiasi altro custom post type, per qualsiasi template di pagina purchè si rispetti la nomenclatura utilizzata dal Template Hierarchy di WordPress.

Browsersync

Per gli amanti del front-end Sage arriva con Browsersync già installato e pronto per l’uso. Se non lo sai questo strumento permette di risparmiare molto tempo durante lo sviluppo del front-end specialmente quando hai a che fare con mobile-first design.

Lanciando il comando yarn start dal terminale dalla cartella root del tema, browsersync inizierà a controllare le modifche fatte agli assets del front-end e ad iniettare automaticamente tutti i cambiamenti fatti all’interno della tua sessione del browser.
Questo vuol dire che durante lo sviluppo non devi continuamente salvare il file su cui stai lavorando e fare il refresh del browser per controllare le modifiche, Browsersync fa tutto questo per te, in modo completamente automatico. Incredibile vero? :)

Conclusioni

Queste sono le caratteristiche principali per cui ho iniziato ad apprezzare ed utilizzare Sage, ma ne presenta veramente molte altre che sono descritte dettagliatamente nella documentazione ufficiale sul sito, sulla repository github oppure acquistando la guida completa (cosa che ti consiglio vivamente se vuoi velocizzare il tuo apprendimento).

Il tema starter Sage è compatibile con diversi Hosting, io lo utilizzo sopratutto con SiteGround, il migliore hosting per WordPress nel 2022, leggi l’articolo che ho scritto su questo fantastico servizio consigliato anche da WordPress.org.

E tu utilizzi già uno starter theme? Ne sapresti consigliare qualcuno?
Fammelo sapere nei commenti!