nuZz.it

Hack-Wordpress: inseriamo un’immagine come logo al posto del titolo e dello slogan!

Tra le varie modifiche, personalizzazioni e ritocchi vari che un buon blogger si trova ad affrontare, certamente c’è l’annosa questione di cambiare il titolo del blog e sostituire all’intestazione e allo slogan un buon logo che renda il tutto più personalizzato e maggiormente predisposto all’influenza mediatica degli internauti, perchè si migliora l’aspetto dunque:

• migliorie concerneti l’aspetto dell’interazione uomo-macchina
• migliorie grafiche che rendono maggiormente appetibile il contenuto fruibile
• gestione avanzati dei contenuti, con possibilità di rendere un template veramente personale

Allora, personalmente tra le varie modifiche apportate al mio blog, una delle prime è stata quella di cambiare logo e modificare il titolo inserendo un’immagine. Il problema è che tutto questo non può essere effettuato da pannello di controllo di wp, ma deve essere effettuato manualmente, modificando opportunamente alcuni file. Ecco come fare:

1) andiamo con il nostro gestore di ftp – che sia esso CuteFTP o FileZilla ( quello che uso io ) all’interno della cartella dove sono posizionati i template del blog wordpress, nel mio caso /nuzuzznt/wp-content/themes/nome-template dove nome-template ovviamente indica il template in uso che volete modificare.

2) a questo punto fate un download del file header.php (intestazione) e del file style.css che sono i due file che andremo a modificare

3) aprite header.php con il vostro programma che usate per i file php (se non ne avete uno prendete DreamWeaver, certamente il migliore)
4) vedrete tanto bel codice che non dovete minimamente toccare, a parte un div. Cercate tra i div presenti nel file header.php il seguente:

<div id="header"> </div>

5) tra i due div, uno di apertura e uno di chiusura, si deve aggiungere il codice per aggiungere l’immagine che sarebbe il seguente:

<a href="http://www.nuzz.it"> <img src="http://www.nuzz.it/wp-content/themes/nome-template/nuzz.png" alt="nuZz - Occhi sul mondo!" /></a>

… ovviamente nell’etichetta img src dovete inserire il link completo del vostro logo sul vostro server, dunque ad esempio – http://www.miosito.it/miefoto/miafoto.jpg e in alt inserite opzionalmente il vostro slogan.

-Ecco il mio header modificato:

Perfetto, praticamente abbiamo finito! Ora dobbiamo solo andare ad apportare delle piccole modifiche al foglio di stile style.css

6) apriamo il foglio di stile, style.css scaricato precedentemente dal gestore di FTP e apriamolo con DreamWeaver o simile. Dobbiamo aggiungere i seguenti tag al codice già presente:

#header-content h1#logo {
display: none;
}
#header-content h2#slogan {
display: none;
}

-Ecco il mio style.css modificato:

Come potete notare, queste 2 definizioni di stile per le etichette, si riferiscono ai tag usati poi nel header.php, in particolare servono per dire al parser che deve formattare l’html in modo tale che sia il titolo che lo slogan vengano nascosti. Quindi l’effetto creato è evidente, scompare il titolo (nuZz), scompare il motto (Occhi sul mondo!) e al suo posto compare il contenuto del href specificato prima.

7) procedete a fare l’upload sul vostro server dei file appena modificati.

—-

Nel mio caso, come giudicate la mia intestazione? Vi piace il mio logo? Cosa cambiereste?

Buona nuZz!