La guida definitiva ai temi figlio di WordPress

Hai mai trovato un tema WordPress quasi perfetto per il tuo sito Web, ma hai deciso di non seguirlo a causa di un elemento di design minuscolo e snervante che non potevi trascurare? Forse lo stile del carattere, la tavolozza dei colori o il posizionamento degli elementi di design?

Il mercato dei temi di WordPress è saturo di tanti fantastici temi, sia gratuiti che premium, ma a meno di assumere uno sviluppatore per creare un tema su misura per il tuo sito, ci sono poche possibilità che tu ne trovi uno perfetto fino all'ultimo pixel.

I temi figlio di WordPress consentono ai webmaster di modificare i file di un tema mantenendone le funzionalità principali in atto senza rischiare di perdere le modifiche ogni volta che il tema viene aggiornato. Ti danno il potere di modificare l'aspetto di un tema da qualcosa di piccolo come l'invito all'azione di un pulsante a cambiare completamente ogni elemento di design.

Questo articolo tratterà tutto ciò che devi sapere sui temi per bambini, da cosa sono al perché sono così importanti. Concluderemo con un tutorial sull'utilizzo di temi figlio sul tuo sito WordPress, nel modo giusto.

Suona bene? Iniziamo!

Temi figlio di WordPress: le basi

I temi figlio sono temi separati che ereditano attivamente la funzionalità dai temi principali. La funzionalità di un tema figlio ha la precedenza sul tema principale, il che significa che la funzionalità del tema figlio verrà applicata al tuo sito web. Una volta attivato un tema figlio, WordPress verificherà se ha alcune funzionalità particolari. Tuttavia, se la funzionalità non esiste, esaminerà i file del genitore e andrà con quello codificato lì.

In un inglese semplice, i temi figlio sono file di temi duplicati e ogni volta che senti la necessità di modificare aspetti del design o alcune funzionalità, lo modifichi nei file del tema figlio. Questa è un'ottima funzionalità perché consente ai webmaster di apportare modifiche al tema senza il timore persistente di rovinare i file originali.

La maggior parte dei temi di WordPress al giorno d'oggi viene fornita con temi figlio (o variazioni dei loro temi figlio) subito pronti all'uso.

Perché dovresti usare i temi figlio?

Apportare modifiche e alterazioni al tuo tema tramite temi figlio è una best practice ampiamente accettata (e consigliata). Pensaci in questo modo: se sbagli la prima volta puoi sempre riprovare. A parte questo importante vantaggio, i temi figlio sono importanti per la manutenzione e lo sviluppo del tuo sito WordPress.

Elimina il rischio di perdere le modifiche

Apportare modifiche al tema principale (i file del tema originale) significa che le modifiche andranno perse quando aggiorni il tema. Questo ti lascia in una sorta di vicolo cieco; se aggiorni il tema perdi tutte le modifiche ma se non aggiorni il tema avrai dei bug che risiedono sul tuo sito che potrebbero influenzarlo negativamente.

Puoi copiare e incollare il codice associato alle modifiche nel tuo tema principale una volta terminato l'aggiornamento. Sebbene sia del tutto possibile, perché perdere tempo a individuare le modifiche apportate e copiarle e incollarle nei file del tema aggiornati ogni volta che aggiorni il tema? È un processo facile ma fallibile.

È qui che si realizza per la prima volta l'importanza dei temi dei bambini. Utilizzando i temi figlio, puoi conservare tutte le modifiche e aggiornare in sicurezza il tema del tuo sito.

Mantenere l'organizzazione del codice

Un tema WordPress è in genere composto da poche migliaia di righe di codice e diversi file: HTML, CSS, PHP, JavaScript e altro. E per questo motivo, eventuali lievi modifiche apportate qua e là diventano difficili da tracciare. Quando arriva il momento di tornare indietro e modificare il tema o correggere bug imprevisti, si rivelerà piuttosto costoso (sia in termini di tempo che di budget).

Come discusso in precedenza, i temi figlio sono attivamente ereditati dai temi genitore. Tutte le modifiche apportate al tema figlio rimangono lì (ciò che accade nei temi figlio rimane nei temi figlio!) e sono più facili da tenere traccia perché avrà solo poche centinaia di righe di codice (nelle circostanze più aggressive) invece di un poche migliaia.

Come molto probabilmente puoi dire ormai, non ci sono svantaggi nell'utilizzo di temi figlio. In realtà, salvaguardano il tuo sito da bug accidentali.

Come creare un tema figlio in WordPress

La maggior parte dei temi include temi figlio, ma se ne trovi uno di tuo gradimento, creare un tema figlio da solo non è difficile. Dimostrerò il tutorial creando un tema figlio per il nostro tema Sparkling.

Passaggio 1: crea una directory per il tema figlio nell'installazione di WordPress.

1. Passa alla directory dei temi del tuo sito WordPress ( /wp-content/themes ).
2. Crea una nuova cartella e chiamala scintillante-bambino . È consigliabile assegnare al tema figlio lo stesso nome del genitore con -child aggiunto alla fine.

Aggiungeremo tutti i file del tema figlio a questa cartella. Detto questo, l'unico file che un tema figlio richiede per funzionare correttamente è il file style.css .

Passaggio 2: crea un file style.css per il tuo nuovo tema figlio.

1. Passare alla directory del tema figlio creata nel passaggio 1, ad esempio /wp-content/themes/sparkling-child .
2. Crea un nuovo file .css nella directory e style.css .
3. Copia e incolla il codice seguente nel nuovo file style.css :

Nel codice sopra indicato, le righe più importanti sono quelle che iniziano con Theme Name , Template e @import . Devi compilare correttamente queste righe se stai creando un tema figlio per un altro tema principale. La linea @import ti assicura di non dover riscrivere da zero le regole CSS del tema principale. Senza la riga @import , il nuovo sito avrà solo il contenuto caricato su di esso, nessuno stile.

Se il tuo tema principale ha più fogli di stile, salta questo passaggio. Ti mostreremo come importare più fogli di stile utilizzando una funzione nativa di WordPress nei passaggi seguenti.

Passaggio 3: crea il file functions.php (opzionale).

Il file functions.php consente agli sviluppatori Web di aggiungere funzionalità ai loro siti Web WordPress utilizzando le funzioni WordPress native e il codice PHP.

1. Passa alla cartella del tema del tuo bambino, ad esempio scintillante-bambino .
2. Crea un file .php e chiamalo functions.php .
3. Aggiungi il seguente codice al file functions.php:

È importante notare che un tema figlio non richiede un file functions.php per funzionare. In effetti, dovresti aggiungere questo file solo se intendi modificare la funzionalità del tema principale. Nella maggior parte dei casi, un foglio di stile è sufficiente, ma se il tema principale ha più fogli di stile, dovrai creare un file functions.php .

Passaggio 4: importa più fogli di stile (opzionale).

Se, ad esempio, il tema principale che hai selezionato viene fornito con più di un foglio di stile, importarli nel tema figlio @import rallenterà il tuo sito Web di un paio di secondi, il che non va bene. Non vuoi aumentare il tempo di caricamento della pagina del tuo sito se può essere evitato con poche righe di codice.

1. Passa alla directory del tema del tuo bambino e apri il file functions.php in un editor di testo.
2. Aggiungi le seguenti righe di codice al file functions.php sotto il tag di apertura <?php :

La funzione wp_enqueue_style() utilizzata nel codice sopra importerà più fogli di stile nel tema figlio senza rallentare il sito.

Nota: le migliori pratiche per la creazione di temi figlio suggeriscono che dovresti sempre importarli utilizzando il codice sopra indicato, indipendentemente dal numero di fogli di stile del tuo tema principale.

Passaggio 5: carica il tema figlio.

Ora che hai creato con successo il tema figlio, è il momento di caricarlo sul tuo sito Web WordPress e attivarlo.

1. Comprimere la directory del tema figlio in un file .zip .
2. Accedi al tuo pannello di amministrazione di WordPress e vai su Aspetto > Temi .
3. Fare clic sul pulsante Aggiungi nuovo nella schermata seguente.

Puoi anche caricare il tema figlio tramite il tuo client FTP copiando direttamente il file .zip nella directory dei temi. Se stai creando un tema figlio per un altro tema, apporta le modifiche necessarie al codice sopra indicato.

Questo tutorial ha solo lo scopo di dimostrare come viene creato un tema figlio. Abbiamo creato un tema figlio per Sparkling che puoi scaricare direttamente se preferisci non perdere tempo a crearne uno tuo.

Personalizzazione del tema del bambino

Supponendo che tutto sia andato come previsto, quando attivi il tema figlio il tuo sito web dovrebbe avere lo stesso aspetto di quando viene attivato il tema principale. Ma aspetta! Lo scopo non è creare un tema figlio per rendere il tuo sito Web diverso?

In questa sezione, ti mostreremo come iniziare a personalizzare il tema figlio per apportare modifiche.

Applicazione di stili personalizzati

Poiché il primo file (e il file obbligatorio) che abbiamo creato era , style.css , ha senso iniziare aggiungendo stili personalizzati al tema figlio che lo utilizza. Aggiungendo codice CSS personalizzato al foglio di stile, sarai in grado di sovrascrivere il foglio di stile del tema principale.

Con CSS, puoi modificare ogni aspetto del design e dello stile del tema attivato, dai colori e pulsanti alle dimensioni e agli stili dei caratteri. Gli sviluppatori Web con un vero talento per i CSS modificano l'intero layout del tema figlio per renderlo unico nel suo genere.

Tutto quello che devi fare è aggiungere codice CSS personalizzato nella parte inferiore del file style.css del tuo tema figlio e sei a posto. Quelli di voi che non vogliono accedere al client FTP del proprio sito ogni volta che è necessario apportare una semplice modifica, possono accedere all'editor predefinito di WordPress ( Aspetto > Editor ) e aggiungere il codice CSS direttamente da lì. Passa a Aspetto> Editor e aggiungi il codice CSS direttamente da lì.

Tutto quello che devi fare è aggiungere codice CSS personalizzato nella parte inferiore del file del tema del tuo bambino e sei a posto.

Tecniche alternative di modifica del tema

L'aggiunta di codice CSS al file style.css è il modo più semplice per apportare modifiche al tema figlio. Tuttavia, se vuoi portare le cose al livello successivo e magari aggiungere alcune nuove funzionalità personalizzate al tema figlio, allora è qui che le cose si fanno serie. Esistono diversi tipi di modifica che puoi apportare (oltre a modificare gli elementi di design) come ad esempio:

• Aggiungi nuove funzioni al file functions.php . Abbiamo già creato il file functions.php per il tuo tema figlio, quindi tutto ciò che devi fare ora è aggiungere alcune funzioni personalizzate a seconda della funzionalità che desideri ottenere. Puoi codificare in PHP o utilizzare le funzioni native di WordPress.
• Modifica i file modello. Se style.css e functions.php semplicemente non lo tagliano e devi ancora modificare il tema, puoi copiare e incollare i file del modello dal tema principale e modificarli di conseguenza.
• Aggiungi nuovi file modello. Se hai trovato modelli che ti piacciono altrove (non nella directory del tema principale) o se desideri creare i tuoi modelli, puoi aggiungerli direttamente al tema figlio e andare da lì.

Puoi stare tranquillo sapendo che il tuo sito Web WordPress sarà al sicuro da bug dannosi e indesiderati indipendentemente dal metodo o dai metodi che adotti per apportare modifiche al tema attivato. Se per caso qualcosa con il codice va storto, saprai esattamente dove si è verificato l'errore e sarai in grado di correggerlo. (Suggerimento: di solito è nelle ultime righe che hai aggiunto!)

Una delle cose migliori dei temi figlio è che consentono agli utenti di personalizzare completamente il tema principale in modo che corrisponda al marchio del proprio sito, il che è particolarmente utile sia per le aziende nuove che per quelle consolidate. E se vuoi riprogettare completamente il tuo sito in un secondo momento basandoti sullo stesso tema principale o su un nuovo tema principale, puoi sempre creare un nuovo tema figlio e partire da lì!

Avvolgendolo

I temi figlio sono il modo consigliato per apportare modifiche a un tema WordPress. Evitano agli utenti di commettere errori potenzialmente dannosi sui file del tema originale e rischiano di perdere le modifiche ogni volta che il tema viene aggiornato.

Abbiamo coperto tutto ciò che devi sapere sui temi figlio in WordPress, discusso perché sono così importanti e ti abbiamo guidato attraverso un tutorial approfondito su come creare il tuo tema figlio da zero. Per aiutarti a iniziare ad apportare modifiche, abbiamo concluso con una breve sezione su come iniziare a personalizzare il tema figlio.

Sei d'accordo sul fatto che tutte le modifiche al design e alle funzionalità debbano essere apportate tramite temi figlio? Sei riuscito a creare un tema figlio e ad attivarlo correttamente sul tuo sito WordPress? Ci piacerebbe conoscere la tua esperienza, quindi faccelo sapere commentando qui sotto!