Utilizzando questo sito accetti il nostro uso dei cookie. Approfondisci

Aggiungere il proprio logo ad un tema WordPress quando non presente

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>:

inserire logo in twentytwelve

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

div-logo

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):

#logo {
	width: 200px;
	height: 100px;
}

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

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

5. Goditi il risultato :)

risultato

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

Logo senza titolo e descrizione

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:

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

Codice 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;
}

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

link logo


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
  • Raffaele Conte

    Ciao, complimenti come sempre.
    Volevo farti una domanda per quanto riguarda il backup del sito: se il lo faccio attraverso filezille, ho un backup sia dei file del blog sia degli articoli, vero?
    Oppure ho solo i file, volevo postarti la domanda sotto l’articolo che hai scritto ma non c’è la possibilità
    Grazie mille

  • Mauro

    Ciao Roberto, ho acquistato un dominio su Amen.fr e vorrei utilizzare lo spazio offerto da Altervista ma non ho alcuna idea di come possa fare.
    Aiutino……. :)

    • Roberto Iacono

      Assicurati che su Altervista ci sia la possibilità di apportare le modifiche al tema, visto che è uno spazio gratuito…

  • marco

    Ciao andrea! ottimo articolo come sempre :)
    ti faccio una domanda OT, come hai fatto ad inserire la barra in fondo “VUOI CREARE E GESTIRE IL TUO SITO O BLOGWORDPRESS AUTONOMAMENTE?”
    hai usato un plugin? sai quali consigliarmi?
    Grazie

    • Roberto Iacono

      Ciao Marco, sono Roberto 😉

      Leggi http://www.robertoiacono.it/barra-fissa-espandibile-wordpress-jquery-expandable-sticky-bar/

      • marco

        Grazie! scusa stavo parlando con un amico :)

  • Ruben Vezzoli

    Complimenti, nel tuo sito trovo sempre delle guide interessantissime e davvero molto semplici da seguire…

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:
13598+
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:
13598+
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