Come modificare un tema WordPress

Questa guida è stata aggiornata il 3 Luglio, 2020

Modificare un tema WordPress può risultare difficile e troppo complicato per la maggior parte delle persone che si sono da poco affacciate al mondo del blogging, ma resta comunque una procedura fattibile per chiunque abbia un minimo di buona volontà e desiderio di imparare a costo zero e in tempi ragionevoli.

Il primo suggerimento che voglio darti è quello di iscriverti ai nostri Video Corsi su WordPress per vedere tutte le mie video lezioni su come usare HTML e CSS per modificare a fondo ogni aspetto del tuo sito web in WordPress.

Grazie a delle lezioni semplici e chiare, potrai imparare a effettuare degli interventi sui codici del tuo sito web, senza dover ricorrere sempre ad un aiuto esterno.

“Ma quanto c’è da studiare?”

È vero, se vuoi ottenere dei risultati, dovrai impegnarti un po’, ma non è così complicato come può sembrare a prima vista.

Iniziare a familiarizzare con questi linguaggi ti permetterà di avere un maggiore controllo sul tuo sito e arrivare anche dove le impostazioni del tuo tema non ti permettono di effettuare modifiche. Il risultato sarà un sito web completamente personalizzato in ogni aspetto e decisamente originale e unico.

Saper usare i linguaggi HTML e CSS comporterebbe quindi non solo un grandissimo risparmio in termini di Webmaster, ma ti darebbe anche una maggiore libertà.

Vediamo adesso quali sono i passaggi basilari per procedere alla modifica di un tema WordPress. Per qualsiasi dubbio o domanda utilizza la sezione dei commenti sotto all’articolo, ti risponderemo al più presto.

Come modificare un tema WordPress

Esistono vari modi per approcciare una modifica al tuo tema WordPress. Noi preferiamo quello – diretto ed efficace – del “Testa e Monta”.

Di che si tratta? Semplicemente, utilizziamo i fantastici Strumenti per sviluppatori di Chrome, che puoi attivare anche andando alla voce Ispeziona facendo clic col tasto destro. Questa risorsa, simile a Firebug di Firefox, ci permettere di testare eventuali modifiche in CSS in maniera immediata, senza bisogno di salvarle preventivamente sul server.

Avrai cioè la possibilità di vedere in anteprima il codice sorgente di un elemento grafico (ad esempio un header, una colonna, una immagine) e potrai intervenire su di esso, effettuando delle modifiche temporanee, osservando immediatamente il cambiamento e valutandone quindi l’effetto.

Appena ricaricherai la pagina, sarà ripristinata la versione corrente del tuo tema e perderai tutte le modifiche temporanee. Utilizzando questo strumento hai la possibilità di testare tante modifiche al tuo layout, senza alcun rischio e scegliendo quali cambiamenti dovranno poi essere inseriti nel tema e quali no.

Prima di tutto, assicurati di avere a disposizione il browser di Google Chrome, e se non ce l’hai scaricalo cliccando questo link.

Quando hai installato Chrome, utilizza questo browser per aprire il tuo sito e segui le istruzioni qui sotto.

Dove si testano le modifiche a HTML e CSS

Prima di procedere, volevo farti una domanda importante: hai attivato il tema child? Se decidi di modificare il tuo tema WordPress, è importante che il tema child sia attivo per poterti assicurare che tutto rimarrà uguale anche in caso di aggiornamento del tema.

Ora che abbiamo chiarito questo punto, proseguiamo.

Utilizzando Chrome, naviga sulla pagina del tuo sito che vuoi modificare. Clicca sopra l’elemento della pagina che desideri cambiare (sidebar, logo, contenuto) utilizzando il tasto destro del mouse e successivamente clicca sulla voce Ispeziona.

Si aprirà una schermata dalla quale potrai modificare tutte le righe HTML e CSS del tuo tema in modalità anteprima, ovvero le modifiche che effettuerai saranno provvisorie e non interverranno minimamente sul codice del tuo sito. Qualsiasi altra persona che si collegherà al tuo spazio web non vedrà niente di ciò che stai testando, perché le tue azioni sono destinate solo a creare una simulazione di come apparirebbe il tuo sito se effettui determinate modifiche al codice CSS e HTML.

La schermata che ti si è aperta è divisa in varie parti, ma per ora ci interessa il pannello Elements, dove trovi l’HTML e il CSS (nella sezione Styles).

Ora che hai aperto la funzione Ispeziona, il codice relativo all’elemento sul quale hai cliccato sarà evidenziato.

Per spostarti su un elemento diverso, potresti orientarti nel codice e trovare ciò che cerchi. In alternativa, clicca sull’icona in alto a sinistra del pannello Sviluppatori, e poi seleziona l’elemento che ti interessa.

A questo punto, puoi modificare, aggiungere o eliminare le righe di CSS, aggiungendo anche classi e id per personalizzare maggiormente la grafica.

Dove modificare il CSS di un tema WordPress

Dopo aver individuato quali sono le modifiche al codice da attivare per rendere permanenti i cambiamenti che desideri, non ti resta altro da fare che aprire la bacheca del tuo sito WordPress.

Ti suggerisco di lasciare aperta la pagina con gli strumenti per sviluppatori e aprire la Bacheca in una nuova scheda, sempre con Chrome.

Ora dovrai verificare se il tuo tema ha un’area specifica per le personalizzazioni del CSS. Se la trovi, puoi inserire qui le tue modifiche al tema.

In caso contrario, naviga nella sezione Aspetto > Editor.

A destra della pagina Editor vedrai una colonna contenente dei link a dei file in php. Non ti curare di quelli, ma piuttosto vai in fondo a questa lista e cerca di individuare un file css chiamato custom o qualcosa tipo: custom-style.css. Questo file è infatti il luogo dove inserire e salvare le modifiche che hai precedentemente testato con l’Ispeziona Elemento e l’Anteprima di Google Chrome. Non tutti i temi però vengono presettati con un file CSS custom.

I temi migliori, come quelli che si possono trovare nella piattaforma Themeforest, spesso prevedono di inserire le modifiche al CSS direttamente nei settings del tema. Presentano quindi la possibilità di modificare il foglio di stile, selezionando le varie opzioni disponibili, ad esempio per il colore dei font, la larghezza delle colonne, e molto altro ancora.

Appena sei pronto per inserire le tue modifiche ricordati di fare una copia di tutta la pagina sulla quale stai operando e di salvarla in luogo sicuro, perché è sempre meglio premunirsi. Sbagliare è sempre possibile, quindi è importante poter contare su una copia di riserva per tornare quando desideri alla versione di tema precedente.

Dove modificare l’HTML di un tema WordPress

Con l’HTML puoi seguire la stessa procedura ma anziché operare su un file CSS lavorerai sui file .PHP.

“Cosa? PHP? E quindi devo studiare anche quello?”

No, non hai bisogno di imparare a programmare in PHP, però sarebbe utile capire qualcosa sulla sintassi e su come funziona. Ti consiglio di dare un’occhiata alle lezioni di PHP su W3Schools, dove inizierai a capire almeno come orientarti all’interno dei file.

In realtà, i file PHP che vedi su WordPress sono un misto di codici HTML e PHP. Dai un’occhiata e vedi come sono organizzati al loro interno. Potresti già essere in grado di comprenderne la struttura, poiché individuare gli elementi HTML è piuttosto semplice.

Se devi inserire un elemento particolare visibile su ogni pagina dei tuoi articoli, andrai su single.php e sulla base della riga di riferimento che puoi individuare attraverso Ispeziona Elemento di Chrome, farai la tua modifica.

Conclusione

Man mano che imparerai le basi di HTML e CSS, e prenderai fiducia con varie porzioni del codice, vedrai che modificare un tema WordPress non è poi così difficile.

Se invece pensi che comunque, è il caso di “passare la palla” e lavorare direttamente sul codice non fa per te, ricorda che abbiamo un reparto tecnico pronto a risolvere ogni problema ed eseguire ogni lavoro di customizzazione

Ti è stata utile questa guida?

Hai mai messo mano al codice del tuo sito web?

Per qualsiasi dubbio puoi contattare la nostra chat qui in basso a destra, dove siamo pronti ad indirizzarti verso risposta che cerchi.