SOS WP
  • Blog
  • Risorse
  • Chi siamo
  • Corsi
  • Servizi
    • Creazione Siti Web & Supporto WP
    • Consulenze Professionali
    • Formazione via Skype
    • Richiedi Subito un Preventivo
  • Assistenza WordPress
  • Menu

Apri l'indice dei contenuti

  • Come modificare un tema WordPress
    • Dove si testano le modifiche a HTML e CSS
  • Dove modificare il CSS di un tema WordPress
  • Dove modificare l’HTML di un tema WordPress
    • Conclusione

Categorie:

  • Ispirazione
  • Usare WordPress
  • Dominio e Hosting
  • Creare blog
  • Creare siti web
  • eCommerce
  • Temi
  • Plugin
  • SEO
  • Tutte

  • Creare siti multlingua
  • Copywriting
  • Dove trovare immagini
  • Email marketing
  • Guadagnare online
  • Varie

CATEGORIE

  • Ispirazione
  • Usare WordPress
  • Dominio e Hosting
  • Creare blog
  • Creare siti web
  • eCommerce
  • Temi
  • Plugin
  • SEO
  • Creare siti mulitlingua
  • Copywriting
  • Dove trovare immagini
  • Email marketing
  • Guadagnare online
  • Varie

Comincia qui per avere la soluzione al tuo problema

Background Icons
Come modificare un tema WordPress
Sei qui:
  • Home /
  • Blog /
  • Come usare WordPress

Come modificare un tema WordPress

Andrea Di Rocco 22 Agosto 2019
477

Apri l'indice dei contenuti

  • Come modificare un tema WordPress
    • Dove si testano le modifiche a HTML e CSS
  • Dove modificare il CSS di un tema WordPress
  • Dove modificare l’HTML di un tema WordPress
    • Conclusione

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à.

Se invece vuoi personalizzare il tuo tema, ma non intendi formarti per farlo in autonomia, rivolgiti alla nostra Assistenza WordPress. I nostri sviluppatori potranno soddisfare ogni tua richiesta!

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.

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

Leggi

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.

Seleziona elemento da analizzare

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.

Modificare un tema WordPress - CSS

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.

Tags: BrowserCSSdesign-sitoFeaturedGraficaGuide popolaririsorse-sitoTema childTemi WordPressUsare WordPress
Lascia un Commento

Andrea Di Rocco

Fondatore di SOS WP, Autore

First Badge Item Second Badge Item Third Badge Item
La mia passione per WordPress mi ha portato negli ultimi 10 anni a voler aiutare sempre più persone a creare blog e siti web in WordPress in completa autonomia. Spero che troverai utili le oltre 650 guide su WordPress e sulla SEO che ho pubblicato su questo blog e se ne hai voglia ti invito a leggere la mia storia cliccando sul pulsante qui sotto.
Leggi la mia storia
Corso WordPress di SOS WP
Ti potrebbe interessare:
Tornare alle versioni precedenti di temi e plugin con WP Rollback
Tornare alle versioni precedenti di temi e plugin con WP Rollback08 June 2017
Come ottimizzare le immagini con WP Smush
Come ottimizzare le immagini con WP Smush25 April 2018
Come installare WordPress da zero
Installare WordPress: la guida completa15 June 2020
Il server DNS non risponde: cosa fare?
Il server DNS non risponde: cosa fare?11 January 2019
Creare un menu di navigazione su WordPress
Come creare un menu di navigazione su WordPress14 February 2018
I 10 migliori plugin per i blocchi di Gutenberg
I 10 migliori plugin per i blocchi di Gutenberg16 December 2020
477 commenti

Lascia un commento
  1. Rossella
    Rossella dice:
    6 Agosto 2020 alle 5:44 am

    Salve, seguendo la vostra guida per la modifica di un template per l html sono andata su single.php ma io ho bisogno di togliere l immagine del logo ed inserire solo testo:
    Rossella. non trovo la pagina dove modificare in questo modo…grazie

    Rispondi
    • SOS WP Team
      SOS WP Team dice:
      7 Agosto 2020 alle 9:31 am

      Ciao Rossella, hai cercato anche dentro l’index.php? Attenzione, fai un backup prima di procedere a fare modifiche dirette sul codice del tema!

      Rispondi
  2. Adriano
    Adriano dice:
    8 Maggio 2020 alle 1:58 pm

    Buongiorno, capita che apportando delle modifiche sul tema tramite css le modifiche non appaiono e in altri casi appaiono dopo molto tempo. Un saluto

    Rispondi
    • SOS WP Team
      SOS WP Team dice:
      8 Maggio 2020 alle 2:46 pm

      Ciao Adriano, dipende dalla cache probabilmente. Prova a disattivare i plugin della cache se li hai, oppure contatta il tuo provider.

      Rispondi
  3. Penelope
    Penelope dice:
    19 Marzo 2020 alle 7:15 pm

    Salve, sto provando a modificare un’immagine dentro l’header nel tema hestia (non il logo). Vorrei affiancarla al menu, ma non trovo esattamente la posizione in cui esso si trova, in nessun file. Mi potete aiutare? Grazie in anticipo.

    Rispondi
    • SOS WP Team
      SOS WP Team dice:
      22 Marzo 2020 alle 5:05 pm

      Ciao Penelope, in questo caso dovresti modificare l’immagine via CSS. Leggi in merito questa guida. Un saluto!

      Rispondi
  4. Niccolo'
    Niccolo' dice:
    6 Gennaio 2020 alle 3:53 pm

    Buonasera.
    Ho provato ad aprire il file style.css del tema wordpress ma non mi si apre il listato che vedevo usando la funzione ispeziona di Chrome e dunque non riesco ad apportare le modifiche del caso.
    Come posso risolvere?
    Grazie in anticipo.

    Rispondi
    • SOS WP Team
      SOS WP Team dice:
      8 Gennaio 2020 alle 12:46 pm

      Ciao, hai già visionato la nostra guida sul CSS?

      Rispondi
  5. Monica
    Monica dice:
    24 Dicembre 2019 alle 1:18 pm

    Buongiorno,
    sto creando il sito in locale, ho praticamente terminato ma non riesco a togliere i collegamenti ai social come:
    …CONNECT WITH ME
    © Copyright Qode Interactive
    This demos is a part of the Bridge theme.
    MIXCLOUD
    BANDCAMP
    SOUNDCLOUD
    MEDIUM
    TWITTER
    LASTFM
    INSTAGRAM
    Il tema che sto usando è musician di Bridge.
    Se potesse aiutarmi gliene sarei grata.

    Monica

    Rispondi
    • SOS WP Team
      SOS WP Team dice:
      26 Dicembre 2019 alle 1:13 pm

      Ciao Monica, sei andata su Aspetto>Widget? Un saluto!

      Rispondi
  6. giuseppe
    giuseppe dice:
    4 Ottobre 2019 alle 7:22 pm

    Salve, Avrei un problema da porvi, vorrei cambiare l’indirizzo dell’icona di share twitter del mio tema wordpress (con ultimo aggiornamento disponibile risalente al 2016) dall’editor dei temi, perche con il link inserito che è questo https://twitter.com/home?status=https:indirizzopagina dal pc mi rimanda alla home di twitter e non condivide la pagina, mentre da dispositivi mobile funziona. In rete ho visto che l’url da inserire è questa https://twitter.com/intent/tweet?status=https:indirizzopagina infatti se modifico l’url da ispeziona elemento funziona… ma dall’editor di temi non riesco a trovare da nessuna parte l’url per poterlo modificare. Andrea hai qualche suggerimento?
    Grazie.

    Rispondi
    • SOS WP Team
      SOS WP Team dice:
      6 Ottobre 2019 alle 6:01 pm

      Ciao Giuseppe, di che tema si tratta? Hai verificato se trovi il campo da Aspetto>Personalizza? Consigliamo in ogni caso di cambiare tema, anche per ragioni di sicurezza. Troppo il tempo passato dall’ultimo aggiornamento! Rischi problemi di compatibilità importanti con le ultime versioni di WordPress ed anche con i plugin.

      Rispondi
  7. Vercingetorige
    Vercingetorige dice:
    31 Luglio 2019 alle 11:06 am

    Ciao Team, nel menù della dashboard non compare più l’Editor.
    E’ stato rimosso?
    Essendo i plugin disponibili solo per chi ha pagato, non è più possibile modificare il layout in html senza un account “premium”?
    Grazie per le risposte.

    Rispondi
    • Team
      Team dice:
      31 Luglio 2019 alle 11:31 am

      Ciao, semplicemente ti trovi su WordPress.com, la versione “limitata” di WordPress. Leggi in questa guida le differenze tra le due versioni. Rimaniamo a disposizione, un saluto!

      Rispondi
      • Arianna
        Arianna dice:
        26 Aprile 2020 alle 9:05 pm

        Ciao, una domanda da grande principiante e inesperta. Sto collaborando alla costruzione amatoriale di un sito di escursioni. Volevo sapere se c’è modo di intervenire sul tema lovekraft andando a modificare l’aspetto dei link delle pagine nella barra del menù. In particolare vorremmo fare in modo che sia evidenziata la pagina corrente. Questa opzione non è prevista dal tema, ma non vogliamo sostituirlo con un altro. Grazie mille

        Rispondi
        • SOS WP Team
          SOS WP Team dice:
          27 Aprile 2020 alle 8:25 am

          Ciao Arianna, si è possibile. Puoi inserire del codice CSS per personalizzare l’aspetto del link, vedi come fare in questa guida. Un saluto e buon lavoro!

          Rispondi

Domande? Lascia un commento!

Il team di SOS WP risponde tutti i giorni. Unisciti anche tu alla conversazione…

Lascia un commento Annulla risposta

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

Servizi

  • Creazione blog professionali
  • Realizzazione siti web
  • Messa a norma GDPR
  • Consulenza SEO
  • Formazione WordPress
  • Chiedi un preventivo

LINK RAPIDI

  • Scopri TUTTO SEO™
  • Entra in Area Corsi
  • Gruppi Facebook
  • Testimonianze
  • Contattaci
  • Lavora con noi

Vuoi creare un blog? Non sai come muoverti nel mondo di WordPress? Desideri essere primo su Google con il tuo sito web?

Richiedi Preventivo

  • Safe Payment IconPagamenti sicuri con:
    Maestro IconVisa IconMastercard IconPaypal Icon e altri…
  • Support IconSupporto continuo dal Lunedì al Venerdì 08:30 – 18:30
SOS WP
  • Chi Siamo
  • Chi è Andrea Di Rocco
  • TUTTO SEO™
  • TrustPilot
  • Privacy e Cookie Policy
  • Facebook
  • Youtube
  • Linkedin
 

© Copyright 2012-2021 | SOS WP™ Metro Effort Limited. Tutti i diritti sono riservati.

 
Scorrere verso l’alto
SOS WP utilizza i cookie per migliorare la tua esperienza: ACCETTOImpostazioni
Privacy & Cookies Policy

Panoramica sulla privacy

Quando si visita qualsiasi sito web, questo può memorizzare o recuperare informazioni sul tuo browser, in gran parte sotto forma di cookie. Queste informazioni potrebbero essere su di te, le tue preferenze o il tuo dispositivo e sono utilizzate in gran parte per far funzionare il sito come te lo aspetteresti. Le informazioni di solito non ti identificano direttamente, ma possono fornire un'esperienza web più personalizzata. Poiché rispettiamo il tuo diritto alla privacy, puoi scegliere di non consentire alcuni tipi di cookie. Clicca sulle intestazioni delle diverse categorie per scoprire di più e modificare le impostazioni predefinite. Tuttavia, il bloccaggio di alcuni tipi di cookie può avere impatto sulla tua esperienza del sito e dei servizi che siamo in grado di offrire.
Maggiori informazioni
Cookie di terze parti
Salva e accetta