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.
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.
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 🙂
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?
Articoli Recenti
14/01/2014 alle 10:55
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
23/01/2014 alle 09:01
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
14/01/2014 alle 20:29
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.
23/01/2014 alle 09:08
Ciao Luigi, non effettuo nessun tipo di servizio, ma puoi scrivere a info @ robertoiacono.it
17/01/2014 alle 11:25
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…
23/01/2014 alle 09:11
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)
23/01/2014 alle 10:29
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!
22/01/2014 alle 19:26
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 😉
23/01/2014 alle 09:14
Grazie mille Francesco 🙂