Aggiungere il proprio logo ad un tema WordPress quando non presente

Hai un tema che non possiede nessun logo e vuoi mostrare il tuo? Magari anche con il link alla homepage? E allora continua a leggere 🙂

Personalmente faccio così: carico l’immagine sul mio spazio web nella cartella images del tema, creo un contenitore (div) con ID “logo” di dimensioni uguali a quelle del mio logo, infine utilizzo l’immagine caricata come background per il contenitore appena creato.

Ovvero?

1. Carico il mio logo via ftp nella cartella images del tema che voglio utilizzare. Se la cartella non c’è, la creo.

Per mostrarti i vari passaggi, utilizzerò un logo di 200 pixel di larghezza e di 100 pixel di altezza (le dimensioni le trovi cliccando sopra il file del logo col tasto destro del mouse > Proprietà > Dettagli >), chiamato logo.png.

2. Vado su Aspetto > Editor > header.php . Leggendo questo articolo riuscirai a capire i riferimenti del codice HTML da cercare per trovare il punto esatto di dove vuoi inserire il tuo logo.

Ad esempio nel tema TwentyTwelve capisco che voglio inserire il mio logo all’interno del contenitore con id “masterhead“, più precisamente dentro <hgroup>:

Quindi in header.php mi posiziono dopo il codice <hgroup> e creo il mio contenitore:

3. Vai su Aspetto > Editor > style.css ed aggiungi il codice per lo stile del contenitore appena creato (io mi trovo meglio ad inserirlo alla fine, ma sarebbe meglio mantenere un certo ordine, quindi inserirlo nella sezione dell’header):

[css]
#logo {
width: 200px;
height: 100px;
}
[/css]

4. Non ti resta altro da fare che impostare l’immagine come sfondo di questo contenitore:

[css]
#logo {
background:url(images/logo.png) 0 0 no-repeat;
width: 200px;
height: 100px;
}
[/css]

5. Goditi il risultato 🙂

6. In questo esempio, si potrebbe anche eliminare il titolo (<h1>) e la descrizione (<h2>) così da rendere più gradevole l’aspetto visuale:

Voglio inserire un link sul logo!

Niente di complesso, basta inserire il codice HTML per il link (nel file header.php) e il codice CSS per lo stile del link (nel file style.css).

In definitiva dovrai avere questi due codici:

Codice HTML:

[php]
<div id="logo">
<a href="<?php echo esc_url( home_url( ‘/’ ) ); ?>" title="<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>" rel="home">
</a>
</div>
[/php]

Codice CSS:

[css]
#logo {
background:url(images/logo.png) 0 0 no-repeat;
width: 200px;
height: 100px;
}
#logo a {
width: 200px;
height: 100px;
display: block;
text-decoration: none;
}
[/css]

Ora il logo punterà alla homepage, come è giusto che sia…