Modificare tema WordPress

Realizzare un sito web com WordPress non è difficile, esistono guide per l’installazione di WordPress ed esistono numerosi plugin e temi già preconfezionati pronti da utilizzare. Se vogliamo dare al nostro sito web un aspetto unico e sicuramente più professionale abbiamo sicuramente bisogno di modificare tema WordPress. Modificare i temi wordpress non è cosa difficile e i risultati possono essere davvero molto interessanti. Serve solo pazienza, creatività e i giusti strumenti.

Backup, Backup, Backup!!

Prima di compiere qualsiasi modifica al nostro sito web dobbiamo sempre ricordarci di fare un backup completo di tutto il sito, sia dei file presenti nel nostro spazio web e sia del nostro database. Non è difficile ma vi può salvare da lunghe notti in bianco e attacchi di panico (se siete particolarmente sensibili e non sapete gestire gli imprevisti). Esistono essenzialmente tre metodi per poter effettuare un backup. Io ve li riporto tutti e tre, a voi la scelta:

• Utilizzare un plugin per il backup automatico: prima di effettuare qualsiasi modifica fate manualmente un backup di file e database (personalmente utilizzo i plugin solo per i backup automatici, quando devo fare qualche intervento preferisco utilizzare altri sistemi);
• Utilizzare il generatore automatico di backup che offre il pannello di controllo del vostro hosting. Per trovare questa funzione vi basterà accedere al vostro hosting e cercare qualcosa nominato (solitamente) Wizard Backup. (Personalmente non uso quasi mai questa procedura);
• Fare un backup manuale di tutto utilizzando un software per la connessione al vostro hosting (ad esempio Filezilla) e esportando manualmente il vostro database da PhyMyadmin;

Qualsiasi sia la procedura che scegliete di utilizzare il consiglio è sempre quello di testare la copia di backup in locale (qui trovate una guida per creare un server web in locale dove poter testare i vostri siti web)

Utilizzare un Child Theme

La scelta di utilizzare un child theme è fondamentale e vi salverà da problemi futuri, soprattutto in fase di aggiornamento del template originale. Se sceglieste di modificare i file originali del template, la prima volta che andrete a fare un aggiornamento, tutte le vostre modifiche e personalizzazioni andrebbero perse. Ecco perché è importante, anzi, fondamentale, utilizzare un Child Theme.

Come funziona un Child Theme

Un child theme wordpress è un tema figlio del principale che permette di aggiungere nuove funzioni o di modificare l’aspetto del tema genitore senza sovrascrivere direttamente i file originali. Creare un child theme è molto facile e questo ci permetterà di modificare tema wordpress con facilità e con la sicurezza che nulla verrà perso all’aggiornamento del template originale.

Creare un Child Theme WordPress

Creare un child theme wordpress per modificare un template wordpress è un operazione molto semplice. La prima operazione da fare è la creazione di una cartella, utilizzando un qualsiasi software per la gestione dei file via FTP, all’interno della directory dei template di WordPress  in wp-content/themes/, con il nome del template attualmente in uso seguito dalla dicitura –child.  Per esempio, supponiamo di voler voler modificare tema wordpress TwentyFourteen, la cartella che dovremmo creare sarà /wp-content/themes/twentyfourteen-child.  All’interno della cartella del nostro child theme l’unico file indispensabile è il file style.css che servirà ad indicare a WordPress a quale tema padre il template child fa riferimento. Supponiamo sempre di dover creare un child theme per i template TwentyFourteen, l’intestazione del file style.css sarà similare alla seguente:

Vediamo cosa significa questa porzione di codice e quali sono le informazioni necessarie per il corretto funzionamento del child theme:

• Theme Name: serve ad assegnare il nome del child theme ed è la prima istruzione obbligatoria;
• Theme URI: indica l’URL del child theme;
• Description: riporta una descrizione del template;
• Author: il nome dell’autore del child theme;
• Author URI: l’indirizzo web dell’autore del child theme;
• Template: è la seconda informazione fondamentale che serve ad indicare a quale tema padre fare riferimento. Qui deve essere indicato il nome della directory del tema padre. Fare attenzione perchè il nome della directory è case sentitive, ovvero, fa distinzione tra maiuscole e minuscole;
• Version: la versione del child theme in uso;
• Tags: tags/etichette, per la classificazione del tema;

Dopo queste indicazioni sul tema e sullo sviluppatore troviamo una porzione di codice molto importante ovvero

Con questa porzione di codice indichiamo al tema figlio di importare tutte le impostazioni dal tema padre.

Adesso che abbiamo visto quali sono le indicazioni fondamentali che ci devono essere in un foglio di stile di un child theme crediamo, con un editor di testo (potete utilizzare un semplice blocco note, dreamweaver, pspad o un qualsiasi altro editor di testo), un file che salveremo all’interno della directory wp-content/themes/nostrotema-child/style.css nominandolo appunto style.css. Riportiamo la porzione di codice che abbiamo visto sopra, modificando le voci Theme Name e Template con quelle corrispondenti al nostro tema padre e salviamo.

Attivare un child theme wordpress

Una volta che avete creato il vostro child theme wordpress seguendo le istruzioni riportate qui sopra non dovrete fare altro che andare nell’area amministrativa di WordPress e attivare i child theme da aspetto>temi.

Inizialmente il tema figlio, così come lo avrete creato, sarà l’esatta copia del tema padre, questo perchè non avete inserito ancora nessuna personalizzazione all’interno del file stye.css del tema figlio.

Le personalizzazioni grafiche al template possono essere inserite direttamente in style.css successivamente alla porzione di codice

Ricordatevi sempre che le regole del tema figlio avranno la precedenza su quelle equivalenti del tema padre, sovrascrivendole.

Modificare tema WordPress, la parte grafica

Ora che abbiamo creato e attivato un tema figlio possiamo finalmente procedere con la personalizzazione del nostro template. Se non avete dimestichezza con il codice e nell’analisi del codice sorgente del template padre, vi consiglio di utilizzare uno strumento che troverete utilissimo, Firebug (questa l’estensione per Firefox che, personalmente, trovo decisamente migliore rispetto a quella per Chrome).

Firebug è un applicazione che ci permette di fare molteplici cose come ad esempio:

• Visualizzare errori di registrazione per Javascript, CSS, XML, XMLHttpRequest (AJAX) e Chrome (internals Firefox)
• Eseguire codice Javascript sul pagina Web corrente
• Navigare all’interno del codice sorgente e apportare modifiche in live view
• Ispezionare gli elementi HTML e CSS
• Analizzare il tempo di caricamento di una pagina e dei singoli file che la compongono

Per modificare tema wordpress andremo ad utilizzare solo il pannello HTML e CSS. Supponiamo di voler personalizzare la grafica del template Twenty Fourteen. Apriamo il nostro pannello di Firebug cliccando sull’icona corrispondente o premendo il tasto F12 della nostra tastiera. Dal pannello navighiamo all’interno del nostro template con lo strumento di analisi:

Supponiamo di voler cambiare il colore del riquadro del campo di ricerca. Dovremmo esplorare la porzione di codice relativa a quella specifica porzione del nostro template:

Vedremo quindi che per modificare il colore da verde a, ad esempio, rosa, dovremmo modificare la porzione di codice

Ciò che andremo a fare è copiare la porzione di codice che ci interessa modificare direttamente all’interno del foglio di stile del nostro child theme, ad esempio, per modificare lo sfondo del riquadro di ricerca in rosa, inseriremo questa porzione di codice:

Possiamo così trovare le porzioni di codice di tutti gli elementi che vogliamo personalizzare all’interno del nostro template sia grafiche sia funzionali. Attenzione che Firebug ci indica dove e quali siano le porzioni di codice da modificare mentre noi dovremmo sapere il CSS per capire come fare per modificare determinati valori. Una volta scritte le modifiche che ci interessano dovremmo salvare il file e caricarlo all’interno della nostra directory child del tema.

Modificare tema wordpress, i file funzionali

Può capitare che abbiate bisogno di modificare non solo la parte grafica del sito web ma anche i file funzionali come ad esempio l’header, per inserire magari un nuovo Google Font, il footer per variare i crediti, il file single.php o quello relativo alle categorie. Per tutti questi file è sufficiente copiarli all’interno della nostra cartella thema-child all’interno della directory wp-content/themes/ e su questi apportare tutte le dovute modifiche. Se invece avete bisogno di aggiungere nuove funzioni e quindi di modificare il file functions.php,  in questo caso non dovrete copiare il file presente nel tema padre perchè, altrimenti, avreste un errore di funzioni duplicate. Vi basterà creare un nuovo file php rinominandolo functions.php, salvarlo all’interno della directory thema-child e all’interno di questo inserire tutte le funzioni php di cui avete bisogno. Vi ricordo che un file php si apre e si chiude con la seguente porzione di codice

Il file functions.php nel child theme non sovrascrive, come per gli altri file, il suo corrispondente ma viene caricato subito prima e in aggiunta rispetto a quello presente nel tema padre. E’ quindi importante fare attenzione a non duplicare le funzioni tra tema padre e tema figlio.

I prodotti che ti consiglio

consigliato

WordPress e WooCommerce: La soluzione completa per l’e-commerce

16,99 EUR

Acquista su Amazon

consigliato

Mastering WooCommerce 4: Build complete e-commerce websites with WordPress and WooCommerce from scratch (English Edition)

13,82 EUR

Acquista su Amazon