Come iniziare con i temi child di WordPress?

In questo tutorial imparerai come creare un tema figlio di WordPress. Se sei nuovo su WordPress e non sai cos’è un tema figlio di WordPress, ti spiegherò tutto.

I temi di WordPress sono una raccolta di file PHP, JavaScript e CSS. In parole semplici, con i temi WordPress, puoi cambiare l’aspetto del tuo blog. I temi di WordPress possono essere molto potenti.

I temi premium di WordPress offrono molte caratteristiche e funzionalità avanzate. Sono disponibili migliaia di temi WordPress gratuiti e premium.

Puoi creare un tema WordPress da zero oppure puoi creare un tema WordPress basato su un altro tema. Ogni versione di WordPress viene fornita con temi WordPress preinstallati e se non ti piace il tema WordPress preinstallato, puoi installare un altro tema WordPress o puoi creare un tema figlio.

Perché i temi child di WordPress?

Creare un tema figlio di WordPress significa prendere un tema esistente e creare il proprio tema basato su di esso. Il tema figlio eredita la maggior parte delle funzionalità dal tema originale, noto come tema principale.

Il tema figlio consente di risparmiare molto lavoro e tempo. La creazione di un tema WordPress da zero richiede molto tempo e talvolta è necessaria una conoscenza avanzata di HTML, CSS, PHP. Con i temi figlio, puoi apportare molte modifiche.

Se non sei soddisfatto della personalizzazione, delle opzioni e delle funzionalità fornite dal tema WordPress che stai utilizzando, puoi creare un tema figlio. Anche se desideri apportare una modifica al tuo tema WordPress, dovresti creare un tema figlio o utilizzare il plug-in dell’editor CSS.

Puoi modificare direttamente i file del tema WordPress esistente, ma poi, quando effettui un aggiornamento, perderai tutte le tue personalizzazioni. Ecco perché hai bisogno di un tema figlio.

Cosa puoi fare con i temi child di WordPress

Con i temi child di WordPress, puoi aggiungere tutte le funzionalità che desideri. Tocca a voi. Se desideri modificare la dimensione del carattere o il colore per intestazioni o collegamenti, puoi farlo molto facilmente con i CSS.

Puoi aggiungere nuovi menu di navigazione, registrare nuove barre laterali, creare pagine personalizzate per i prodotti o aggiungere il supporto per caratteri web personalizzati.

Di cosa avrai bisogno:

Ora che sai cos’è un tema figlio di WordPress e perché dovresti creare temi figlio, è ora di imparare come creare un tema figlio di WordPress.

Non è necessario, ma si consiglia di configurare un’installazione locale di WordPress a scopo di sviluppo e apprendimento. Con l’installazione locale di WordPress, puoi testare rapidamente e molto facilmente i tuoi nuovi plugin e temi.

Esistono molti modi per installare WordPress localmente, se sei un utente MAC, puoi utilizzare MAMP, gli utenti Windows possono utilizzare XAMPP, WAMP o Bitnami WordPress installer.

• Come installare WordPress con WAMP Server
• Come installare WordPress con MAMP
• Come installare WordPress con Bitnami Stack

Se sei un principiante assoluto, puoi scaricare e installare Bitnami WordPress stack per creare un sito Web WordPress completamente funzionante sul tuo MAC o PC.

Personalmente preferisco il server WAMP per lo sviluppo locale. Non è difficile installare WordPress su WAMP, puoi leggere tutorial o guardare video per imparare come installare WordPress usando WAMP, XAMPP o MAMP.

Avrai anche bisogno di un editor di codice per modificare i file del tema. Sublimetext, Brackets, Atom sono alcuni editor di codice popolari.

Come creare un tema figlio di WordPress?

Una volta che il tuo sito WordPress locale è pronto, possiamo iniziare a creare il nostro tema child. Se stai utilizzando il server WAMP, vai alla directory di installazione di WAMP > WWW > WordPress > wp-content > cartella temi.

Nella cartella dei temi di WordPress, crea una nuova cartella e chiamala ventisei-figlio o qualsiasi cosa ti piaccia, ad esempio InstantShift. Useremo il tema TwentySixteen come tema principale. Significa che il nostro tema figlio sarà basato sul tema TwentySixteen.

Per ogni tema figlio, abbiamo bisogno di due file.

• functions.php
• style.css

Con nella tua cartella del tema di ventisei figli crea questi due file. Ora apri i tuoi file nell’editor di testo, per un rapido accesso puoi trascinare la tua cartella di ventisei figli nella barra laterale dell’editor di testo. Apri il file style.css e aggiungi il seguente codice.

/*
 Theme Name:   InstantShift
 Description:  Twenty Sixteen Child Theme for InstantShift.
 Author:       Tahir Taous
 Author URI:   http://www.instantshift.com
 Template:     twentysixteen
 Version:      0.1
*/

Il markup sopra è richiesto per un tema figlio. Senza un foglio di stile con il markup necessario, WordPress non sarà in grado di riconoscere il tema figlio.

Penso che tu possa capire tutto. Non c’è niente da spiegare. Il nome del mio tema figlio è InstantShift ma puoi nominare tuo figlio come preferisci. La cosa più importante è Template: ventisedici. Questo è il nome del nostro tema genitore. Assicurati di scriverlo correttamente.

Se stai usando qualsiasi altro tema come tema principale, cambia semplicemente Template: ventisei con Template: nome-tema-genitore.

Nell’intestazione del foglio di stile possiamo anche aggiungere ulteriori informazioni, ma non è necessario. Ora accedi alla dashboard di WordPress. Vai su Aspetto > Temi. Dovresti vedere il tema InstantShift senza alcuno screenshot, perché non abbiamo aggiunto alcuno screenshot per il nostro tema child.

Passa il mouse sul tema InstantShift e fai clic sul pulsante Dettagli tema. Ecco lo screenshot del mio tema child.

Se riesci a vedere questa schermata, significa che il tema figlio è pronto. Ora possiamo iniziare a personalizzare il nostro tema. Attiva questo nuovo tema e visita il front-end del tuo blog. Vedrai tutti i tuoi contenuti senza alcuno stile.

Non preoccuparti. È normale. Non possiamo vedere alcuno stile perché non abbiamo incluso il file del foglio di stile dei temi principali. assicuriamoci che il foglio di stile del nostro child theme funzioni. Nel file style.css del tuo child theme aggiungi il seguente codice.

body{
     background-color: #E7F5FB;
}

salva il tuo file style.css, ricarica la prima pagina del tuo sito WordPress locale e dovresti vedere un colore di sfondo azzurro.

Registrazione del foglio di stile del tema principale

Non vogliamo creare tutti gli stili da zero. Aggiungeremo solo alcuni nuovi stili con il file style.css del tema child. Ora aggiungiamo il file stye.css del tema principale nel nostro tema figlio.

Apri il file functions.php e aggiungi il seguente codice nel file functions.php del tema child.

<?php
 
// Parent Theme Styles //
// https://codex.wordpress.org/Child_Themes //
 
function theme_enqueue_styles() {
    $parent_style = 'parent-style';
    ks29so_enqueue_style( $parent_style, get_template_directory_uri(). '/style.css' );
    ks29so_enqueue_style( 'child-style',
        get_stylesheet_directory_uri(). '/style.css',
        array( $parent_style)     );
}
add_action( 'ks29so_enqueue_scripts', 'theme_enqueue_styles' );

Ora, se ricarichi il tuo sito WordPress locale, vedrai il tema normale con tutti gli stili TwentySixteen.

È tutto. Hai creato con successo il tuo primo tema child. Hai anche aggiunto un nuovo colore di sfondo per il corpo.

Ma non abbiamo creato il tema figlio per cambiare semplicemente lo sfondo del corpo. Cominciamo a personalizzare il nostro tema.

Sovrascrivere gli stili del tema principale

Personalizzazione dell’intestazione:

Per impostazione predefinita, l’intestazione del tema Twenty Sixteen ha molto riempimento. Cambiamo il padding e aggiungiamo il nuovo colore di sfondo per l’intestazione del sito. Aggiungi il seguente codice nel file style.css del tema child, salva il file e ricarica il front-end del tuo sito per vedere le modifiche.

.site-header {
    padding: 0 4.5455%;
    background: #CDDC39;
    margin-bottom: 2em;
}

Qui puoi vedere lo screenshot per l’intestazione del sito prima e dopo aver aggiunto i nostri nuovi stili.

Personalizzazione della navigazione principale

Ora cambiamo il colore di sfondo per le voci del menu di navigazione principale. Mi piace utilizzare gli strumenti per sviluppatori di Chrome per modificare i miei stili CSS.

Dopo aver modificato le pagine Web con gli strumenti di sviluppo di Chrome, puoi copiare il nuovo codice dagli strumenti di sviluppo di Chrome e incollarlo nel file style.css del tema figlio.

Apri il file style.css del tema child e aggiungi il seguente codice.

#menu-header > li {
    background: rgba(185, 202, 22, 0.97);
    margin-right: 4px !important;
    border-radius: 5px;
}

Qui puoi vedere lo screenshot della nostra nuova intestazione. Abbiamo personalizzato molto facilmente il nostro tema con il tema figlio.

Parole finali

Ora sai come creare temi figlio di WordPress. È molto semplice e facile. Con la conoscenza di base di HTML e CSS, puoi cambiare completamente il design del tuo sito.

Puoi anche aggiungere nuovi menu di navigazione, aree widget, supporto per nuovi caratteri we ecc. Con il tema figlio. Ma non possiamo coprire tutto in un unico articolo.

Se vuoi imparare lo sviluppo del tema WordPress, dovresti iniziare con i temi child di WordPress. Impara le basi della personalizzazione del tema.