Utilizzando questo sito accetti il nostro uso dei cookie. Approfondisci

Come cambiare il logo o l’immagine header di un blog WordPress

Come cambiare il logo o l'immagine header di un blog WordPress


Vuoi cambiare il logo o l’immagine che appare nell’header (la parte superiore) del tuo tema WordPress?

Ci possono esseri varie strade da seguire…

1. Funzione “Personalizza” di WordPress

Per cercare di aiutare sempre di più l’utente nella gestione autonoma del proprio blog, gli sviluppatori di WordPress hanno messo a punto una funzionalità davvero comoda: “Personalizza”. Vai su Aspetto > Personalizza >, potrai apportare modifiche grafiche al tuo blog vedendone in tempo reale il risultato finale, e ovviamente salvarle.

Per caricare l’immagine desiderata vai su Aspetto > Testata > Selezionare immagine > pulsante sfoglia. Questa sezione non è presente in tutti i temi.

testata wordpress

Una volta caricata l’immagine, puoi impostarla come principale direttamente da qui, oppure andando su Aspetto > Personalizza > Immagine della testata e selezionando il file desiderato dal tuo computer.personalizza wordpress

2. Sostituzione dell’immagine di default

Questa è l’operazione più semplice e veloce da fare, si tratta semplicemente della sostituzione del logo di default con il tuo.

Per prima cosa occorre capire il nome del logo originale, per far ciò ti consiglio di leggere questo articolo. Più semplicemente, scarica la cartella del tuo tema via ftp, creane una copia di sicurezza, e vai nella cartella images. Qui troverai l’immagine del logo e potrai leggerne il nome (anche l’estensione (.jpg, .png, .gif) dovrà essere uguale).

Premendo con il tasto destro del mouse > Proprietà > Dettagli, leggerai le dimensioni di larghezza e altezza del logo originale. Segnatele.

Fai lo stesso procedimento per risalire alle dimensioni del tuo logo e… potrai incorrere in un piccolo problema: il logo può avere dimensioni diverse da quello originale. Quindi si aprono due strade:

Nuovo Logo con le dimensioni dell’originale

Se il tuo logo ha le stesse dimensioni di quello originale, allora creane una copia, rinominalo con il nome che hai appena trovato e caricalo sul tuo spazio web via ftp (il procedimento inverso che hai fatto per scaricare la cartella del tema) nella cartella images del tema o nella posizione dove si trova il logo originale. Sovrascrivi il vecchio file.

Fatto.

Nuovo Logo con dimensioni diverse dall’originale

Se il tuo logo ha dimensioni differenti, potrebbe essere che non si veda tanto bene. In questo caso devi modificare il file style.css (oppure modifichi le dimensioni del logo e vai al punto precedente).

Prima di tutto è fondamentale capire l’ID o la classe del contenitore del logo nell’header del tema. Per farlo ti consiglio di leggere sempre questo articolo.

Ad esempio il tuo logo ha come dimensioni larghezza pari a 200 pixel e altezza pari a 100 pixel, e supponi di aver trovato come ID “logo“. Apri il file style.css (da Aspetto > Editor >) e cerca #logo (oppure puoi cercare il nome del logo originale, fai ancora prima).

Qui dovrai aggiungere/modificare le dimensioni del tuo logo, quindi:

width: 200px;

height: 100px;

Salva le modifiche.

Ora carica il nuovo logo sovrascrivendo il vecchio.

3. Modifica del file style.css

Carica via ftp il tuo logo (meglio se nella stessa cartella del logo originale, solitamente nella cartella images del tema). A questo punto vai su Aspetto > Editor > style.css e cerca il nome del file originale.

Ad esempio, il logo originale si chiama old-logo.png mentre il tuo si chiama logo.png. Cercando nel file style.css trovi qualcosa di simile a:

background:url(images/old-logo.png) 0 0 no-repeat;

Sostituisci old-logo.png con logo.png in questo modo:

background:url(images/logo.png) 0 0 no-repeat;

Ora salva le modifiche.

Se il logo non si vede bene, tipo troppo allungato o troppo schiacciato, dovrai controllare le dimensioni del tuo logo e di quello originale. Poi vai al paragrafo precedente.

4. Il tema ha un campo dedicato

I passi precedenti sono troppo laboriosi? Ecco perchè in alcuni temi esiste un campo apposito per caricare il logo da utilizzare nel tema… con un semplice clic :)

Carica il logo

Questa funzione si può trovare sia in temi professionali a pagamento che in quelli gratuiti, bisogna solo cercare…

Semplice, veloce, efficace.

5. Se non c’è l’immagine?

Beh, se di base non è presente l’immagine, leggi questo articolo dedicato.


VUOI CREARE IL TUO SITO O BLOG WORDPRESS?

Scegli uno tra i migliori hosting per WordPress

HOSTING

Scegli uno tra i migliori hosting per WordPress

Hosting

Scegli uno tra i migliori temi WordPress professionali

GRAFICA

Scegli uno tra i migliori temi WordPress professionali

Grafica

Guide e risorse per gestire il sito WordPress a 360°

GESTIONE

Guide e risorse per gestire il sito WordPress a 360°

Gestione

EMAIL NEWSLETTER

Vuoi ricevere i miei ultimi articoli
comodamente nella tua email? È gratis!
Ben 3552 persone lo stanno già facendo!
Anonimo
   
con le dita sempre in costante, frenetico movimento sulla tastiera… vengo spesso trascinato e catturato “in rete” per colpa delle mille idee che mi girano per la testa (prima o poi troverò quella giusta)… dal futuro incerto (nonostante una laurea, e chi non lo è?..siamo in tanti!) .. credo fortemente nella condivisione della conoscenza!
9 Commenti
  • Davide

    Le scrivo per ringraziarla della sua utile guida in italiano di WP e per chiederle un consiglio.
    Mi sono appena avvicinato a WP, conoscevo solo html ed aggiornavo il sito con Dreamweaver.
    Ora ho trovato sul web un effetto di parallax slider che ho personalizzato e che vorrei inserire in un sito wp.
    Il thema che vorrei aggiornare è Pilot Fish di cui ho creato come ha suggerito il child. Sto lavorando in locale.

    L’effetto di parallasse ha un file index.html e tre fogli stile css3 (style.css, demo.css, normalize.css).

    Ho trovato sul web il suggerimento di caricare un foglio stile customizzato ed ho provato ad inserire nel file functions.php di pilot fish child le istruzioni
    add_action(‘wp_print_styles’, ‘add_custom_css’);
    function add_custom_css() {
    $url = ‘../ArtLab/styles/custom.css';
    wp_register_style(‘custom’, $url);
    wp_enqueue_style(‘custom’);
    }

    ma poi mi sono chiesto come inserire nella cartella child il file index.html e dove caricare custom.css.

    Può per favore dirmi come procedure per integrare le due programmazioni.
    Grazie.
    Davide

    • Roberto Iacono

      Non credo che funzioni con file index.html. Dovresti creare un template di pagina in php, ed adattare il codice che hai, a quello. Altrimenti, guarda come sono fatti i temi WP parallax, così capisci come puoi agire

  • luigi

    vorrei chiederti alcuni pareri e consigli in merito ad un sito web professionale che devo realizzare o far realizzare,ma dove ti scrivo,come ti contatto? ciao.Luigi.

    • Roberto Iacono

      Ciao Luigi, non effettuo nessun tipo di servizio, ma puoi scrivere a info @ robertoiacono.it

  • Roberto

    Ciao, utilissimo articolo, il tuo blog è tra le mie risorse preferite, sarà per il nome? :)
    Avrei una domanda se puoi aiutarmi, o magari indicarmi un articolo che ne parla non l’ho trovato, ho cambiato header e logo e fatto altre modifiche ma non riesco a farne una o meglio ho dei problemi. Ho usato un tema free che se vuoi puoi comprare, ho cambiato colore a molte cose ma non riesco a cambiare colore ad una barra in fondo divisa in due barra, credo footer la prima di colore nero e info la seconda marrone, ho dei problemi, quella marrone la volevo far diventare gialla quindi per fare una prova ho messo il codice del colore al posto di quello che c’era ma nulla, allora ho provato a mettere nero #000000 e lo ha preso, poi ho riprovato a mettere giallo ma non andava, allora ho rimesso il marrone ma non lo prendeva piu, ho svuotato cache del browser e ad un certo punto è riapparso, allora ho riprovato col giallo ma niente, ho riprovato col nero ma niente, non capisco che succede…

    • Roberto Iacono

      Ciao Roberto,
      hai provato a modificarlo in giallo e svuotare la cache? Per caso usi la cache anche in WP? Se sì, svuota anche quella (o disattivala momentaneamente)

      • Roberto Loiacono

        Si, la cace l’avevo svuotata sul browser, non su WP (non sapevo si potesse fare :D) però dopo un po è andata a buon fine la visualizzazione del cambiamento, a volte la risposta dei cambiamenti sul codice non è immediata sul browser… Grazie!

  • Francesco

    Articolo prezioso, per chi come me è alle prime armi con WordPess. Sono nuovo da queste parti: ti faccio i complimenti per la ricchezza del sito! Non mancherò di spulciarmelo tutto per benino 😉

Seguimi

Scarica gli ebook gratuiti

Vuoi creare e gestire il tuo blog WordPress autonomamente ed in maniera gratuita?

Allora scarica gratuitamente gli ebook Blogging Box e Le 30+ cose da non fare con WordPress, inserisci la tua email qui sotto:
13603+
Scarica gratuitamente gli ebook!

Per maggiori informazioni guarda questa pagina per la Blogging Box e questa per le 30+ cose da non fare con WordPress.

Scarica gli ebook gratuiti

Vuoi creare e gestire il tuo blog WordPress autonomamente ed in maniera gratuita?

Allora scarica gratuitamente gli ebook Blogging Box e Le 30+ cose da non fare con WordPress, inserisci la tua email qui sotto:
13603+
Scarica gratuitamente gli ebook!

Per maggiori informazioni guarda questa pagina per la Blogging Box e questa per le 30+ cose da non fare con WordPress.
Unisciti agli oltre 10999 lettori
che seguono questo blog
3152
982
2251
4614