Come creare un tema figlio a blocchi in WordPress

Pubblicato: 2023-07-14

Immagina questo scenario: hai appena trovato un tema quasi perfetto da utilizzare sul tuo sito web. È ben progettato, include i layout desiderati, ma si desidera modificare la tavolozza dei colori e impedire ai clienti di modificare alcune aree. Sfortunatamente, il tema che stai utilizzando non ti consente di rimuovere i colori predefiniti o i blocchi di blocco.

Sebbene tu possa modificare direttamente i file del tema, tutte le tue modifiche andranno perse quando eseguirai gli aggiornamenti del tema. Potresti aggiungere un po' di CSS personalizzato utilizzando un plug-in di snippet di codice, ma ciò non altererà le opzioni di stile disponibili per gli utenti che hanno effettuato l'accesso.

Che cosa si può fare? Come si modificano le opzioni disponibili di Global Style? Per questo, hai bisogno di un tema figlio a blocchi.

Che cos'è un tema figlio di WordPress?

Secondo la documentazione per gli sviluppatori di WordPress:

Un tema figlio eredita l'aspetto del tema principale e tutte le sue funzioni, ma può essere utilizzato per apportare modifiche a qualsiasi parte del tema. In questo modo, le personalizzazioni vengono mantenute separate dai file del tema principale. L'utilizzo di un tema figlio ti consente di aggiornare il tema principale senza influire sulle personalizzazioni che hai apportato al tuo sito.

Quindi, per utilizzare un tema figlio in WordPress, è necessario che sia installato anche il tema principale. Il tuo tema child eredita tutto dal genitore, con l'aggiunta di alcune varianti.

Come creare un tema child

Preferiresti un'opzione di codice per personalizzare lo stile del tuo sito? Come l'override di altri temi WordPress, l'utilizzo di un child theme è il modo migliore per ignorare il codice. Quando il tema si aggiorna, il codice del tema figlio rimarrà.

In questo articolo, trattiamo i componenti chiave di ciò che rende un buon tema figlio di WordPress e forniamo risorse di lettura approfondite.

1. Quando utilizzare un tema figlio a blocchi

I temi child sono spesso un'ottima soluzione. Tuttavia, se stai cercando di aggiungere solo un po' di codice CSS, un intero tema figlio potrebbe essere eccessivo. Prendi in considerazione un plug-in come Code Snippets per aggiungere solo un po' di personalizzazione.

Personalizzazione dei siti dei clienti

Quando crei siti per i clienti, c'è qualche personalizzazione aggiuntiva che potresti voler offrire.

Se desideri controllare la possibilità per gli utenti di inserire nuovi blocchi, spostare blocchi esistenti o eliminare blocchi, potresti voler implementare il blocco dei blocchi. Puoi imparare come bloccare i blocchi e altro in questo tutorial introduttivo.

Creazione di variazioni del tema

Oltre a definire quali aree del layout del tema i client possono modificare, potresti anche voler modificare le opzioni della tavolozza dei colori, omettendo ciò che viene fornito di default con il tema o WordPress e aggiungendo opzioni uniche. Puoi anche definire sfumature e opzioni di due tonalità che dovrebbero essere disponibili anche nel tuo tema.

2. Scegli un buon tema WordPress

Non tutti i temi sono creati allo stesso modo. Oltre a ciò che si vede nel design del tema, la selezione di un tema principale implica fattori aggiuntivi come la frequenza degli aggiornamenti, la qualità del supporto, la documentazione e la reputazione dello sviluppatore del tema. Scopri di più in Come utilizzare i temi WordPress per creare un sito web.

3. Creare un ambiente di test

Ormai hai scelto il tema principale, raccolto le risorse del marchio e deciso quali impostazioni desideri sovrascrivere. Successivamente, dovrai configurare un ambiente di test.

Se utilizzi un provider di hosting WordPress gestito come l'hosting WordPress gestito di GoDaddy, puoi utilizzare il tuo sito di gestione temporanea con un clic come ambiente di sviluppo. Se utilizzi qualcosa come cPanel o VPS per l'hosting, puoi impostare un'installazione separata di WordPress e clonare o copiare il tuo sito esistente nella nuova installazione.

Se non stai applicando il tema figlio a un sito esistente o se preferisci creare da zero, puoi creare un ambiente di sviluppo WordPress locale sul tuo computer utilizzando uno strumento come MAMP o DesktopServer di ServerPress.

4. Crea la tua directory dei temi

Per prima cosa dovrai installare il tema principale. Quindi, utilizzando un client FTP, connettiti al tuo ambiente di sviluppo e vai a dove si trovano i tuoi file WordPress.

Stai cercando la seguente cartella:

 /wp-content/temi/

È lì che puoi trovare tutti i tuoi temi WordPress installati. Ogni tema ha la propria cartella o directory che contiene tutti i file del tema. Stai per aggiungere una nuova directory all'elenco, che conterrà il tema figlio. Finirai con qualcosa del tipo:

 /wp-content/themes/your-child-theme/

5. Crea i tuoi file del tema

Per il nostro esempio, assumeremo di utilizzare il tema Twenty Twenty Two. Dovrai avere quel tema installato affinché il tema figlio possa fare riferimento ad esso.

All'interno della nuova cartella della directory del tema figlio, creerai due nuovi file:

 style.css
tema.json

Entrambi questi file hanno uno scopo specifico. Il file style.css viene utilizzato per fornire a WordPress informazioni sul tema, come il nome, l'autore, i tag e l'ID del tema principale.

Il file theme.json viene utilizzato per definire le numerose impostazioni in Global Styles e altro ancora. Scopri di più su theme.json dal manuale per sviluppatori.

Nei precedenti temi Classic, il file functions.php era necessario nei child theme. I temi figlio di blocco non richiedono questi passaggi.

Stile.css

Cosa appartiene al tuo file style.css ? La documentazione per gli sviluppatori dice:

Il tuo foglio di stile deve contenere il commento di intestazione richiesto di seguito nella parte superiore del file. Questo fornisce a WordPress le informazioni di base sul tema, incluso il fatto che si tratta di un tema figlio con un particolare genitore.

Dovrai includere il boilerplate nel file style.css contenente le informazioni di intestazione. Il nome del modello: corrisponde al nome della cartella (directory) del tema principale su cui stai costruendo. Il dominio di testo : il nome è univoco per il tuo tema figlio di WordPress.

Di seguito è riportato un esempio di tema child che utilizza Twenty Twenty Two:

 /*
Nome del tema: Twenty Twenty-Two Child
URI del tema: https://example.com/
Autore: Il tuo nome
URI dell'autore: https://example.com/
Descrizione: Twenty Twenty Two Child Theme
Richiede almeno: 5.8
Testato fino a: 5.9
Richiede PHP: 5.6
Versione: 0.1
Licenza: GNU General Public License v2 o successiva
URI licenza: http://www.gnu.org/licenses/gpl-2.0.html
Dominio del testo: ventidue-figli
Modello: ventidue
Tag: colori personalizzati, menu personalizzato, logo personalizzato, stile editor, immagini in primo piano, modifica completa del sito, schemi di blocco

Tema WordPress Twenty-Twenty-Two Child, (C) 2021 WordPress.org
Twenty Twenty-Two Child è distribuito sotto i termini della GNU GPL.
*/

Tema.json

Consulta la documentazione per gli sviluppatori per un'analisi più approfondita di theme.json. Diamo un'occhiata al file Twenty Twenty Two theme.json:

 {
 "versione": 2,
 "impostazioni": {},
 "stili": {},
 "template personalizzati": {},
 "templateParts": {}
}

All'interno di ciascuno di questi sono disponibili ulteriori stili. Ad esempio, nell'area dello stile, Twenty Twenty Two utilizza:

 {
 "impostazioni": {
 "appearanceTools": vero,
 "colore": {
 "duotoni": [
 {
 "colori": [
 "#000000",
 "#ffffff"
 ],
 "slug": "primo piano e sfondo",
 "name": "Primo piano e sfondo"
}

Hai bisogno di aiuto per creare un file theme.json? Dai un'occhiata a themegen.app per una guida che crea molte delle scelte per il tuo file theme.json.

6. Personalizzazione del tema figlio a blocchi

Mentre potresti creare facilmente il tuo file theme.json e aggiungerlo al tuo tema, ci sono alcune altre scelte da fare. I temi child e persino i block theme sono una nuova area per WordPress. L'editor del sito ha chiaramente un'etichetta beta su di esso al momento di questo post. Ti consigliamo di fare riferimento per vedere cosa funziona e cosa non funziona ancora nei temi figlio, come le parti del modello.

Inoltre, potresti trovare impostazioni che Global Styles e theme.json non supportano ancora. Se stai aggiungendo altri CSS, come un bordo del blocco di gruppo con un'ombreggiatura, potresti volerlo aggiungere al tuo file style.css .

 .ha-colore-del-bordo-primario {
 box-shadow: .1rem .1rem .05rem #647BAF ;
}

7. Metti alla prova il tuo tema figlio

Una volta che senti che il tuo sito ha un bell'aspetto nel tuo attuale ambiente di sviluppo, è il momento di fare un test prima di caricarlo su un sito live.

  • Prova in varie dimensioni del browser, come i viewport per dispositivi mobili
  • Prova in diversi browser o usa uno strumento come BrowserStack
  • Rivedere gli standard di accessibilità. Inizia con WebAim

8. Preparati a caricare il tuo tema figlio a blocchi

Se hai sviluppato su un sito di staging, i tuoi file sono esattamente dove devono essere. Puoi visitare le opzioni di hosting per rendere attivo il sito di staging. Se hai creato file in un ambiente di sviluppo locale, è il momento di comprimere i file style.css e theme.json insieme in un unico file zip e caricarli sul tuo sito.

Ricapitolando la creazione del tuo tema figlio a blocchi

  1. Decidi se hai bisogno di un tema figlio a blocchi
  2. Scegli un tema principale
  3. Configura il tuo ambiente di test
  4. Crea la tua directory dei temi
  5. Crea i tuoi file del tema
  6. Personalizza il tuo tema figlio a blocchi
  7. Metti alla prova il tuo tema figlio
  8. Caricali sul sito live

Come i temi classici in WordPress, i temi a blocchi necessitano comunque di un posto in cui archiviare le personalizzazioni che non verranno sovrascritte quando il tema principale riceve un aggiornamento. La creazione di un tema figlio a blocchi consente di aggiungere, bloccare e omettere le opzioni disponibili per altri utenti sul sito.