Come inserire un logo su Wordpress


Una volta creato un blog su Wordpress, bisogna personalizzarlo, una modifica importante è quella del logo. Solitamente non è presente un logo già di suo ma vi è una scritta che rappresenta il titolo del blog, poi vi è la descrizione, e poi l'immagine della testata che non è un vero e proprio logo ma che può comunque essere utilizzata per questa funzione.

Nei temi migliori di Wordpress basta andare su Aspetto e trovare un pulsante per caricare l'immagine per il logo che andrà automaticamente a posizionarsi nella posizione assegnata ma molti altri temi di livello minore manca una sezione per il logo ed occorre agire manualmente nel modello del tema.

Come sostituire il titolo del blog con un logo

Prendiamo il caso di uno dei temi standard Twenty Eleven
Da aspetto->editor, selezionate il file header.php (la Testata), quindi cercate il seguente codice:
<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>

Bisogna sostituirlo con questo:
<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="http://indirizzo-immagine" height="100" width="300" /></a></span></h1>


Come cercarlo se si ha un tema diverso

Questa pratica va bene per il tema Twenty Eleven ma non per gli altri temi, anche se comunque il procedimento è sempre lo stesso ma cambia il codice infatti il codice <?php bloginfo( 'name' ); ?> rappresenta il titolo del blog in versione testuale presente in tutti i modelli, il secondo non fa altro che sostituire il testo con un'immagine che dovrete adattare in altezza e larghezza in base lo spazio a disposizione.
Negli altri temi all'interno del file header.php non troverete la parola sitle-title ma potete trovare blog-name o site-namePer scoprire il nome esatto dovete cliccare col pulsante destro del mouse sul titolo del blog e poi selezionare ispeziona elemento, una volta trovata la parola bisogna cercarla nel file header.php.


Come spostare a sinistra, a destra o centrare un logo

Una volta identificato il nome facendo ispeziona elemento, bisogna cercare tale nome nel foglio CSS, e si deve andare su Aspetto->Foglio di Stile Stile.css
Tale parola sarà preceduta da un punto, ad esempio nel tema Twenty Eleven sarà .Site-title, essa sarà seguita da delle parentesi graffe che ne contengono il codice css, cancellate il codice interno e sostituitelo nel seguente modo:
.site-title {margin-left: -50px;} //per spostarlo più a sinistra 
.site-title {margin-left: 50px;} //per spostarlo più a destra

Aumentate o diminuite il valore di esempio "50" per posizionarlo come volete ma soprattutto come si vede al meglio.

Anche voi avete avuto il problema del logo? Sembra facile ma è un grosso problema sostituirlo, motivo per cui molti scelgono temi dove si ha la possibilità di inserirlo semplicemente caricando un immagine.


9 commenti :

  1. ciao, ho fatto come indicavi ma non riesco a dimensionare l'immagine, rimane fissa. come devo fare?

    RispondiElimina
  2. fatto!! grazie comunque, mi sei stato !!molto utile :)

    RispondiElimina
    Risposte
    1. Mi fa piacere, questa è una delle prime guide, forse anche la più brutta che ho scritto riguardante Wordpress. Se ti ha aiutato anche un pochino allora scriverò altre guide migliori nei prossimi giorni.

      Elimina
  3. salve ma dove c'è scritto site-name bisogna inserire il nome del sito?

    RispondiElimina
    Risposte
    1. No perché quello è il nome della classe che puoi usare per spostare il logo con il css. Per inserire il nome devi andare su Impostazioni > Generali > Titolo Sito.

      Elimina
  4. Salve, come hai detto alla fine dell'artico è un grosso problema sostituirlo. Nel mio caso, dopo aver fatto quello che indicavi, mi è spuntata la classica immagine bianca con il foglio piccolino al centro. Come faccio a mettere il mio logo?

    RispondiElimina
    Risposte
    1. quello foglio piccolino appare quando non riconosce l'url dell'immagine; devi sostituire l'url vecchio con quello nuovo (caricato nel blog e funzionante).

      Elimina
  5. Salve.. una curiosità.. come si cambia la dimensione dell'immagine?...
    Ho provato a podificare i valori width e height del codice che hai postato.. ma non cambia nnt

    RispondiElimina
    Risposte
    1. quelle dimensioni incrementano lo spazio dell'immagine, cioè risulta più esteso il logo anche se l'immagine rimane inalterata. Dovrai scaricarla e ridimensionarla con un programma di grafica (Paint, Photoshop, Gimp) e poi caricarla nuovamente.

      Elimina

I commenti dovranno prima essere approvati da un amministratore. Verranno pubblicati solo quelli utili a tutti e attinenti al contenuto della pagina. Per commentare utilizzate un account Google/Gmail, altrimenti la modalità "anonimo".