Questo tutorial non \u00e8 per tutti.<\/p>\n
Non \u00e8 necessario essere uno sviluppatore esperto per seguire, ma \u00e8 necessario un genuino interesse per saperne di pi\u00f9 su WordPress e sul funzionamento dei temi.<\/p>\n
Se non hai paura di lavorare con un po’ di codice e sporcarti le mani con alcuni file di temi, allora benvenuto a bordo!<\/p>\n
In questa guida imparerai come personalizzare il tuo sito WordPress a tuo piacimento utilizzando un tema figlio, ma prima…<\/p>\n
Esaminiamo esattamente il motivo per cui dovresti anche usare questa strana cosa chiamata "tema figlio".<\/p>\n
Ripeti dopo di me:<\/p>\n
Giuro solennemente di non modificare mai un file di tema.<\/p>\n
I nuovi utenti di WordPress che sono interessati a realizzare personalizzazioni con il codice spesso modificano direttamente i file nel loro tema. Questo \u00e8 un grande no-no.<\/p>\n
Come mai?<\/p>\n
Una ragione: quando aggiorni il tuo tema, WordPress sovrascriver\u00e0 il tuo tema esistente con la nuova versione del tema.<\/p>\n
Allora perch\u00e9 importa?<\/p>\n
Immagina di utilizzare la versione 1.04 del tema Challenger<\/a>. Hai spostato il menu nel file header.php e aggiunto alcuni nuovi CSS a style.css. Quindi esce la versione 1.05 e vedi la notifica nella tua dashboard.<\/p>\n Quando aggiorni alla v1.05, entrambi i file header.php e style.css verranno sostituiti con quelli della v1.05 di Challenger. Non conterranno le stesse modifiche che hai apportato, quindi il tuo lavoro andr\u00e0 perso e non c’\u00e8 modo di recuperarlo. Questo pu\u00f2 essere piuttosto scoraggiante se hai speso ore nelle tue personalizzazioni.<\/p>\n Tuttavia, se metti le tue personalizzazioni in un tema figlio Challenger, puoi tranquillamente aggiornare alla versione 1.05 senza perdere nessuna delle tue personalizzazioni perch\u00e9 sono archiviate in modo sicuro nel tema figlio.<\/p>\n Questo diventer\u00e0 un po’ pi\u00f9 chiaro quando passiamo a un esempio reale, quindi andiamo avanti e creiamo un tema figlio ora.<\/p>\n Anche se non spiegher\u00f2 in dettaglio come funziona tutto il codice qui, queste sono le idee e i frammenti di base necessari per iniziare.<\/p>\n Inizia creando una cartella vuota sul desktop. Puoi nominarlo come preferisci, ma la convenzione di denominazione standard consiste nell’usare il nome del tema in minuscolo seguito da "figlio" e sostituire gli spazi con trattini.<\/p>\n Ad esempio, un tema figlio per il tema Challenger avrebbe un nome di cartella "challenger-child". Questa cartella conterr\u00e0 tutti i file del tema figlio.<\/p>\n Hai solo bisogno di un file per creare un tema figlio tecnicamente valido, style.css.<\/p>\n Utilizzando l’editor di codice di tua scelta, crea un nuovo file all’interno della cartella del tema figlio e chiamalo style.css.<\/p>\n Il file style.css \u00e8, ovviamente, dove aggiungerai tutti i tuoi CSS per personalizzare il tuo sito. Affinch\u00e9 WordPress riconosca il tuo tema figlio come un tema valido, devi aggiungere un’intestazione del foglio di stile come questa nella parte superiore di style.css:<\/p>\n Puoi copiare questa intestazione esatta e usarla per i tuoi temi figlio. Cambia semplicemente il nome del tema con quello che stai personalizzando.<\/p>\n La parte pi\u00f9 importante \u00e8 il valore “Template" che deve essere impostato sul nome del tema genitore. In particolare, il nome utilizzato per la cartella contenente il tema principale.<\/p>\n Con questo in atto, puoi gi\u00e0 attivare il tema figlio tramite il menu Aspetto e usarlo. Tuttavia, il tuo sito sar\u00e0 completamente privo di stile!<\/p>\n Quando viene attivato un tema figlio, WordPress non caricher\u00e0 pi\u00f9 il file style.css del tema principale e dipender\u00e0 invece dal tema figlio per farlo.<\/p>\n Ecco come caricare entrambi i fogli di stile…<\/p>\n Nel tuo editor di codice, crea un secondo file nel tema figlio e chiamalo functions.php.<\/p>\n Quindi, aggiungi il seguente codice al file:<\/p>\n Questa funzione dice a WordPress di caricare il file style.css del tema principale e quindi caricare il file style.css del tema figlio dopo. Il caricamento del foglio di stile del tema figlio dopo rende pi\u00f9 semplice sovrascrivere i selettori CSS del tema padre.<\/p>\n Come accennato in precedenza, non tratter\u00f2 questo codice riga per riga, ma puoi trovare una spiegazione pi\u00f9 dettagliata di questo frammento nel Codex di WordPress<\/a>.<\/p>\n Questo \u00e8 tutto ci\u00f2 che devi fare per creare un tema figlio funzionante!<\/p>\n Con l’impostazione del tema figlio, ci sono tre modi in cui puoi personalizzare il tuo sito con esso.<\/p>\n Puoi aggiungere tutti i nuovi CSS che desideri nel file style.css del tema figlio.<\/p>\n Quando trovi i selettori da utilizzare nel tuo CSS, non controllare il file style.css del tema principale. Tutti i nostri temi utilizzano un "pre-processore CSS", quindi non guardiamo nemmeno quel file! Invece, segui questo processo pi\u00f9 intelligente per trovare i selettori CSS<\/a> e penso che avrai molto pi\u00f9 successo nella personalizzazione del tuo sito.<\/p>\n Con un tema genitore ben codificato, puoi sovrascrivere qualsiasi funzione trovata nel suo file functions.php.<\/p>\n Ad esempio, ogni funzione in Mission News<\/a> \u00e8 racchiusa in un Una personalizzazione comune che richiede un tema figlio \u00e8 il riordino degli elementi. Ad esempio, potresti voler spostare il titolo del post dopo l’immagine in primo piano anzich\u00e9 prima.<\/p>\n Puoi prendere uno qualsiasi dei file modello trovati nel tema principale e inserirne una copia nel tema figlio. Verr\u00e0 quindi caricata la versione nel tema figlio. Ci\u00f2 ti consente di aggiungere, riordinare e rimuovere tutti gli elementi che desideri in qualsiasi parte del sito.<\/p>\n Una volta che sei soddisfatto delle tue modifiche, puoi installare il tema figlio sul tuo sito.<\/p>\n I temi figlio possono essere caricati proprio come i normali temi WordPress, quindi ci vogliono solo un minuto o due per attivarli sul tuo sito. Segui questo tutorial per installare il tema del tuo bambino:<\/p>\n Come installare un tema figlio di WordPress?<\/a><\/p>\n Se sei totalmente nuovo a tutto questo, ecco un paio di strumenti gratuiti per aiutarti.<\/p>\n Innanzitutto, se non disponi di un editor di codice, controlla Visual Studio Code<\/a>. \u00c8 semplice ma flessibile. \u00c8 anche totalmente gratuito e con esso vengono realizzati molti software professionali. \u00c8 quello che uso per creare temi qui a Compete Themes.<\/p>\n In secondo luogo, creare un sito WordPress locale (offline) \u00e8 un ottimo modo per provare il codice senza influire sul tuo vero sito web live. Mentre ho usato e consigliato MAMP<\/a> in passato, Local di Flywheel<\/a> \u00e8 cos\u00ec dannatamente facile e semplice da usare che lo adoro. \u00c8 quello che uso per lo sviluppo del tema ed \u00e8 anche gratuito.<\/p>\n Tornando all’esempio di prima…<\/p>\n Quando si aggiorna il tema Challenger (o qualsiasi tema) l’intera directory "challenger" viene sostituita, il che non avr\u00e0 alcun impatto sul tema figlio perch\u00e9 ora ha la propria directory nella cartella "challenger-child".<\/p>\n Con il tuo tema figlio in posizione, puoi tranquillamente apportare tutte le personalizzazioni che desideri e mantenere aggiornato il tuo tema principale.<\/p>\n Se non conosci CSS e PHP, potrebbe volerci un po’ di tempo per ottenere le personalizzazioni nel modo desiderato, ma con un tema figlio hai un’ottima base su cui lavorare. Ricorda di seguire questi passaggi<\/a> per trovare i selettori CSS da utilizzare e qualsiasi personalizzazione dello stile che fai sar\u00e0 piuttosto semplice.<\/p>\nCome creare un tema figlio<\/h2>\n
Configurazione di base<\/h3>\n
Crea il file style.css<\/h3>\n
\/*\n Theme Name: Challenger Child\n Template: challenger\n Author: Compete Themes\n Version: 1.0\n Author URI: https:\/\/www.competethemes.com\n Description: This is a child theme used to customize the Challenger WordPress theme.\n License: GNU General Public License v2 or later\n License URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n*\/<\/code><\/pre>\nCrea il file functions.php<\/h3>\n
<?php \nfunction my_theme_enqueue_styles() { \n $parent_style = 'parent-style'; \n wp_enqueue_style( $parent_style, get_template_directory_uri(). '\/style.css' ); \n wp_enqueue_style( 'child-style', get_stylesheet_directory_uri(). '\/style.css', array( $parent_style ), wp_get_theme()->get('Version')\n );\n}\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );<\/code><\/pre>\nPersonalizzazione con il tuo nuovo tema figlio<\/h2>\n
Aggiungi e sovrascrivi gli stili<\/h3>\n
Funzioni di esclusione<\/h3>\n
[function_exists()](https:\/\/php.net\/manual\/en\/function.function-exists.php)<\/code>assegno. Ci\u00f2 significa che puoi copiare la funzione nel file functions.php del tuo tema figlio. Quindi puoi apportare le modifiche che desideri alla funzione l\u00ec.<\/p>\nIgnora modelli<\/h3>\n
Installazione del tema figlio<\/h3>\n
I tuoi aggiornamenti sono al sicuro<\/h2>\n