Come modificare un tema WordPress, guida completa

Il primo suggerimento che voglio darti è quello di visitare il sito Webipedia.it, dove tra molti Video Corsi dedicati a come renderti autonomo sul web, troverai anche quello che ti insegnerà ad usare l’HTML e il CSS in maniera semplice e progressiva. Grazie infatti a delle comode e chiare lezioni, potrai imparare a effettuare degli interventi sui codici del tuo sito web, senza dover ricorrere sempre ad un aiuto esterno.

Riveste infatti grande importanza il fatto che tu cominci a familiarizzare un po’ con questi linguaggi di programmazione al fine di avere un maggiore controllo sul tuo sito, ed essere maggiormente consapevole e preparato sulla sua gestione. Saper usare i linguaggi HTML e CSS comporterebbe infatti non solo un grandissimo risparmio in termini di Webmaster, ma ti darebbe anche una maggiore libertà. Saresti infatti in grado di testare in maniera autonoma varie grafiche e stili per il tuo sito.

Vediamo adesso quali sono i passaggi basilari per procedere alla modifica di un tema. 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 – davvero diretto ed efficace – del “Testa e Monta”.

Di che si tratta? Semplicemente, utilizziamo l’utile strumento di “ispeziona elemento” offerto da Google Chrome. 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 che ti permettono di vedere immediatamente il cambiamento e valutarne l’effetto.

Appena aggiornerai il browser, 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 con oculatezza 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 entrare dentro la dashboard del tuo sito WordPress e a sinistra della tua bacheca seleziona Aspetto >> Editor.

Da dove modificare il CSS:

A questo punto, apri sul tuo browser la pagina che vuoi modificare. Clicca sopra gli elementi della pagina che desideri cambiare (sidebar, logo, contenuto) utilizzando il tasto destro del mouse e successivamente clicca sulla voce “Ispeziona Elemento”.

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 procedura da seguire è molto semplice e immediata. Clicca sull’icona in basso a sinistra, ovvero la lente di ingrandimento.

A questo punto puoi cliccare sulla pagina la parte che ti interessa, per evidenziare le righe di codice che la governano. Puoi dunque decidere se modificare le righe di CSS attuali o di inserirne altre, come pure puoi aggiungere classi e id per personalizzare maggiormente la grafica.

Seleziono con la funzione “Ispeziona Elemento” cosa desidero sulla pagina, e sotto vedrò apparire il codice sorgente dell’elemento stesso. A sinistra apparirà l’HTML, che determina la creazione degli elementi della pagina mediante i Tag, e a destra il CSS che determina lo stile di questi stessi elementi.

Effettuare delle modifiche al codice sarà molto semplice e intuitivo dopo aver studiato poche ore su Codeacademy.

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 tornare nella bacheca del tuo sito WordPress. Assicurati di individuare all’interno dell’area di gestione WordPress del tuo sito un’area dedicata alle modifiche CSS custom. Se il tuo tema non dovesse avere una sezione dedicata alle modifiche custom all’interno dell’area di gestione interna, torna su Aspetto >> Editor, la pagina che ti avevo detto di aprire precedentemente.

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.

Da dove modificare l’HTML:

Con l’HTML puoi seguire la stessa procedura ma anziché operare su un file .CSS lavorerai sui file .PHP. Puoi leggere questa guida per sapere come lavorare con il linguaggio PHP

I file PHP sulla destra sono un misto di codici HTML e un misto di codici PHP, quindi se vedi dei codici strani o diversi dal solito sai che quelle pagine sono un ibrido, ovvero composti da entrambi i linguaggi. Chiaramente i codici in queste pagine seguono sempre una struttura verticale.

Per cui 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.

Questo articolo vuole servirti come base di insegnamento per andare a modificare e a personalizzare sempre di più l’aspetto grafico del tuo tema. Facci sapere la tua esperienza con la modifica del tema, e ricordati che per qualsiasi dubbio tecnico puoi sempre contare sulla nostra Assistenza Prioritaria, per ricevere risposte alle tue domande direttamente dal nostro Team di supporto.

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.