Vai al contenuto
Home » IL Blog del mondo IRC e Linux » Tema child di WordPress come crearlo? (Guida per principianti)

Tema child di WordPress come crearlo? (Guida per principianti)

vantaggi di wordpress e come velocizzare

Stai cercando di capire come creare un tema child in WordPress?

Una volta apprese le basi di WordPress, probabilmente vorrai imparare come personalizzare il tuo sito WordPress. I temi figlio sono un ottimo punto di partenza per chiunque cerchi di personalizzare i temi di WordPress.

In questo articolo, ti mostreremo come creare un tema child di WordPress in modo molto semplice e per principianti

Leggi anche: Come installare wordpress su vps.

 

Perché hai bisogno di un tema child su wordpress?

Un tema child o figlio se preferite, è un tema WordPress che eredita la funzionalità, le caratteristiche e lo stile di un altro tema WordPress, il tema principale. È quindi possibile personalizzare il tema figlio senza apportare modifiche al tema principale.

I temi child sono il modo migliore per personalizzare un tema WordPress perché fanno risparmiare tempo e fatica. Il tema principale contiene già molta formattazione e funzionalità, quindi non devi codificare tutto da zero.

Inoltre rendono sicuro l’aggiornamento dei tuoi temi WordPress . Poiché hai modificato il tema child e non il genitore, non perderai alcuna personalizzazione quando aggiorni il tema principale.

Una volta che sei soddisfatto del tema figlio, puoi persino usarlo su un altro sito WordPress.

Leggi anche: I Temi wordpress migliori del 2022

 

Prima di iniziare a creare un tema figlio su Wordpress

Per creare un tema figlio, dovresti essere consapevole che lavorerai con il codice. Avrai bisogno di una conoscenza di base di HTML e CSS per capire quali modifiche devi apportare al codice per raggiungere i tuoi obiettivi.

Anche una certa conoscenza di PHP è utile. Dovresti almeno avere familiarità con il copiare e incollare frammenti di codice da altre fonti.

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

Infine, devi decidere un tema principale. Dovresti scegliere un tema principale che sia simile nell’aspetto e nelle caratteristiche al tuo obiettivo finale. L’obiettivo è quello di apportare il minor numero di modifiche possibile.

In questo articolo, utilizzeremo il tema Twenty Twenty-One, che è uno dei temi predefiniti di WordPress.

 

Creazione del tuo primo tema child su Wordpress

Puoi creare un tema child manualmente creando la cartella e i file necessari. Oppure puoi creare un tema child usando un plugin.

Il metodo manuale è utile perché ti aiuterà a familiarizzare con i file con cui devi lavorare più avanti nel tutorial. Il metodo del plug-in può essere utilizzato se hai difficoltà a creare quei file.

Devi solo utilizzare un metodo e puoi passare al metodo che preferisci utilizzando i collegamenti seguenti.

  • Metodo 1: creazione di un tema figlio utilizzando il codice
  • Metodo 2: creazione di un tema figlio utilizzando un plug-in

 

Metodo 1: creazione di un tema figlio utilizzando il codice

Innanzitutto, devi aprire /wp-content/themes/ nella cartella di installazione di WordPress e creare una nuova cartella per il tuo tema figlio. Puoi nominare questa cartella come vuoi. Per questo tutorial, lo chiameremo wpbdemo.

creare un tema child su wordpress guida per principianti

 

 

 

 

 

 

Successivamente, devi creare i primi due file per il tuo tema figlio. Inizia aprendo un editor di testo come Blocco note. Quindi è necessario incollare il seguente codice nel documento vuoto.

1
2
3
4
5
6
7
8
Theme Name:   WPB Child Theme
Theme URI:    https://www.ircwebnet.com/
Description:  A Twenty Twenty-One child theme
Author:       WPBeginner
Author URI:   https://www.ircwebnet.com
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild

 

Questo codice contiene informazioni sul tema figlio, quindi sentiti libero di cambiarlo per soddisfare le tue esigenze. Ora salva questo file come style.css nella cartella del tema child su wordpress che hai appena creato. Questo è il foglio di stile principale del tuo tema figlio.

La prossima cosa che devi fare è creare un secondo file che importerà o accoderà i fogli di stile dal tema principale. Per fare ciò, crea un nuovo documento nel tuo editor di testo e copia il codice seguente.

1
2
3
4
5
6
7
/* enqueue scripts and style from parent theme */
   
function twentytwentyone_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
    array( 'twenty-twenty-one-style' ), wp_get_theme()->;get('Version') );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');

Questo codice funzionerà quando usi Twenty Twenty-One come tema principale. Se utilizzi un tema principale diverso, devi utilizzare un codice diverso come descritto nel Manuale dei temi di WordPress.

Se hai difficoltà a modificare il codice per un tema principale diverso, potresti invece utilizzare il metodo del plug-in.

Ora salva questo file come functions.php nella cartella del tuo tema child. Torneremo su questo file in seguito per aggiungere funzionalità al tuo tema figlio.

Nota: in passato, il tema principale veniva importato utilizzando il comando @import in style.css. Non consigliamo più questo metodo perché aumenterà il tempo necessario per caricare i fogli di stile.

Ora hai creato un tema child molto semplice e quando vai su Aspetto »Temi dovresti vedere il tema child WPB. Dovrai fare clic sul pulsante Attiva per iniziare a utilizzare il tema figlio sul tuo sito.

come creare un tema figlio in wordpress

 

 

 

 

 

 

 

Poiché non hai ancora modificato nulla nel tema figlio, il tuo sito utilizzerà la funzionalità e l’aspetto del tema principale. Ora puoi passare alla sezione successiva in cui personalizzerai il tema figlio.

Metodo 2: creazione di un tema figlio utilizzando un plug-in

Child Theme Configurator è un plug-in WordPress facile da usare che ti consente di creare e personalizzare rapidamente temi figlio senza utilizzare il codice.

La prima cosa che devi fare è installare e attivare il plugin Child Theme Configurator. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin per WordPress.

Al momento dell’attivazione, devi accedere a Strumenti »Temi figlio nella dashboard di WordPress.

Nella scheda Genitore/Figlio ti verrà chiesto di selezionare un tema principale da un menu a discesa. Selezioneremo il tema Twenty Twenty-One.

tema child wordpress guida

 

 

 

 

 

Dopo aver fatto clic sul pulsante Analizza, il plug-in si assicurerà che il tema sia adatto per l’uso come tema principale. 221 va bene.

 

tma figlio installazione e configurazione

 

 

 

 

 

Successivamente, ti verrà chiesto di nominare la cartella in cui verrà salvato il tema figlio e scegliere dove salvare gli stili. Lasceremo le impostazioni predefinite.

 

temi wordpress child

 

 

 

 

Nella sezione seguente, ti verrà chiesto di scegliere come accedere al foglio di stile del tema principale. Ancora una volta, andremo con l’impostazione predefinita.

 

guida wordpressa per principianti

 

 

 

Quando arrivi alla Sezione 7, dovrai fare clic sul pulsante “Fai clic per modificare gli attributi del tema figlio”. È quindi possibile inserire i dettagli del tema figlio.

 

child tema

 

 

 

 

Quando crei un tema figlio manualmente, perdi i menu e i widget del tema principale. Child Theme Configuratator può copiarli dal tema principale al tema figlio. Seleziona la casella Sezione 8 casella se desideri farlo.

 

come creare tema child su wordpress

 

 

 

Infine, fai clic sul pulsante per creare il tuo nuovo tema figlio. Il plugin creerà una cartella per i temi del tuo bambino e aggiungerà i file style.css e functions.php che utilizzerai per personalizzare il tema in seguito.

Prima di attivare il tema figlio di wordpress, dovresti fare clic sul collegamento nella parte superiore dello schermo per visualizzarne l’anteprima e assicurarti che abbia un bell’aspetto e non rompa il tuo sito.

guida per neofiti wordpress installazione tema chil

 

Se tutto sembra funzionare, fai clic sul pulsante Attiva e pubblica e il tuo tema figlio andrà in diretta.

 

child tema installing

 

 

 

 

In questa fase, il tema child di wordpress apparirà e si comporterà esattamente come il tema genitore. Successivamente, inizieremo a personalizzarlo.

 

Personalizzazione del tema child di wordpress

Ora personalizzeremo il tema child di wordpress in modo che appaia leggermente diverso dal tema principale. Lo facciamo aggiungendo codice al file style.css e ciò richiede una certa familiarità con CSS .

Puoi semplificare il processo copiando e modificando il codice esistente dal tema principale. Puoi trovare quel codice utilizzando Chrome o Firefox Inspector o copiandolo direttamente dal file style.css del tema principale.

Metodo 1: copia del codice da Chrome o Firefox Inspector

Il modo più semplice per scoprire il codice CSS che devi modificare è utilizzare gli strumenti di ispezione forniti con Google Chrome e Firefox. Questi strumenti ti consentono di guardare l’HTML e il CSS dietro qualsiasi elemento di una pagina web.

Ad esempio, se vuoi vedere il CSS utilizzato per il corpo del post, sposta semplicemente il mouse sul post e fai clic con il pulsante destro del mouse per selezionare Ispeziona.

ispeziona pagina web

 

 

 

 

 

Questo dividerà lo schermo del tuo browser in due parti. Nella parte inferiore dello schermo, vedrai HTML e CSS per la pagina. A seconda delle impostazioni del tuo browser, HTML e CSS potrebbero invece apparire sulla destra dello schermo.

 

ispezione ccs di pagina web

 

 

 

 

 

 

 

 

 

Mentre sposti il ​​mouse su diverse righe HTML, Impostazioni di Chrome le evidenzierà nella finestra in alto. Ti mostrerà anche le regole CSS relative all’elemento evidenziato.

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

pagina web e css

 

 

 

 

 

 

 

 

 

Vedrai che il colore di sfondo della pagina cambierà, ma la modifica è solo temporanea. Per renderlo permanente, dovrai copiare questa regola CSS e incollarla nel file style.css del tuo tema figlio.

1
2
3
body {
    background-color: #fdf8ef;
}

Salva le modifiche apportate al file style.css e quindi visualizza l’anteprima del tuo sito.

Puoi continuare a ripetere il processo per qualsiasi cosa desideri modificare nel foglio di stile del tuo tema. Ecco il foglio di stile completo che abbiamo creato per il tema child di wordpress. Sentiti libero di sperimentarlo e modificarlo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Theme Name:   WPB Child Theme
 Theme URI:    https://www.ircwebnet.com/
 Description:  A Twenty Twenty-One child theme
 Author:       WPBeginner
 Author URI:   https://www.ircwebnet.com
 Template:     twentytwentyone
 Version:      1.0.0
 Text Domain:  twentytwentyonechild
 */
 
.site-title {
    color: #7d7b77;
}
.site-description {
    color: #aba8a2;
}
body {
     background-color: #fdf8ef;
     color: #7d7b77;
}
.entry-footer {
    color: #aba8a2;
}
.entry-title {
    color: #aba8a2;
    font-weight: bold;
}
.widget-area {
    color: #7d7b77;
}

Metodo 2: copia del codice dal file style.css del tema principale

Puoi anche copiare del codice direttamente dal file style.css del tema principale. Puoi quindi incollarlo nel file style.css del tema child di wordpress e quindi modificarlo.

Ciò è particolarmente utile quando si utilizza Twenty Twenty-One come tema principale perché fa ampio uso di variabili CSS.

Ad esempio, quando abbiamo modificato il colore di sfondo della pagina sopra, il codice originale era:

1
background-color: var(--global--color-background);

Qui ‘–global–color-background’ è una variabile. La variabile può essere utilizzata in più posizioni nel tema. Per cambiare il colore in tutti quei posti contemporaneamente, devi semplicemente cambiare il valore della variabile.

Devi accedere a /wp-content/themes/twentytwentyone nella cartella di installazione di WordPress e quindi aprire il file style.css nel tuo editor di testo. È quindi possibile trovare dove è definito il –global–color-background.

1
--global--color-background: var(--global--color-green);

Scopriamo che la variabile è definita da un’altra variabile!

Infatti, nella sezione :root dello style.css del tema genitore troviamo tutta una serie di variabili di colore definite. Questa è la tavolozza dei colori utilizzata dal tema Twenty Twenty-One.

1
2
3
4
5
6
7
8
9
10
11
12
13
:root {
    --global--color-black: #000;
    --global--color-dark-gray: #28303d;
    --global--color-gray: #39414d;
    --global--color-light-gray: #f0f0f0;
    --global--color-green: #d1e4dd;
    --global--color-blue: #d1dfe4;
    --global--color-purple: #d1d1e4;
    --global--color-red: #e4d1d1;
    --global--color-orange: #e4dad1;
    --global--color-yellow: #eeeadd;
    --global--color-white: #fff;
}

Una volta scelta la combinazione di colori perfetta per il tuo sito WordPress, queste variabili ti permetteranno di personalizzare rapidamente il tema child su wordpress.

Devi semplicemente copiare quel codice e incollarlo nel file style.css del tuo tema figlio per wordpress. Quindi devi sostituire i codici colore con quelli nuovi che hai scelto per la tua tavolozza di colori.

Questi colori verranno quindi utilizzati automaticamente in più punti del tema figlio. Non è solo più veloce, ma renderà i colori del tuo tema più coerenti.

Sii avventuroso. La variabile di colore verde non deve essere necessariamente verde.

Puoi fare lo stesso per altre variabili. style.css di Twenty Twenty-One elenca le variabili per le famiglie e le dimensioni dei caratteri, le intestazioni, l’interlinea e altro. Puoi copiare uno qualsiasi di questi nel tuo nuovo file style.css dove puoi personalizzarli.

Modifica dei file modello

Ogni tema WordPress ha un layout diverso. Ad esempio, il tema Twenty Twenty-One ha un’intestazione, un ciclo di contenuto, un’area del widget del piè di pagina e un piè di pagina.

modifica css

 

 

 

 

 

 

 

 

 

 

Ogni sezione è gestita da un file diverso nella cartella ventuno. Questi file sono chiamati modelli .

I modelli di solito prendono il nome dall’area per cui vengono utilizzati. Ad esempio, la sezione del piè di pagina è solitamente gestita dal file footer.php e le aree di intestazione e navigazione sono gestite dal file header.php.

 

Alcune aree, come l’area del contenuto, potrebbero essere gestite da più file chiamati modelli di contenuto.

Se desideri modificare un modello, devi prima trovare il file nella cartella del tema principale e copiarlo nella cartella del tema child di wordpress. Successivamente, dovresti aprire il file in un editor di testo e apportare le modifiche desiderate.

In questo tutorial, copieremo il file footer.php dalla cartella del tema principale alla cartella del tema figlio. Dopo averlo fatto, devi aprire il file in un editor di testo semplice come Blocco note.

Ad esempio, rimuoveremo il collegamento “Proudly powered by WordPress” dall’area del piè di pagina e aggiungeremo un avviso di copyright lì. Per farlo, dovresti eliminare tutto ciò che si trova tra i tag <div class=”powered-by”>.

1
2
3
4
5
6
7
8
9
<div class="powered-by">
    <?php
    printf(
        /* translators: %s: WordPress. */
        esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
        '<a href="' . esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ) . '">WordPress</a>'
    );
    ?>
    </div><!-- .powered-by -->

Quindi devi incollare il codice che trovi sotto quei tag nell’esempio seguente.

1
2
3
<div class="powered-by">
     <p>&copy; Copyright <?php echo date("Y"); ?>. All rights reserved.</p>
     </div><!-- .powered-by -->

Una volta salvato il file e visitato il tuo sito WordPress, dovresti essere in grado di vedere il nuovo avviso di copyright.

Aggiunta di nuove funzionalità al tema child

Il file functions.php in un tema utilizza il codice PHP per aggiungere funzionalità o modificare le funzionalità predefinite su un sito WordPress. Funziona come un plug-in per il tuo sito WordPress che viene attivato automaticamente con il tuo tema attuale.

Troverai molti tutorial di WordPress che ti chiedono di copiare e incollare frammenti di codice in functions.php. Ma se lo aggiungi al tema principale, verrà sovrascritto ogni volta che installi un nuovo aggiornamento al tema.

Ecco perché consigliamo di utilizzare un tema child per wordpress quando aggiungi frammenti di codice personalizzati. In questo tutorial, aggiungeremo una nuova area widget al nostro tema.

Possiamo farlo aggiungendo questo frammento di codice nel file functions.php del nostro tema figlio.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
// Register Sidebars
function custom_sidebars() {
 
    $args = array(
        'id'            => 'custom_sidebar',
        'name'          => __( 'Custom Widget Area', 'text_domain' ),
        'description'   => __( 'A custom widget area', 'text_domain' ),
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
    );
    register_sidebar( $args );
 
}
add_action( 'widgets_init', 'custom_sidebars' );
?>

Una volta salvato il file, puoi visitare la pagina Aspetto »Widget della dashboard di WordPress e vedrai la tua nuova area widget personalizzata.

comecreare un tema child su wordpress

 

 

 

 

 

 

Puoi saperne di più sull’aggiunta di aree widget nella nostra guida su come aggiungere aree e barre laterali pronte per widget dinamici in WordPress .

Ci sono molte altre funzionalità che puoi aggiungere al tuo tema usando frammenti di codice personalizzati. Dai un’occhiata a questi oltre 25 trucchi estremamente utili per il file delle funzioni di WordPress .

 

Risoluzione dei problemi

Se non hai mai creato un tema child di wordpress prima, allora ci sono buone probabilità che tu commetta degli errori. Basta non arrendersi troppo in fretta. Consulta il nostro elenco degli errori più comuni di WordPress per trovare una soluzione.

Gli errori più comuni che probabilmente vedrai sono errori di sintassi causati da qualcosa che hai perso nel codice. Troverai aiuto per risolvere questi problemi nella nostra guida rapida su come trovare e correggere l’errore di sintassi in WordPress .

Puoi sempre ricominciare se qualcosa va storto. Ad esempio, se hai eliminato accidentalmente qualcosa che il tuo tema principale richiedeva, puoi semplicemente eliminare il file dal tuo tema figlio e ricominciare da capo.

 

Ci auguriamo che questo tutorial ti abbia aiutato a imparare come creare un tema child di WordPress.

6 commenti su “Tema child di WordPress come crearlo? (Guida per principianti)”

  1. Pingback: Barre laterali pronte per i widget dinamici in WordPress

  2. Grazie mille per questo utile articolo Shahzad. Ho creato manualmente un plug-in per frammenti di codice e spero che tu possa aiutare con una domanda di follow-up. Se voglio aggiungere diversi frammenti di codice, devo aggiungerli tutti allo stesso file php, usando un unico plugin per tutto? Oppure dovrei creare un nuovo plugin per ogni snippet per organizzare il codice più facilmente? Il vantaggio dell’utilizzo dei frammenti di codice è l’organizzazione ordinata e potrei passare a quell’approccio, ma sono un po’ riluttante perché in vari forum ho visto molte persone alle prese con i loro siti che si rompono e hanno dovuto fare un sacco di risoluzione dei problemi con frammenti di codice. Il tuo consiglio è apprezzato. Grazie.

  3. Pingback: Snippet php su wordpress, come aggiungere frammenti di codice

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *