Crea e personalizza un tema figlio di WordPress

Pubblicato: 2020-09-29

Se desideri apportare modifiche al tuo tema WordPress, probabilmente avrai sentito dire che un buon modo per farlo è creare e personalizzare un tema figlio di WordPress . Ma sai cos'è un tema figlio e perché è bene usarli? Se no, sei nel posto giusto.

Tema per bambini di WordPress

Avere un tema figlio implica che esiste anche un tema genitore. Una relazione genitore-figlio è qualcosa di cui hai sentito parlare se conosci un po' di programmazione. Quando si tratta di WordPress, in particolare, abbiamo una relazione genitore-figlio nei tipi di post personalizzati, ad esempio. La classe o un tema di un bambino è qualcosa che ha le caratteristiche del suo genitore ma può avere più caratteristiche aggiuntive, che lo renderanno diverso dal suo genitore. Quando si parla in termini di temi, un tema figlio viene installato insieme all'ora del genitore. Un tema figlio ci consente di modificare i temi principali, ma in modo sicuro, senza modificare direttamente il tema principale . Fondamentalmente, un tema figlio avrà la maggior parte della sua impostazione di progettazione uguale al tema principale. Tuttavia, se apporti alcune modifiche, queste modifiche sovrascriveranno le impostazioni iniziali.

Motivi per utilizzare un tema figlio

Nel caso ti stia chiedendo perché non apportare modifiche direttamente al tema principale, lo spiegheremo subito. Il motivo principale per cui non è una buona idea farlo è a causa degli aggiornamenti del tema. Affinché il tuo sito Web funzioni correttamente, desideri applicare gli aggiornamenti . Tuttavia, se personalizzi il tema principale, perderai tutte le modifiche ogni volta che aggiorni il tema, poiché le modifiche verranno sovrascritte.

Aggiornare.
Gli aggiornamenti sono importanti per la sicurezza del tuo sito web

Come funzionano i temi figlio di WordPress

Un tema figlio viene archiviato in una directory separata dal tema principale. Ogni volta ha i suoi file style.css e functions.php. Mentre devi avere almeno due file nella directory del tema figlio, affinché funzioni correttamente, puoi anche aggiungere altri file. I due file minimi essenziali possono aiutarti a modificare lo stile, la codifica, gli script e i parametri di layout. Quando un utente visita il tuo sito Web, WordPress carica il tema figlio e quindi riempie gli stili e le funzioni mancanti utilizzando parte del tema principale. Ciò ti consente di ottenere il meglio dal tuo tema figlio e personalizzarlo, senza sacrificare la funzionalità principale del tema principale.

Come creare un tema figlio

Esistono diversi modi per creare un tema figlio. Puoi farlo manualmente, utilizzando un client FTP o una directory di file, oppure puoi creare un tema figlio utilizzando un plug-in o un generatore online.

WordPress, il codice è poesia.
Senza plug-in, sarà necessaria una codifica

Manualmente

Per creare manualmente un tema figlio, dovrai utilizzare un client FTP o un file manager. Inoltre, nota che qui creeremo un file style.css basato sul tema Twenty Seventeen.

  • Tramite un client FTP o un file manager, accedi alla tua cartella public_html > wp-content > themes
  • Qui dovresti creare una Nuova cartella. Le convenzioni dicono che dovresti nominare questa cartella, con il nome del tema principale, ma aggiungere -child come suffisso. Qui, il nome della nuova cartella sarà ventidiciassette-bambino.
  • Crea un file style.css all'interno della cartella e aggiungi questo codice:
 /* Theme Name: Twenty Twenty Child Theme URL: http://yourdomain.com Description: Twenty Twenty Child Theme Author: Your Name Author URL: http://yourdomain.com Template: twentytwenty Version: 1.0.0 Text Domain: twentytwenty-child */
  • Regolare i valori secondo necessità. Presta particolare attenzione alla linea del modello, poiché indica a WordPress a quale tema principale è correlato il tuo tema figlio. Al termine, salva le modifiche e chiudi.
  • Usando un editor di testo, crea un altro file chiamato functions.php, ma non copiare il codice dal tema principale. Copia e incolla questo codice lì nel file vuoto:
 <?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); } ?>
  • Dopo aver salvato e chiuso questo file, visita il tuo sito Web e vai su Aspetto>Tema. Attiva il tema figlio e noterai che sembra proprio come il tema principale.

Utilizzo di un plug-in per temi figlio

L'utilizzo di un plug-in per temi figlio potrebbe essere più semplice e intuitivo. Ecco alcuni dei plug-in che puoi utilizzare Generatore di temi figlio, Configuratore di temi figlio o Procedura guidata tema figlio, ad esempio. Tieni presente che l'utilizzo dei plugin richiede anche una certa conoscenza. Ad esempio, potresti dover disabilitare un plug-in, senza accedere alla tua area di amministrazione, poiché potrebbe arrivare un momento in cui non avrai questo accesso. E ci vuole una certa abilità per farlo. Tuttavia, nel complesso, i plug-in sono generalmente facili da utilizzare, quindi non aver paura di usarli.

Utilizzo di un generatore online

L'uso di un generatore di temi figlio online rende questo processo ancora più semplice. Devi solo andare su https://childtheme-generator.com e seguire i passaggi. Quando crei e scarichi il tema, vai su Aspetto>Tema e carica e attiva il tuo tema figlio.

Come personalizzare il tema del bambino

Per personalizzare il tuo tema figlio, devi sapere come ispezionare gli elementi sulla pagina web e comprendere le regole CSS di base. Per personalizzare il tema figlio, dal tema figlio attivo, vai su Personalizza> CSS aggiuntivo.

Tempo di cambiare.
Se vuoi apportare alcune modifiche, questo è ciò che devi fare

Cambia colore di sfondo

Lo sfondo giusto gioca un ruolo importante nell'aspetto del sito web. Mentre puoi aggiungere un'immagine di sfondo in WordPress, qui parleremo solo di cambiare il colore di sfondo del tuo tema figlio. Per farlo, aggiungi questa regola CSS:

.site-content-contain {

colore di sfondo: #DEF0F5;

posizione: relativa;

}

Tieni presente che puoi modificare il valore dopo il colore di sfondo. Questo valore specifico è un valore di azzurro.

Cambia il colore della barra laterale

Questa è la regola CSS che dovresti inserire per cambiare il colore della barra laterale:

.widget {

sfondo: #B9EBFA;

imbottitura: 25px;

Personalizza i tipi di carattere, le dimensioni e il colore

Per modificare il tipo di carattere, la dimensione e il colore del tuo tema figlio di WordPress, inserisci il codice qui sotto. Nota che il tag p rappresenta il testo del paragrafo.

p {

colore: verde acqua;

}

p {

famiglia di caratteri: Georgia;

dimensione del carattere: 18px;

}

Puoi anche modificare il testo di altre parti, come titolo e intestazione, ma devi controllare gli elementi, individuare il collegamento in stile CSS, copiarlo e modificare i valori secondo necessità.

Conclusione

Se desideri personalizzare un tema, senza modificare direttamente il codice, i temi figlio sono un ottimo modo per farlo. Con questa guida potrai creare e personalizzare un tema figlio di WordPress e utilizzarlo per molte attività diverse . La parte migliore è che non perderai le modifiche dopo aver aggiornato il tema principale.