WordPress e modifica completa del sito: come creare un tema figlio e un tema a blocchi

Pubblicato: 2022-12-09

Quando dovresti usare un tema figlio per WordPress? È importante creare un tema figlio se prevedi di apportare modifiche personalizzate al codice.

In questo modo, quando il tema viene aggiornato, eventuali modifiche personalizzate al codice non verranno sovrascritte.

Tradizionalmente, quando si lavora con WordPress, ciò richiedeva la creazione di una copia di functions.php e style.css per creare il tema child e accodare il tema child al tema parent.

Con la diversa struttura dei file in Full Site Editing , è stato necessario apportare alcune modifiche per trovare tutti i file appropriati.

Fortunatamente, con la creazione del plug-in Create Block Theme di WordPress.org, creare non solo un tema figlio, ma anche un tema completamente personalizzato o una variazione di stile è più facile che mai.

Crea plug-in Tema a blocchi Screenshot da WordPress.org Plugin Repository, dicembre 2022

Impostazione del plug-in Crea tema a blocchi su WordPress

Innanzitutto, vorrai installare e attivare il tema del blocco di WordPress per il quale desideri creare il tuo nuovo tema o tema figlio - in questo caso, sto usando Twenty Twenty-Two.

Twenty Twenty-Two Screenshot dalla dashboard di WordPress, dicembre 2022

Quindi, procedi come segue:

Vai su Plugin > Aggiungi nuovo .

Nella finestra di ricerca, trova "Crea tema a blocchi".

Fare clic su Installa e attiva .

Pagina dei plugin Screenshot dalla dashboard di WordPress, dicembre 2022Con il plug-in installato, avrai alcune nuove opzioni in Aspetto, tra cui Crea tema a blocchi e Gestisci caratteri tema .

Opzioni di aspetto Screenshot dalla dashboard di WordPress, dicembre 2022

Creazione di un tema figlio di WordPress

Il plug-in Crea tema di blocco è un modo estremamente semplice per creare un tema figlio per un blocco, incluso un tema di modifica del sito completo. Il plug-in creerà automaticamente la cartella delle parti, la cartella dei modelli, theme.json e style.css.

Una volta installato il plugin, sei pronto per creare il child theme:

  • In Aspetto , seleziona Crea tema a blocchi .
  • Quindi seleziona Crea figlio di Twenty Twenty-Two (se hai selezionato un tema diverso, elencherà quel tema).
  • A destra, inserisci Nome tema, Descrizione tema, URI tema, Autore e URI autore.
  • Fare clic sul pulsante blu Genera per creare il tema figlio.
informazioni sul tema figlio Screenshot dalla dashboard di WordPress, dicembre 2022

Il tema figlio verrà esportato come file zip.

file zip del tema figlio Screenshot del file del tema figlio generato, dicembre 2022

In Aspetto > Temi , fai clic su Aggiungi tema e Carica tema e seleziona il file zip che è stato generato.

Vai su Temi e assicurati di vedere il tuo nuovo tema figlio.

Creazione di un'immagine personalizzata per un tema figlio di WordPress

Un difetto del plug-in è che non ti consente di aggiungere uno screenshot.png per il tuo tema figlio , né utilizza quello fornito con il tema principale.

Questo può essere facilmente risolto e fornisce un bel tocco personalizzato per il tuo tema figlio.

Usando il tuo editor di immagini preferito, crea una nuova immagine di dimensioni 1200px per 900px e chiamala screenshot.png.

Posiziona il nuovo screenshot.png all'interno della cartella del tema figlio che hai creato.

file nel tema figlio Screenshot dei file del tema per il child theme di WordPress, dicembre 2022

Torna ai temi e la tua nuova immagine dovrebbe apparire con il tema figlio.

Immagine del tema bambino attivo Screenshot dalla dashboard di WordPress, dicembre 2022

Ora che un tema figlio è impostato sul tema del blocco, è possibile apportare modifiche ai file modello theme.json e style.css senza sovrascrivere i file del tema principale.

In questo modo, il tema principale può essere aggiornato senza problemi.

Puoi anche esportare il nuovo tema figlio con le modifiche apportate, come l'immagine, da utilizzare come tema figlio per le nuove installazioni del tema genitore.

Creazione di un tema a blocchi personalizzato su WordPress

Il plug-in Crea tema di blocco fornisce una serie di opzioni per creare il tuo tema. Puoi clonare il tema corrente e apportare le tue modifiche personalizzate utilizzandolo come modello.

Dopo aver apportato le modifiche e esserne soddisfatto, puoi utilizzare il plug-in per esportare il tema con tutte le modifiche apportate per utilizzare il tuo nuovo tema su altri siti Web.

Inoltre, puoi creare un nuovo tema completamente vuoto che utilizza il tema corrente come boilerplate. Questo è un ottimo modo per creare qualcosa di completamente personalizzato.

Per creare un tema completamente nuovo, procedi come segue:

In Crea tema a blocchi , scegli Crea tema vuoto .

Compila tutte le informazioni sul lato destro, assegna un nome e aggiungi il tuo nome come creatore e premi Genera .

Crea un tema vuoto Screenshot dalla dashboard di WordPress, dicembre 2022

Il tuo nuovo tema verrà scaricato come file zip.

In Aspetto > Temi , puoi caricare e attivare il tuo nuovo tema.

Segui gli stessi passaggi del tema figlio, se desideri aggiungere un'immagine personalizzata per screenshot.png.

Attiva il nuovo tema e usalo come punto di partenza per il tuo nuovo tema.

nuovo tema vuoto Screenshot dalla dashboard di WordPress, dicembre 2022

Usa modelli, blocchi, parti di modelli e l'editor di stili per creare il tuo nuovo tema con l'aspetto desiderato.

Una volta completato il lavoro sul nuovo tema, torna su Aspetto > Crea tema a blocchi ed esporta il nuovo tema, che contiene tutte le modifiche apportate.

Verrà esportato come file zip e può essere caricato su qualsiasi nuova installazione di WordPress.

Gestione dei font dei temi di WordPress

Un'altra grande caratteristica del plug-in Create Block Theme è la possibilità di aggiungere ed eliminare facilmente i caratteri per il tema.

In genere, per aggiungere nuovi caratteri a un tema, è necessario scaricare i caratteri, aggiungerli alla cartella dei caratteri e accodarli nel file functions.php oppure è necessario aggiungere un collegamento Google al codice.

L'aggiunta di più caratteri può complicare ulteriormente il processo.

Con il plug-in, i caratteri Google e i caratteri locali del tuo computer possono essere aggiunti o rimossi facilmente dal tuo tema personalizzato o da un tema che hai installato e attivato.

Per i caratteri Google, fai clic su Aggiungi carattere Google e la finestra a discesa visualizzerà un elenco dei caratteri Google disponibili.

Seleziona il carattere, seleziona la casella di controllo e fai clic sul pulsante per aggiungere Google Font al tuo tema.

Gestisci i caratteri del tema Screenshot dalla dashboard di WordPress, dicembre 2022
Aggiungi caratteri Google Screenshot dalla dashboard di WordPress, dicembre 2022

L'aggiunta di un font locale che hai scaricato è un processo simile.

Fai clic su Aggiungi carattere locale , carica il file del carattere, inserisci il nome, lo stile e il peso del carattere e premi il pulsante per caricare il carattere locale nel tuo tema.

Font locali Screenshot dalla dashboard di WordPress, dicembre 2022

Temi figlio di WordPress semplificati

Con la modifica completa del sito e il plug-in Crea tema di blocco , creare il tuo tema e le variazioni di stile è più facile che mai.

L'utilizzo del plug-in invece di accodare manualmente i file e modificare il codice rende la creazione di temi figlio e l'aggiunta di nuovi caratteri un processo semplice.

Pattern , variazioni di stile e blocchi riutilizzabili se utilizzati con il plug-in sono ottimi modi semplici per creare il tuo tema personalizzato che puoi esportare e riutilizzare.

Il tutto senza la necessità di toccare alcun codice del tema.

Altre risorse:

  • Come creare una pagina 404 personalizzata in WordPress
  • Come scegliere il miglior tema WordPress per la SEO
  • SEO tecnico avanzato: una guida completa

Foto di presentazione: Kaspars Grinvalds/Shutterstock