Come creare un tema figlio di WordPress (video)

Stai cercando di creare un tema figlio in WordPress? Una volta apprese le basi di WordPress, probabilmente vorrai imparare come personalizzare il tuo sito WordPress. Riteniamo che i temi per bambini siano un ottimo punto di partenza per chiunque desideri personalizzare i temi di WordPress. In questo articolo, ti mostreremo come creare un tema figlio in WordPress.


Un semplice tema per bambini WordPress basato su Twenty Thirteen

Tutorial video:

Iscriviti a WPBeginner

Per coloro che non vogliono guardare il video, puoi continuare a leggere l’articolo di seguito.

Perché è necessario creare un tema figlio?

I temi secondari sono considerati il ​​modo migliore per personalizzare i temi di WordPress. Un tema figlio eredita tutte le caratteristiche e l’aspetto del tema principale. Puoi personalizzarlo senza influire sul tema principale. Ciò ti consente di aggiornare facilmente il tema principale senza preoccuparti di perdere le modifiche.

Puoi saperne di più sui temi dei bambini nel nostro articolo Cos’è un tema per bambini WordPress? Pro, contro e altro.

Requisiti

È necessaria una conoscenza di base di CSS / HTML, in modo da poter apportare le proprie modifiche. Una certa conoscenza di PHP sarebbe sicuramente di aiuto. Se sei bravo a copiare e incollare frammenti di codice da altre fonti, funzionerebbe anche quello.

Ti consigliamo di esercitarti nel tuo ambiente di sviluppo locale. Puoi spostare un sito WordPress dal vivo sul server locale a scopo di test o utilizzare contenuti fittizi per lo sviluppo di temi.

Iniziare

Qualsiasi buon tema WordPress può essere usato come tema principale. Tuttavia, ci sono molti tipi diversi di temi e alcuni potrebbero non essere i più facili da utilizzare. Per il bene di questo tutorial, useremo Twenty Thirteen, che è uno dei temi di WordPress predefiniti.

Creare il tema del tuo primo figlio

Per prima cosa devi aprire / wp-content / themes / nella cartella di installazione di WordPress e creare una nuova cartella per tuo figlio. Puoi nominare questa cartella come preferisci. Per questo tutorial lo chiameremo wpbdemo.

Creazione di un nuovo tema per bambini WordPress

Apri un editor di testo come Blocco note e incolla questo codice:

/ *
Nome tema: Tema figlio WPB
URI del tema: https://www.wpbeginner.com/
Descrizione: Un tema di ventitré bambini
Autore: WPBeginner
URI dell’autore: https://www.wpbeginner.com
Template: tredici
Versione: 1.0.0
* /

@import url ("../twentythirteen/style.css");

Ora salva questo file come style.css nella cartella del tema figlio che hai appena creato.

La maggior parte delle cose in questo file è autoesplicativa. Quello a cui vuoi davvero prestare attenzione è il Modello: ventitré.

Questo dice a WordPress che il nostro tema è un tema figlio e che il nome della directory del tema principale è ventitréquattro. Il nome della cartella principale fa distinzione tra maiuscole e minuscole. Se forniamo WordPress con Template: TwentyThirteen, allora non funzionerà.

L’ultima riga di questo codice importa il foglio di stile del tema principale nel tema secondario.

Questo è il requisito minimo per creare un tema figlio. Ora puoi andare a Aspetto »Temi dove vedrai WPB Child Theme. Devi fare clic sul pulsante Attiva per iniziare a utilizzare il tema figlio sul tuo sito.

Attivazione del tema figlio di WordPress

Dal momento che non hai ancora cambiato nulla nel tema del tuo bambino, il tuo sito utilizzerà tutte le funzionalità e l’aspetto del tema principale.

Personalizzare il tema del tuo bambino

Ogni tema di WordPress ha un file style.css nella sua directory principale. Principalmente questo è il foglio di stile principale del tuo tema in cui vanno tutti i CSS. Tuttavia, alcuni temi potrebbero contenere solo le informazioni dell’intestazione del tema. Tali temi di solito hanno file CSS situati in una directory separata.

Per questa sezione avrai bisogno di un po ‘di know-how CSS.

Google Chrome e Firefox sono dotati di strumenti di ispezione integrati. Questi strumenti ti permettono di guardare l’HTML e il CSS dietro qualsiasi elemento di una pagina web.

Se vuoi vedere il CSS utilizzato per il menu di navigazione, sposta semplicemente il mouse sul menu di navigazione e fai clic con il pulsante destro del mouse per selezionare Ispeziona elemento.

Utilizzo dello strumento Inspect Element in Google Chrome

Questo dividerà la schermata del browser in due parti. Nella parte inferiore dello schermo, vedrai l’HTML e il CSS per la pagina.

Ispettore Chrome che mostra le regole di rendering HTML e CSS

Mentre sposti il ​​mouse su diverse righe HTML, la finestra di ispezione di Chrome le evidenzierà nella finestra superiore. Come puoi vedere, abbiamo selezionato il menu di navigazione nello screenshot qui sopra.

Ti mostrerà anche le regole CSS relative all’elemento evidenziato nella finestra a destra.

Puoi provare a modificare il CSS proprio lì per vedere come sarebbe. Proviamo a cambiare il colore di sfondo di .navbar in # e8e5ce.

Giocare con CSS in Chrome Inspector

Vedrai che il colore di sfondo della barra di navigazione cambierà. Se ti piace, puoi copiare questa regola CSS e incollarla nel file style.css del tuo tema figlio.

.navbar {
colore di sfondo: # e8e5ce;
}

Salvare le modifiche apportate al file style.css e quindi visualizzare in anteprima il sito.

Ripeti la procedura per tutto ciò che vorresti cambiare nel foglio di stile del tuo tema. Ecco il foglio di stile completo che abbiamo creato per il tema figlio. Sentiti libero di sperimentare e modificarlo.

/ *
Nome tema: Tema figlio WPB
URI del tema: https://www.wpbeginner.com
Descrizione: Un tema di ventitré bambini
Autore: WPBeginner
URI dell’autore: https://www.wpbeginner.com
Template: tredici
Versione: 1.0.0
* /

@import url ("../twentythirteen/style.css");

.site-title {
imbottitura: 30px 0 30px;
}

.site-header .home-link {
altezza minima: 0px;
}

.navbar {
colore di sfondo: # e8e5ce;
}

.aggeggio {
colore di sfondo: # e8e5ce;
}
.piè di pagina {
colore di sfondo: # d8cdc1;
}
.site-footer .sidebar-container {
background-color: # 533F2A
}

Modifica dei file modello

Venti tredici layout

Ogni tema di WordPress ha un layout diverso. Diamo un’occhiata al layout del tema Twenty Thirteen. Hai intestazione, menu di navigazione, loop dei contenuti, area del widget piè di pagina, area del widget secondario e piè di pagina.

Ognuna di queste sezioni è gestita da diversi file nella cartella ventitre. Questi file sono chiamati modelli.

Il più delle volte questi modelli prendono il nome dall’area per cui sono utilizzati. Ad esempio, la sezione piè di pagina è generalmente gestita dal file footer.php, le aree di intestazione e navigazione sono gestite dal file header.php. Alcune aree, come l’area del contenuto, sono gestite da più file chiamati modelli di contenuto.

Innanzitutto è necessario selezionare il file del tema che si desidera modificare, quindi copiarlo nel tema figlio.

Ad esempio, desideri rimuovere il link “powered by WordPress” dall’area del piè di pagina e aggiungere qui una nota sul copyright. Copia semplicemente il file footer.php nel tema del tuo bambino e poi aprilo in un semplice editor di testo come Blocco note. Scopri le linee che desideri rimuovere e sostituiscile con le tue. Come questo:

<?php
/ **
* Il modello per visualizzare il piè di pagina
*
* Contiene il contenuto del piè di pagina e la chiusura degli elementi div #main e #page.
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
* /
?>

<?php get_sidebar (‘main’); ?>

© Copyright <?php echo date (Y); ?> <?php bloginfo (‘nome’); ?> Tutti i diritti riservati.



<?php wp_footer (); ?>

In questo codice, abbiamo sostituito venti tredici crediti con un avviso sul copyright.

La risoluzione dei problemi è molto più semplice durante la creazione di temi figlio. Ad esempio, se hai eliminato per errore qualcosa richiesto dal tema principale, puoi semplicemente eliminare il file dal tema secondario e ricominciare.

Aggiunta di nuove funzionalità al tema figlio

Troverai molti tutorial di WordPress che ti chiedono di copiare e incollare lo snippet di codice nel file Functions.php del tuo tema.

L’aggiunta di snippet di codice nel file Functions.php di un tema principale significa che le modifiche verranno sovrascritte ogni volta che è disponibile un nuovo aggiornamento per il tema principale. Questo è il motivo per cui è sempre consigliabile utilizzare un tema figlio e aggiungere tutti i frammenti di codice personalizzati nel file Functions.php del tema figlio.

Consente di creare un nuovo file nella cartella del tema figlio e di denominarlo funzioni.php. In questo esempio aggiungeremo un piccolo frammento di codice che cambierà l’immagine dell’intestazione predefinita nella nostra immagine personalizzata.

Abbiamo già creato un’immagine di intestazione e una miniatura modificando l’immagine di intestazione predefinita di Twenty Thirteen. Successivamente, lo abbiamo caricato nel nostro tema figlio all’interno della cartella / images / headers /.

Dopodiché dobbiamo dire a WordPress di utilizzare questa immagine come immagine di intestazione predefinita per il nostro tema. Possiamo farlo aggiungendo questo snippet di codice nel file Functions.php del nostro tema figlio:

<?php
funzione wpbdemo_custom_header_setup () {

add_theme_support (‘custom-header’, array (‘default-image’ => ‘% s / images / headers / circle-wpb.png’));

register_default_headers (array (
‘caramello’ => Vettore(
‘url’ => ‘% 2 $ s / immagini / intestazioni / circle-wpb.png’,
‘thumbnail_url’ => ‘% 2 $ s / immagini / intestazioni / circle-WPB-thumbnail.png’,
‘descrizione’ => __ (‘Caramello’, ‘Intestazione di caramello’, ‘ventitré’)
),
));

}
add_action (‘after_setup_theme’, ‘wpbdemo_custom_header_setup’);
?>

Ora se visiti Aspetto »Intestazione, sarai in grado di vedere l’immagine che abbiamo aggiunto come immagine predefinita.

Modifica dell'intestazione del tema nel tema figlio di WordPress

Puoi aggiungere qualsiasi frammento di codice personalizzato di cui hai bisogno nel file Functions.php del tuo tema figlio. Dai un’occhiata a questi oltre 25 trucchi estremamente utili per il file delle funzioni di WordPress.

Risoluzione dei problemi

Come principianti, dovresti commettere errori quando lavori sul tema del tuo primo figlio. Non arrenderti troppo in fretta. Controlla il nostro elenco degli errori WordPress più comuni per trovare una correzione.

L’errore più comune che potresti vedere è probabilmente l’errore di sintassi che si verifica in genere quando hai perso qualcosa nel codice. Ecco una guida rapida che spiega come trovare e correggere l’errore di sintassi in WordPress.

Risultato finale

Un semplice tema per bambini WordPress basato su Twenty Thirteen

Scarica Demo Theme

Puoi scaricare il risultato finale del nostro tutorial sui temi per bambini WordPress facendo clic qui. Ricorda che questo è un tema figlio di base basato su Twenty Thirteen.

Altri temi per bambini basati su venti tredici

Ecco alcuni altri temi figlio di WordPress basati su Twenty Thirteen. Dai un’occhiata e vedi come questi sviluppatori di temi hanno personalizzato Twenty Thirteen.

Holi

Holi - Un tema figlio di WordPress basato su Twenty Thirteen

fiore di ciliegio

Cherry Blossom - Tema per ventidue bambini

2013 blu

2013 blu

Portafoglio piatto

Portafoglio piatto

Speriamo che questo articolo ti abbia aiutato a imparare come creare un tema figlio di WordPress. Ricorda che c’è un sacco di supporto disponibile per coloro che ne hanno bisogno.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map