Se ami il tuo tema attuale ma vuoi modificarne le caratteristiche e l’aspetto, il modo corretto per farlo è personalizzare il suo tema figlio. Questo tutorial spiegherà perché questa pratica è necessaria e ti guiderà attraverso il processo in modo da poter creare e modificare un tema figlio di WordPress indipendentemente dalle tue capacità tecniche.
Crea e personalizza facilmente temi con l’hosting WordPress di Hostinger!,
Inizia qui
Perché dovresti usare WordPress Child Themes
Poiché un tema figlio eredita le caratteristiche di un tema principale o genitore, puoi personalizzare il suo codice senza rompere la funzionalità dell’originale. In questo modo, se un tema riceve un aggiornamento, tutte le modifiche apportate non verranno sovrascritte.
Un altro motivo per utilizzare un tema figlio è che offre una soluzione fail-safe se mai rovinare le modifiche. Inoltre, consente di monitorare in modo efficiente le parti modificate poiché i file di un tema figlio sono separati da quelli dei genitori.,
Come funzionano i temi figlio di WordPress
Come accennato in precedenza, un tema figlio viene memorizzato in una directory separata dal tema genitore, ognuno con il proprio stile.css e funzioni.file php. È possibile aggiungere altri file, se necessario, ma questi due sono il minimo indispensabile per un tema figlio per funzionare correttamente.
Utilizzando il relativo .css e .file php, è possibile modificare tutto, dallo stile, i parametri di layout per la codifica effettiva e gli script utilizzati da un tema figlio, anche se gli attributi non sono presenti nel suo tema genitore.
Pensalo come una sovrapposizione., Quando un visitatore carica il tuo sito web, WordPress carica prima il sotto-tema e quindi riempie gli stili e le funzioni mancanti utilizzando le parti del tema principale. Di conseguenza, ottieni il meglio dal tuo design personalizzato senza sacrificare le funzionalità di base del tema.
Creazione di un tema figlio in WordPress
Le seguenti istruzioni utilizzano Twenty Seventeen come base. È possibile utilizzare un altro tema, se si preferisce. Useremo anche il File Manager di Hostinger per aggiungere e modificare i file, anche se funziona anche FTP.,
Ora, senza ulteriori indugi, ecco come creare un tema figlio in WordPress:
- Accedi al tuo hPanel e fai clic su File Manager.
- Passare a public_html- > wp-content- > cartella temi.
- Crea una nuova cartella facendo clic sulla sua icona nel menu in alto. Inserisci il nome del tuo tema figlio e fai clic su Crea. Si consiglia di utilizzare il nome del tema principale seguito dal suffisso a-child. In questo esempio, abbiamo chiamato la cartella twentyseventeen-child.,
IMPORTANTE: sostituire gli spazi in una cartella o il nome di un file con trattini (-) per evitare errori.
- All’interno della cartella, creare uno stile.file css. Popola il suo contenuto con il seguente codice:
/* Theme Name: Twenty Seventeen Child Theme URL: http://yourdomain.comDescription: Twenty Seventeen Child Theme Author: Your NameAuthor URL: http://yourdomain.comTemplate: twentyseventeen Version: 1.0.0 Text Domain: twentyseventeen-child */
- Cambia tutti i valori di conseguenza. Il campo più importante è il modello perché dice a WordPress su quale tema genitore si basa il tema figlio. Una volta fatto, fare clic su Salva e Chiudi.
- Crea un altro file denominato functions.,php nella stessa cartella, ma non riempirlo con il codice dal file del tema principale perché deve rimanere separato. Invece, copia e incolla il codice sottostante nel file vuoto e salvalo:
<?phpadd_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );}?> - Visita il tuo sito web e accedi all’aspetto- > Tema. Attiva il tema figlio che hai appena creato e noterai che sembra lo stesso del tema genitore.
Come puoi vedere, creare un tema figlio di WordPress non è più complicato che lavorare con un tema principale!,
Personalizzazione del tema figlio
Per personalizzare il tema figlio, hai bisogno di una conoscenza di base delle regole CSS e delle conoscenze su come ispezionare gli elementi in modo da poter individuare il loro codice CSS e la classe a cui sono assegnati.
Ora, diamo un’occhiata alle basi della personalizzazione di uno. Per eseguire questa operazione, fare clic su Personalizza – > CSS aggiuntivo dal tema figlio attivo.,
Modifica del colore di sfondo
Inserisci la seguente regola CSS se desideri cambiare il colore di sfondo del tuo tema figlio di WordPress:
.site-content-contain { background-color: #DEF0F5; position: relative;}
Il valore accanto a background-color: corrisponde al codice esadecimale del colore scelto., In questo esempio, dal momento che lo stiamo cambiando dal bianco al blu chiaro, il risultato è il seguente:
Modifica del colore della barra laterale
Puoi creare una piacevole visualizzazione dei tuoi widget aggiungendo un po ‘ di colore alla barra laterale con il seguente codice CSS:
.widget {background: #B9EBFA;padding: 25px;}
Ancora una volta, non dimenticare di modificare il codice colore di conseguenza. Dovresti ottenere un risultato come questo:
Modifica di tipi di carattere, dimensioni e colori
Per modificare il tipo di carattere, la dimensione e il colore del tuo tema figlio di WordPress, inserisci il codice qui sotto:
p {color: teal;}p {font-family: Georgia;font-size: 18px;}
Il tag p sta per paragrafo., Come puoi vedere di seguito, la regola precedente ha cambiato l’aspetto dei caratteri del paragrafo in base ai valori specificati.
Per modificare il carattere di altre parti di testo, come il titolo o l’intestazione, ispezionare gli elementi per vedere prima i loro parametri CSS. Per motivi di illustrazione, proviamo a cambiare il colore del carattere del titolo.
- In primo luogo, fare clic destro sul testo e selezionare Ispeziona. Individuare il collegamento stile CSS e aprirlo in una nuova scheda.
- Trova la parte esatta che stai cercando usando CTRL+F e copia il codice nella scheda CSS aggiuntiva. Modificare i valori di conseguenza.,
Puoi fare lo stesso con qualsiasi altro elemento che desideri modificare.
Modifica del layout di post e pagine
Proprio come il CSS personalizzato di un tema figlio di WordPress sovrascrive lo stile del suo tema principale, i file modello consentono di creare i propri layout revocando quelli predefiniti.
Il nuovo modello deve avere lo stesso nome di file e trovarsi nelle cartelle corrispondenti all’originale. È una buona idea copiare il file del modello principale nella directory del tema figlio di WordPress e lavorare da quello.
I file principali del modello si trovano nella cartella principale del tema., Ad esempio, il modello per la visualizzazione di un singolo post è single.php, e il modello per le pagine è pagina.PHP.
Twenty Seventeen divide anche i suoi modelli in parti di template a cui si fa riferimento nel modello principale utilizzando la funzione WordPress get_template_part(). Ad esempio, se si desidera modificare la pagina.php, puoi iniziare individuando le parti del modello per vedere se questi sono i bit che devi modificare. Nel nostro file di esempio, la riga 28 legge:
get_template_part( 'template-parts/page/content', 'page' );
Come leggiamo questo? template-parts / page / è il percorso della cartella., Nel frattempo, ” contenuto “si riferisce al carattere nel nome del file prima del trattino e” pagina” è dopo il trattino.
Insieme formano il percorso completo di wp-content/themes/twentyseventeen/template-parts/page / content-page.PHP.
Seguendo la struttura, se si desidera modificare il layout del contenuto-pagina.php, è necessario copiarlo nella cartella del tema bambino e posizionarlo in questa posizione: wp-content/themes/twentyseventeen-child/template-parts/page/content-page.PHP.
E il gioco è fatto, felice editing!,
Aggiunta e rimozione di funzionalità
Un altro vantaggio significativo della creazione di un tema figlio di WordPress è la possibilità di avere funzioni separate.file php, che, proprio come i plugin, viene utilizzato per aggiungere (o rimuovere) alcune funzionalità utilizzando il codice PHP.
Ad esempio, le seguenti righe disabiliteranno la funzione di clic destro nel tema:
Conclusione
I temi figlio di WordPress offrono un modo potente per creare un progetto completamente nuovo basato sulle funzionalità del tema principale esistente senza interrompere la sua funzione principale., Con un po ‘ di semplice codifica e gestione delle directory, è possibile modificare il tema figlio come poco o quanto si desidera, fornendo una vasta gamma di possibilità per il vostro disegno.