Guide

Come modificare un tema WordPress

Vuoi modificare il tuo tema in WordPress? In questa guida ti mostreremo come si fa in maniera sicura e veloce.

Modificare tema wordpress

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 attivare l’Assistenza Prioritaria per avere accesso completo in Area Membri e vedere quindi tutte le mie video lezioni su come usare HTML e CSS per modificare a fondo ogni aspetto del tuo sito web in WordPress.

Iscriviti al nostro video corso di HTML e il video corso di CSS e grazie 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.

Infine ricorda che se dovessi avere domande o avere bisogno di un supporto professionale, puoi attivare oggi stesso la nostra Assistenza Prioritaria rapida e gratuita - inclusiva di 32 video del Corso WordPress - quando acquisti uno spazio hosting su SiteGround (o altri hosting) tramite il nostro link. Migliaia di persone si sono già affidate a noi e possiamo aiutare rapidamente anche te.

Qui tutte le testimonianze

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.

developer tools

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.

modificare tema WordPress

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.

Assistenza WordPress rapida e veloce con SOS WP

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.

Ti sei mai chiesto cosa sia e a cosa serva un tema child? Leggi la nostra guida per scoprirlo.

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.

Registrare un dominio e uno servizio di hosting WordPress con SiteGround

Altre guide della stessa
categoria

461 COMMENTI
Commenta
  1. flavio

    Ciao ragazzi scusate la domanda ma sono neofita su wordpress. Sto creando un sito da un template acquistato su Themeforest (“Gardenplants” o roba simile,) necessito però di modificare il menu con ogni voce un colore differente e di traslare il menu un po sulla destra. se faccio ispeziona elemento mi fa vedere sulla sinistra il codice html e sulla destra un div del style.css
    lo style css contiene margin:0px che anche modificandolo non sposta niente e per il problema dei colori come faccio per modificarli non potendo operare direttamente sul html?
    Se potete aiutarmi ve ne sono grato
    Grazie infinite per il lavoro che fate!!

    Rispondi
    • Team

      Ciao Flavio, è un po’ difficile aiutarti senza avere il sito davanti. Pensiamo però che tu non abbia trovato la classe su cui agire per realizzare ciò che desideri. Consigliamo in merito la nostra guida dedicata al CSS. Se non riesci da solo, ricorda che i temi Themeforest offrono un supporto gratuito per 6 mesi dalla data di acquisto. Se hai bisogno di effettuare una modifica di stile sul tema in uso e non riesci da solo, prova a contattarli. Un saluto e buon lavoro!

      Rispondi
  2. Sonia

    Salve, ho scaricato diversi temi gratuiti perchè mi vanno benissimo anche quelli, ma anche se li scarico tutti a tre colonne, non c’è il verso che me le applica 3! Dal inizio ho costruito il blog con due colonne. Poi ho deciso che non mi piaceva optando per tre. Niente. Qualsiasi cosa io faccia…viene sempre una colonna. Come posso risolvere? Ora sto parlando del tema “IXION”. Grazie in anticipo Sonia.

    Rispondi
  3. Piero

    Buongiorno, gestisco il mio sito in modo autonomo ma non riesco ad effettuare delle modifiche alle immagini della home page e di tanto in tanto vorrei aggiungere delle nuove sezione con nuove immagini in modo da renderlo dinamico nel tempo, ho timore ad effettuare delle modifiche che possano causare dei danni e mi chiedevo se ci fosse nel Vostro team la possibilità di seguirmi.
    Oltre a questo vorrei effettuare la migrazione su un altro provider.
    Qualcuno riesce ad aiutarmi?
    Grazie per l’attenzione.

    Rispondi
    • Team

      Ciao Piero, stai usando WordPress.org? In tal caso, certo che possiamo aiutarti. Ti ricordo che puoi attivare la nostra assistenza prioritaria gratis https://sos-wp.it/assistenza-prioritaria/ con risposte da parte di esperti WordPress in meno di 1ora, su qualsiasi argomento legato alla realizzazione di un sito web; avrai accesso dedicato alla nostra esclusiva Area Membri https://sos-wp.it/area-membri/ con tanti video e risorse esclusive :) Il tutto, passando da uno dei provider migliori in circolazione! Attendiamo quindi un tuo contatto, a presto.

      Rispondi
    • Team

      Meglio utilizzare il box Personalizza, in quanto sovrascrive direttamente il foglio di stile, dando una priorità alle modifiche effettuate.

      Rispondi
  4. marina

    buonasera a tutti voi del team.
    sono ne guai e spero voi possiate aiutarmi a risolvere ho fatto creare il mio sito con il tema Illdy, non contenta di come questo viene visualizzato sugli schermi degli smartphone ho deciso di giocare un po’ con gli altri temi, ho provato con il tema beautiplus, l’ho attivato e personalizzato un po’ ma quando poi ho capito di non essere in grado di portare a termine il tutto ho deciso di tornare al tema Illdy….risultato gran parte del sito non era più al suo posto…..cosa posso fare per recuperare la prima versione creata?
    spero tanto in un vostro supporto!
    grazie anticipatamente
    Marina

    Rispondi
  5. deb

    Salve, avrei un punto oscuro che necessità di essere chiarito e sono certa che ,grazie alla vostra competenza e disponibilità, sarà certamente soddisfatto.
    WP mi chiede l’aggiornamento di Bakery ma appena clicco mi si apre una pagina di registrazione….come mai? come procedere? grazie anticipatamente per il riscontro

    Rispondi
  6. deb

    Buongiorno innanzitutto complimenti per la vostra chiarezza espositiva…ho un dubbio da sottoporvi…ho acquistato un tema su themeforest”journey” per WP e non riesco a personalizzare in maniera automatica il carattere ed il colore della barra di navigazione.Entro nella sezione dedicata ma cambio alcune cose ma questo no e ciò mi sembra strano….ringraziandovi in anticipo per il supporto,saluti

    Rispondi
  7. Gabriele

    Se io invece che sostituire volessi cancellare? nel mio caso voglio cancellare il “search”; ho trovato con “ispeziona” la dicitura (div.span4) ma come faccio a rimuoverla in modo definitivo?

    Rispondi
  8. Michela

    Ciao team!
    Anzitutto grazie per le spiegazioni ed i tutoriial sul magico mondo di WP, siete bravissimi e risolvete non pochi problemi, almeno per me che sono un “early adopter”! ;)

    Ho una domanda:
    ho impostato il mio sito partendo dal tema Twenty seventheen come da vostra guida, per poi arrivare a sostituirlo con un tema di Elementor, smontato e via via rimontato secondo le mie esigenze.

    Purtroppo ieri ho fatto qualche azione – di cui non mi sono accorta – per cui vedo nella mia home page (in Elementor), in alto, la foto di default del tema Twenty seventheen con il nome del sito ed il pay off (che dovrebbero ovviamente stare nella stringa http:// etc….).

    Co’ho fatto??!??

    AIUTATEMI VI PREGO!! :))

    Grazie mille!
    Un saluto
    Michela

    Rispondi
Mostra più commenti

Lascia qui il tuo commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *