Crea un tema figlio in WordPress Tutorial passo dopo passo

In questo post imparerai come creare un tema figlio in WordPress passo dopo passo, tutte le basi dei temi figlio di WordPress.

Imparerai come importare gli stili CSS del tema principale, come sovrascrivere gli stili del tema principale e perché dovresti creare temi figlio di WordPress.

Per scoprire perché i temi figlio di WordPress sono importanti, dovresti leggere la nostra Guida per principianti allo sviluppo di temi per genitori e figli di WordPress

Cosa puoi fare con i temi figlio di WordPress?

Con i temi figlio di WordPress, puoi personalizzare molto facilmente il tuo tema WordPress attivo predefinito. Non è necessario conoscere HTML avanzato, CSS, PHP o JavaScript per creare temi figlio.

Potrebbe essere molto utile una conoscenza di base o buona di HTML, CSS e PHP.

Ulteriori letture: come scegliere un tema WordPress gratuito o premium perfetto

Puoi utilizzare un tema figlio di WordPress per modificare il tuo sito con CSS, aggiungere nuove aree widget, menu di navigazione aggiuntivi, modificare file personalizzati per creare nuove pagine con uno stile personalizzato.

Con i temi figlio, puoi anche riordinare gli elementi del sito, aggiungere nuovi contenuti/elementi e modificare qualsiasi funzionalità.

Perché dovresti creare un tema figlio di WordPress

Il motivo per cui esistono temi figlio è che puoi personalizzare un tema "genitore" (il tuo esistente/attivo) senza perdere le modifiche e le modifiche quando aggiorni il tema principale.

Ad esempio, se hai modificato direttamente il file single.php, le tue personalizzazioni all'inizio funzionerebbero bene.

Tuttavia, quando aggiornerai il tuo tema a una versione più recente del tema modificato, perderai tutte le modifiche e non sarà possibile ripristinare la personalizzazione.

Quello che ti serve

Puoi creare rapidamente un tema figlio e caricarlo sul tuo server, ma si consiglia di installare WordPress localmente sul tuo PC.

Con l'installazione locale di WordPress, puoi creare e testare rapidamente il tuo tema, non hai bisogno di una connessione Internet tutto il tempo.

Con il sito WordPress locale, puoi commettere errori senza influire sul tuo sito live ed è molto più veloce e migliore.

Esistono molti modi per installare WordPress localmente su Windows, MAC o Linux. Leggi questo tutorial, per sapere come installare WordPress su PC locale con lo stack Bitnami WordPress.

Abbiamo già pubblicato tutorial passo passo per principianti.

Come installare WordPress sul server WAMP in Windows 8

Come installare WordPress su Windows 8 utilizzando Bitnami Stack

come creare un tema figlio nella guida passo passo di WordPress?

Per ogni tema figlio in WordPress, sono necessari due file.

• funzioni.php
• style.css

Nel file style.css, possiamo aggiungere informazioni sul nostro tema figlio, ad esempio nome del tema, descrizione del tema, nome dell'autore, dettagli del tema principale, tag ecc.

Abbiamo anche bisogno di un file functions.php per registrare il foglio di stile del tema genitore e figlio. Con il file functions.php possiamo anche aggiungere nuove funzioni, registrare nuovi menu di navigazione, aree widget ecc.

Quindi iniziamo a creare il tuo primo tema figlio. In questo tema figlio, non aggiungeremo nuove aree widget, menu di navigazione, ecc. Useremo il nostro tema figlio per apportare alcune semplici modifiche CSS, sovrascriveremo gli stili CSS predefiniti.

Puoi utilizzare qualsiasi tema WordPress come tema principale, per questo tutorial creerò un tema figlio per il tema TwentySixteen.

Crea una nuova cartella e salvala come 261-child oppure puoi nominarla come preferisci, ad esempio design.

Crea due nuovi file e salvali come file functions.php e style.css nella nostra cartella del tema figlio. Il nome della cartella del tema di mio figlio è designbomb.

Ora aggiungi le seguenti informazioni nel file style.css del tuo tema figlio e salva il file.

 /* Theme Name: Design Child Description: A simple child theme for design blog. Author: Tahir Taous Version: 0.1 Template: twentysixteen */

Ora accedi alla dashboard di WordPress. Vai su Aspetto > Temi > Aggiungi nuovo e carica questo nuovo tema figlio. Vedrai un nuovo tema senza alcuno screenshot. Passa il mouse sul tema e fai clic sul pulsante Dettagli tema.

Vedrai i seguenti dettagli per il tuo nuovo tema figlio.

Nello screenshot sopra, puoi vedere tutte le informazioni di base sul nostro tema figlio. Nome del nostro tema figlio, che è l'autore di questo tema, descrizione del tema figlio e puoi anche vedere Questo è un tema figlio di Twenty Sixteen. Messaggio.

Abbiamo aggiunto Modello: ventisei nel file style.css del nostro tema figlio. Questa riga dice a WordPress che ventisedici è il tema principale.

Se stai utilizzando un altro tema, sostituisci TwentySixteen con il nome del tuo tema principale.

Ora attiva il tuo nuovo tema figlio e ricarica la tua prima pagina. Dovresti vedere tutto il contenuto senza alcuno stile. Non preoccuparti, è normale. Questo perché non abbiamo incluso il file style.css del nostro tema genitore e figlio

Dopo aver attivato il nuovo tema figlio, vai su Aspetto > Editor e seleziona il file functions.php (Funzioni del tema), aggiungi il codice seguente nel file functions.php e fai clic sul pulsante Aggiorna file per salvare le modifiche.

 <?php function theme_enqueue_styles() { $parent_; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Ora visita il front-end del tuo sito WordPress e ricarica la tua pagina, dovresti vedere il sito normale con tutti gli stili di TwentySixteen.

Modifica degli stili esistenti

Significa che il nostro tema figlio è pronto, è ora di personalizzare il nostro tema principale con nuovi stili CSS. Ora in Aspetto> Editor seleziona il file style.css. Stiamo per aggiungere alcuni nuovi stili.

Aggiungi il seguente stile nel file style.css del tuo tema figlio e salva il file.

 .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a { font-weight: 700; background: beige; border-radius: 5px; color: #D2691E; box-shadow: 2px 1px 8px #815317; }

ricarica il front-end del tuo sito e apri qualsiasi pagina. Abbiamo modificato gli stili predefiniti per la voce di menu corrente. Vedi screenshot qui sotto.

Per la voce di menu corrente, ho aggiunto un nuovo colore di sfondo, raggio del bordo, colore e ombra del riquadro. È stato molto semplice e facile cambiare gli stili con gli strumenti di Chrome Dev.

È tutto

Ora sai come creare un tema figlio. Non era così semplice e facile. Con i temi figlio di WordPress, puoi personalizzare quasi tutti i file del tuo tema principale, ma non è consigliabile modificare tutti i file del tuo tema principale.

Usa sempre temi figlio per aggiungere funzioni, caratteristiche o pagine personalizzate necessarie.

Scarica il tema del bambino Disegni