Come modificare un tema WordPress in modo facile

Adoro la Community di WordPress. Lo spettro di figure a disposizione è molto vasto: ci sono designer, sviluppatori, blogger e tanto altro. La maggior parte di queste persone hanno avuto bisogno di imparare in qualche modo a modificare i temi WordPress. La bella notizia è che le competenze necessarie per farlo non sono elevatissime.

Per tutti prima o poi arriva il momento di cominciare a smanettare con WordPress. Io ad esempio ho iniziato quando un mio amico aveva bisogno di alcune funzionalità che il suo tema non offriva. Non sapevo nulla di WordPress, ma avevo una discreta conoscenza di PHP, quindi mi sono buttato. Ripensandoci, avrei potuto fare tutto in maniera diversa e il mio obiettivo in questo post è proprio quello di mostrarvi come fare le cose “alla maniera di WordPress”.

Come editare i temi WordPress: ecco 5 modi

Ci sono almeno cinque modi per personalizzare i template su WordPress. Alcuni sono più semplici di altri, ma questi sono di certo i più comuni:

1. Modificare il CSS attraverso il WP Customizer – Consente di apportare cambiamenti senza modificare i file del tema
2. Modificare il tema – Editare direttamente i file del tema
3. Creare un tema figlio (child theme) – Consente di mantenere il tema madre
4. Sdoppiare un tema – Consente di fare una copia di un tema
5. Scrivere un plugin – Usa hook e filtri per modificare le funzionalità

In questo articoli ci concentreremo sulla modifica del CSS come metodo per editare un template WordPress, e in parte affronteremo anche la modifica del tema e la creazione di un template “figlio” – lo sdoppiamento e la scrittura di un plugin non sono esattamente opzioni che rientrano nel topic di questo articolo.

Ecco di cosa hai bisogno per cominciare, insieme ad alcuni preziosi consigli da seguire:

• Assicurati di avere un backup
• Procurati un accesso SFTP al sito
• Evita l’editor di WordPress
• Evita il cowboy coding, se possibile

Pronto a partire?

Assicurati di avere un backup

Prima di scoprire come poter modificare un tema WordPress, assicurati di avere un sistema di backup. La società che ti fornisce l’hosting dovrebbe metterti a disposizione anche un servizio di backup – ad esempio in Sideways, la mia agenzia, usiamo ManageWP come alternativa per fare il backup di un sito.

Se al momento non stai usando ManageWP, registrati subito: fornisce un backup gratuito una volta al mese. Attivalo e fallo partire prima di mettere in atto i consigli che troverai in questo tutorial.

 Tra l’altroSiti Pro, uno dei servizi di GoDaddy Pro, si basa su ManageWP. Include backup gratuiti per qualsiasi sito WordPresshostato sui server GoDaddy.

Ottieni un accesso SFTP (o anche solo un FTP)

Se stai per accingerti a modificare i file del tema, avrai bisogno di un modo per connetterti al server. Se usi Windows, Mac o Linux, puoi farlo con Filezilla. È gratis e open source. Installalo e configuralo in modo da connetterlo al tuo web server.

Evita l’editor WordPress

Mentre stai imparando a modificare i template WordPress, potrebbe essere forte la tentazione di modificar i file usando l’editor di default – ma attenzione, si tratta di un’operazione rischiosa. Se rimuovi accidentalmente un punto e virgola mentre provi a editare un template di pagina, o ancora peggio quando sei all’interno del file functions.php, potresti mandare offline il tuo sito.

Non farlo.

Un piccolo appunto sul cowboy coding (e sul perché evitarlo, se possibile)

Non mi metterò certo a pontificare sull’etica e sugli standard del coding (che sono comunque piuttosto difficili da individuare). Per il set up di un sito in locale, uno sviluppatore professionista si serve di solito di ambienti come MAMP, WAMP, Vagrant ecc.

Quando questo step viene saltato, si va a fare quel che viene generalmente definito “cowboy coding” – che non è affatto la miglior pratica disponibile. Sai bene infatti che modificare il codice di un sito live non è una best practice, quindi vai su Google, cerca “sviluppo in locale” e passa allo step successivo.

Negli esempi che seguono, ho utilizzato MAMP per sviluppare in locale. Ma è probabile che tu invece scaricherai un file, lo modificherai, lo aggiornerai e che alla fine tu debba fare un refresh di pagina per vedere i cambiamenti. Questa infatti è il modo più comune per imparare a editare i temi WordPress, anche se dovresti imparare a sviluppare in locale se vuoi diventare uno sviluppatore.

Cominciamo!

Per questo articolo, utilizzerò un sito locale su http://dev.dev (non potrai accedervi in quanto è costruito localmente sul mio computer).

I seguenti tre modi per modificare WordPress richiedono differenti livelli di competenza. Cominceremo dal più semplice e ci soffermeremo più a lungo su questo.

1. Modifiche del CSS

Il modo più semplice per cominciare a fare modifiche al look&feel di un tema è editare il CSS. Da quando la versione 4.7 è stata rilasciata, c’è un modo preimpostato di modificare il CSS senza dover intervenire direttamente sul tema.

Effettua il log-in su WordPress e, nella sezione Aspetto, scegli Personalizza:

In questo modo entrerai nel Customizer, quindi non dovrai far altro che cliccare su CSS aggiuntivo (Additional CSS in inglese). 
Si aprirà un campo bianco dove potrai cominciare ad aggiungere il tuo CSS (Nota sull’immagine: ho scrollato leggermente verso il basso in modo che anche il contenuto sia visibile, non soltanto l’immagine in header):

Ora puoi cominciare a fare le modifiche desiderate. Per procedere, devi sapere come puntare i singoli elementi CSS, quindi continua a seguirmi.
In questo caso ho usato Chrome per selezionare un elemento CSS, ma anche altri browser possiedono questa funzionalità. Comincia cliccando con il tasto destro su un elemento – ad esempio, sul titolo del blog post, Hello world!. Nella tendina che si aprirà, è disponibile l’opzione “Ispeziona”.

Una volta cliccato su Ispeziona, puoi vedere il nome dell’elemento del titolo. In questo caso, il titolo dell’articolo è un tag H3, con classe entry-title. Qui puoi aggiungere qualsiasi CSS tu desideri. In questo caso, aggiungiamo un bordo rosso intorno al titolo semplicemente aggiungendo il seguente codice:

h3.entry-title {
  border: 1px solid red;
}

Puoi aggiungere CSS a qualsiasi elemento una volta compreso a fondo come personalizzare i temi WordPress. Giusto per la cronaca, questo CSS è salvato nel database, e i file del tema non vengono modificati in alcun modo.

Se vuoi modificare un elemento CSS – ma soltanto all’interno di una pagina specifica o un certo tipo di post – assicurati di dare uno sguardo anche alle body class. WordPress in questo è molto smart. Ad esempio, cliccando sul primo post del blog, compaiono molte informazioni a riguardo:

Quello che sappiamo è che sta caricando il template di default, che si tratta di una singola pagina, e che il post ID è 1. Quindi potrai fare una cosa del genere:

body.postid-1 h1.entry-title {
  border: 1px solid red;
}

Il bordo rosso comparirà soltanto nella pagina web con post ID uguale a 1. Se invece volessi far sparire il titolo nelle Pagine – pur mantenendolo negli Articoli – puoi entrare in una pagina e dare uno sguardo alle classi con la funzione Ispeziona che abbiamo visto poco fa. Tutto quello che dovrai fare è aggiungere questo CSS nel Customizer:

body.page h1.entry-title {
  display: none;

Ci sono tantissime risorse che puoi consultare sul CSS. CSSplay contiene tantissimi esempi di ciò che è possibile fare. Ricorda solo che puoi avere accesso ad un sacco di informazioni utili sulle classi inserite all’interno di WordPress proprio entrando nel Customizer.

2. Modifiche al tema

 Le modifiche al tema dovrebbero essere fatte soltanto nel caso in cui si intenda fare un editing permanente. Il che significa che è meglio andare a modificare i file del tema solo quando si è sicuri al 100% che non verrà mai aggiornato.

Ad esempio, se stai usando Genesis, Elegant Themes, Divi, Avada, ecc., esiste la possibilità che i file che modifichi vengano cancellati non appena sarà effettuato un aggiornamento. In questo caso, passa alla sezione successiva.

Se sei sicuro di avere un tema che non sarà aggiornato, accedi con FTP e seleziona il file che vuoi modificare. Verrai connesso e portato all’interno della directory dei temi e, almeno nel 99% dei casi, lo troverai sotto forma di public_html/wp-content/themes/_nome_del_tema.

Puoi anche modificare il CSS e inserire lo stesso codice della sezione precedente. Rimuovi il codice dal Customizer, edita lo style.css alla radice della directory del tema e quindi aggiungilo alla fine del file.

Quando accedi tramite FTP, puoi modificare qualunque file. Ricorda sempre di avere a portata di mano l’ultimo backup effettuato.

3. Temi child

A questo punto ci stiamo addentrando sempre più nell’ambito di competenza degli sviluppatori, quindi ti consiglio di dare uno sguardo al WordPress Codex per consultare l’articolo dedicato alla creazione di temi child. Ti aiuterà a creare un tema figlio basandosi sul tema Twenty Fifteen.

Raccomando sempre di seguire il processo manuale proprio per capire come funziona WordPress. Ma se non ti senti a tuo agio nel creare un tema child da zero, c’è un pratico plugin che può fare al caso tuo.

Child Theme Generator è un plugin gratuito per creare temi child. Installalo, attivalo e compila il form per crearlo. Molte società forniscono child theme “prefabbricati”. Per fare un esempio, Beaver Builder fornisce un child theme in modo da poter apportare modifiche senza dover creare un tema figlio da zero.

Il bello di un tema figlio è che, quando è attivo, WordPress per prima cosa cercherà il file nella directory del child theme e, nel caso in cui non riesca a trovarlo, andrà a caricare il file del parent theme.

Ad esempio, se vuoi modificare il footer di un tema, e soltanto quello, puoi creare un tema figlio seguendo le istruzioni presenti su WordPress.org. Copia semplicemente il footer.php dal tema madre e mettilo nella directory del figlio. In questo caso WordPress caricherà per prima cosa il footer.php presente nella directory del figlio e, qualora non lo trovi, caricherà la copia del parent theme. Questa è sicuramente la soluzione più sicura per modificare un tema quando stai imparando a editare i temi WordPress via FTP.

Conclusioni

Mi piacerebbe molto continuare a parlare anche di come sdoppiare un tema o di come scrivere un plugin per modificare un tema, ma a questo punto dovrei scrivere un intero altro articolo. Mi auguro, in ogni caso, che questa piccola guida ti sia stata d’aiuto per orientarti nell’infinito mondo delle cose da sapere su WordPress.