Filtra la ricerca ...
Frase esatta
Categorie

Come creare un tema child (child theme) per WordPress

Ciao e benvenuto. Se hai bisogno di chiarimenti sul codice, lascia un commento (no WhatsApp); ricorda però che non fornisco assistenza gratuita sugli articoli che ho scritto nè personalizzo il codice in modo gratuito, quindi se la tua richiesta va oltre il semplice "aiutino", se vuoi mi chiedi una consulenza a pagamento nella pagina contatti. Grazie della comprensione. Alessio

WordPress lo sappiamo funziona con i template, i clienti sono sempre più esigenti e molto spesso è necessario fare delle personalizzazioni al tema, magari al CSS o addirittura al PHP, se le modifiche venissero fatte sul tema nativo, al primo aggiornamento del tema verrebbero completamente sovrascritte con i nuovi file aggiornati; qualcuno potrebbe dire “ma io non aggiorno il tema e sono apposto!”, male! pessima idea, fare SEMPRE gli aggiornamenti, certo prima vanno valutati per capire cosa comportano, in particolare sui siti già in produzione, ma mai trascurare un CMS, sarebbe come non fare mai il tagliando alla nostra auto, prima o poi qualche magagna salterebbe fuori… predica finita 🙂

Che cos’è un template child di WordPress

WordPress ha una funzionalità a mio parere molto utile che è quelle di potere creare un template child (altrimenti detto “tema figlio”) di un tema già esistente, in sostanza è una sorta di duplicazione del tema installato ma con la possibilità di andare a modificare i file, il CSS, il PHP o aggiungere delle funzionalità ulteriori senza compromettere il tema di default; infatti nel caso in cui si dovesse eseguire un aggiornamento del tema principale, le modifiche apportate al template child non andrebbero perdute, bella notizia no ?

Come fare un override di un template WordPress

La tecnica della creazione di un template child viene anche chiamata “override” che è un pò quello che succede con le estensioni di Joomla, per esempio scrissi un articolo su come fare un override di un template di K2.

Fare un ovveride di un tema WordPress signfica sovrascrivere dei file già presenti nel tema di default, vediamo alcuni esempi pratici.

Come creare un template child

Nel mio caso ho creato un child del tema gratuito “genereate press“, ma voi potete creare un child del vostro template.

  1. portarsi nella cartella di installazione dei templates di WordPress che si trova in wp-content/themes/
  2. creare una cartella chiamandola “generatepress-child

    Ora dovreste ritrovarvi questa situazione

    struttura di un tema child di wordpress

  3. all’interno della cartella generate-child creare un file con nome style.css ed incollarci esattamente quanto segue

    Vediamo un pò il contenuto del file

    Theme Name : è il nome del tema child, in realtà potete scrivere ciò che volete, per mantenere un ordine consiglio di scrivere il nome del tema principale aggiungendo la dicitura Child
    Theme URI : è l’URL di download del tema, se il tema lo rendete pubblico ha senso mettere un indirizzo di download, diversamente mettete l’indirizzo del vostro sito e per assurdo quello del cliente per cui lo state realizzando
    Descritption :
    una descrizione del tema, per esempio se avete aggiunto nuove funzionalità potete scriverle qui, non scrivete però un papiro nè !
    Author :
    il nome dell’autore del tema
    Author URI :
    l’indirizzo del sito dello sviluppatore del tema
    Template :
    questo deve essere necessariamente il nome della cartella del template di default, altrimenti il tema child non funzionerà
    Licence / License URI :
    potete lasciarle invariate
    Tags :
    in realtà questi sono utili se il tema è pubblico perchè aiutano a farlo trovare quando viene effettuato la ricerca con i criteri interni alla dashboard di WordPress, siccome nel mio caso il tema non è pubblico mi sono limitato ad inserire la lista delle nuove funzionalità che ho implementato
    Text Domain :
    altra parte importante, infatti deve riportare il nome della cartella del template child

    Queste informazioni verrano mostrate nei dettagli del tema

    dettaglio informazioni tema

  4. Bene, ora sempre all’interno della cartella generate-child create un file con nome function.php ed al suo interno incollate questo :

    questa stringa comunica a WP che è presente un tema child e di caricarne il relativo foglio di stile CSS (style.css)

  5. Ora volendo, ma è del tutto facoltativo, potete creare un file di 800×660 con nome screenshot.png ed inserire una preview del tema child, oppure potete limitarvi semplicemente a fare un copia e incolla del file che trovate nel template di default.
    Se non viene creato il file, nella gestione dei temi di Worpdress si troverà un quadrato vuoto in corrispondenza del tema child.

    gestione temi con wordpress child theme

  6. A questo punto per ogni file che vogliamo modificare eseguiamo una copia dal template di default al tema child.

Potrebbe interessarti anche ...

Hai bisogno di una consulenza, lo sviluppo di un plugin o vuoi incrementare le performance del tuo sito ?

34 commenti su “Come creare un tema child (child theme) per WordPress”

    • Ciao Alberto,

      spiegati meglio, cosa intendi che non mette a video il css modificato ? Nel senso che non viene caricato il file oppure non vedi le regole che hai inserito nel file css del tema child ?

      Rispondi
    • Ciao Alberto,

      nella cartella del tema child devi avere due file (style.css e functions.php), il file css in cui apportare le modifiche è style.css contenuto nella cartella del tema child.

      Nel file functions.php hai incollato questo ? :

      Rispondi
  1. Facendo ricerche, mi sono scontrato con 2 metodi che hanno a che fare con functions.php.

    inserendo questo codice, richiama il css originale, ma poi se si apportano modifiche al css child, non sovrascrive l’originale:

    // Importa il css originale
    add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_theme_style’ );
    function enqueue_parent_theme_style() {
    wp_enqueue_style( ‘semicolon’, get_template_directory_uri().’/style.css’ );
    }

    Mentre inserendo il tuo, comunica a WP che è presente un tema child e di caricarne il relativo foglio di stile CSS (style.css) che in questo caso invece sovrascrive l’originale.

    // Comunica a WP che è presente un tema child e di caricarne il relativo foglio di stile CSS (style.css)
    add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
    function theme_enqueue_styles() {
    wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’);
    }

    2 cose completamente diverse.

    Perciò se ho ben capito, usando il tuo codice, nel css child si deve inserire L’INTERO css originale e modificarlo li nel child.

    Altra cosa: devo modificare anche il file css/colors.css che ci metto nel functions.php?

    Rispondi
    • Ti sconsiglio di copiare l’intero css, scrivi invece solo le regole che ti interessano, altrimenti carichi 2 fogli identici per nulla.
      Per modificare il file colors.css invece fai la stessa cosa, ossia scrivi le regole che ti interessano nel file style.css del tema child.

      Rispondi
  2. Ok, i css dei Media ho dovuto inserirli nel css cclld anche se non l’ho modificata, perché altrimenti mi dava problemi di ridimensionamento.

    Il colors.css modificato l’ho inserito nel child style.css ma non sovrascrive l’originale.

    Rispondi
  3. Bene, per i css adesso funziona. Fra tutte le guide che ho trovato in rete, la tua funziona, però nel tuo post, se permetti, dovresti essere più esplicito, es. le modifiche dei file css extra (quelle che non sono di style.css) vanno messe anch’esse in style.css child con la dicitura !important.

    Un ultima cosa: ho notato che nel functions.php non si possono mettere tutte le modifiche dei file php (o sbaglio?).
    Mi spiego: per le traduzioni inglese-italiano ho messo in function.php solo il codice php tradotto (non tutta la pagina), ma per altri codici ho dovuto mettere nella cartella child tutto il file originale e modificarlo nel child.

    Rispondi
    • Ti ringrazio del suggerimento, ma il !important lo si usa solo in certi casi, aggiungerlo alla guida generalizzerei e sarebbe un errore.

      Rispondi
  4. Intendevo dire che !important l’ho messo solo ai css modificati che non appartengono al file style.css originale. Nel mio caso l’ho messo solo ai css modificati di colors.css

    Rispondi
  5. Ciao Alessio, complimenti per la guida.
    Purtroppo ho un problema che non riesco a risolvere da diversi giorni. Dovrei implementare i 2 codici di Google Tag Manager all’interno di header.php, nella sezione Aspetto –> Editor. Il punto è che nell’editor, sulla colonna di destra, non trovo tutte le voci che compongono il mio sito (tipo “header.php” etc), ma solo style.css. Credo che questo sia un errore vero?
    Come posso risolvere? O se non c’è un errore, dove posso implementare il codice di Google Tag Manager?
    Grazie in anticipo

    Rispondi
      • Ciao Alessio, grazie per la risposta. Purtroppo anche accedendo da FTP nella cartella del mio tema child non trovo niente, solo il file style.css.
        Dove ho sbagliato? Sono disperato, sono bloccato così da troppo tempo e non riesco a venirne a capo.
        Grazie mille
        Andrea

        Rispondi
          • Ah ok grazie. Quindi copio header.php tramite FTP. A quel punto dovrei copiare solo header.php o tutto il contenuto della cartella del tema genitore? Ma come mai la cartella del mio tema Child mi risultava vuota? È normale o ho commesso qualche errore ininfase di creazione del tema child? Comunque grazie mille mi hai salvato 🙂

  6. Buongiorno, ho seguito le istruzioni descritte nell’articolo e quando attivo il tema child ricevo il seguente messaggio nell’header!!

    Notice: Use of undefined constant �wp_enqueue_scripts� – assumed ‘�wp_enqueue_scripts�’ in /web/htdocs/www.miosito.it/home/wp-content/themes/generatepress-child/functions.php on line 2

    GRAZIE

    Rispondi
  7. Ciao Alessio,

    il tema principale è GeneratePress.
    Di seguito i codici:

    CSS

    /*
    Theme Name: generatepress Child
    Theme URI: http: //example.com/twenty-elevent-child/
    Description: Tema Child di generatepress
    Author: IO
    Author URI: http://example.com/
    Template: generatepress
    Version: 1.0.0
    Tags: tag che possono essere applicati al tuo tema separati da virgola
    Text Domain: generatepress-child
    */
    @import url(../generatepress/style.css);

    /* =Theme customization starts here
    .site-header {display:none}
    ————————————————————– */

    PHP

    Rispondi
  8. Dino, anch’io avevo il tuo problema all’inizio.
    Nell’intestazione del file style.css (ammesso che si chiami così) che hai messo nella cartella generatepress-child devi mettere così:

    /*
    Theme Name: Generalpress Child
    Author: Dino
    Author URI: QUI METTI L’URL COMPLETO DEL TUO SITO
    Version: 1.0.0
    Template: generalpress
    Text Domain: generalpress-child
    */

    Nel file functions.php che hai nel child metti nell’intestazione:

    <?php

    // Comunica a WP che è presente un tema child e di caricarne il relativo foglio di stile CSS (style.css)
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css');
    }

    Rispondi
  9. Ciao Alessio,
    ho seguito passo passo la tua guida e ho un problema per me inspiegabile. Ho già creato child themes in passato ma non so perché questa volta proprio non va. Seguendo le tue istruzioni, il tema child è presente nell’elenco dei temi presenti. Se provo a farne l’anteprima va tutto alla perfezione. Come se il procedimento fosse riuscito al 100%.
    Tuttavia se attivo il tema child e vado poi a ricaricare una qualsiasi pagina del sito trovo che tutti gli stili sono saltati!
    Da cosa può dipendere?

    Grazie!!

    Rispondi
  10. Salve, ti ringrazio per le tue guide che seguo ormai da tempo!
    Volevo farti una domanda, che può sembrare strana, ma a me sarebbe utile. È possibile eliminare le date dai commenti? Preciso, solo dai commenti perché per le altre date ho già risolto ma per i commenti non ne vengo a capo.
    Grazie !

    Rispondi
    • Ciao Carlotta,

      ci sono due modi, la nascondi da CSS con l’attributo display:none oppure scrivi una funzione PHP che secondo me è la cosa migliore.

      Rispondi
    • Con Debugger devi trovare il css della data, poi nel css child la nascondi con un css con display :none;

      Di solito il Debugger è nativo nei maggiori browser, Safari, Chrome.

      Rispondi
Se vuoi postare codice usa codeshare.io
Se vuoi postare uno screeshot usa postimages.org ed inserisci l'url nel commento.

Lascia un commento


Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Iscriviti e ricevi trucchi e guide

Inserisci la tua email per ricevere gli ultimi articoli dal blog.

Inserendo i tuoi dati confermi di aver letto ed essere d’accordo con la privacy policy.