Se avete necessità di sostituire il titolo del vostro blog WordPress con un’immagine o con un logo per personalizzare al meglio il vostro sito è possibile farlo agendo manualmente sul codice html.
Attenzione, stiamo parlando di sostituire il titolo del sito non dell’immagine sottostante. Quella si può cambiare agilmente dal menù del cms.
Vediamo allora come si può fare.

N.B.
Questo tipo di operazione puoi farla sul WordPress in cui hai diritti amministrativi e nella versione completa, quindi sul cms che hai installato in locale oppure sullo stesso che hai caricato su un server col tuo dominio.
Sul blog su cui state leggendo, quello pre-installato e offerto da wordpress.com, non è possibile applicare la modifica in quanto ha delle limitazioni e non è possibile accedere al codice nudo e crudo del cms.

N.B.2
In questo articolo si va a modificare l’header relativo al tema “Tiny Framework”, quindi se utilizzate un tema diverso da questo la procedura potrebbe variare anche se il principio resta lo stesso.

Come dicevamo, WordPress, oltre a fornire numerosi plugin per personalizzare il sito, permette in caso di necessità di accedere direttamente al codice delle sue pagine.
Anche se questa operazione è la meno indicata, in quanto c’è il rischio di sovrascrivere il proprio codice in caso di aggiornamento dell’applicazione, è la procedura più rapida.
Mettiamo il caso che si voglia aggiungere il logo dell’azienda al posto del semplice titolo di testo del sito, ecco come fare:

Da amministratore andare nella bacheca, cliccare su “Aspetto” quindi “Editor”.

Vedremo una finestra centrale con del codice e sulla destra la finestra “Template” con la lista delle varie parti che compongono la pagine del nostro blog.
Clicchiamo quindi su “Testata del tema (header.php)” e vedremo nella finestra centrale il codice che compone l’header delle nostre pagine.

Il titolo della pagina è gestito da un controllo if che in pratica dice: se ti trovi nella home del sito visualizza questo altrimenti visualizza quest’altro. Poi segue la parte della decrizione, quella sotto il titolo, che viene sempre eseguita.
Nel nostro caso andremo a nascondere solo la parte del titolo in quanto la descrizione vogliamo tenerla sotto al logo.
Ho preferito commentare la parte di codice che non serve piuttosto che eliminarla, ma nulla vi vieta di rimuoverla completamente.

Andiamo quindi a commentare la parte che segue l’if e quella che segue l’else ma lasciamo invariata la restante:

Per chi fosse a digiuno di html il commento permette di nascondere, ma mantenere, una porzione di codice alla visualizzazione. I tag di apertura e chiusura sono “<!- -” e “- ->”, quindi tutto ciò che scrivo all’interno di questi due tag sarà trasparente alla pagina finale.

NOTA:
Se inserite dei ritorno a capo nel codice non cambia niente ma migliora la leggibilità.

Come si vede dall’esempio ho utilizzato i due tag per commentare del codice ma anche per descrivere l’operazione che faccio e ricordarmelo.
I tag php non li commento perchè non serve, dato che ho eliminato il codice eseguito al loro interno.

Ho eliminato così il titolo del sito presente all’inizio della pagina.
Ora non mi resta che aggiungere l’immagine del logo al suo posto.

Cerchiamo la funzione “tha_header_before()” e aggiungiamo di seguito il codice che include il nostro logo:

Se ci interessa inserire il logo, senza renderlo un link che rimanda alla home, basta inserire solo il codice:

NOTA:
Tra le virgolette del tag src va indicato il percorso dell’immagine che abbiamo caricato precedentemente nel sito. Per caricare l’immagine del logo basta andare in “Media” -> “Aggiungi nuovo”, caricare il nostro logo e salvare. Nell’elenco dei media comparirà l’immagine del logo. Apriamo l’immagine e copiamo l’URL dell’immagine che andremo a incollare tra le virgolette del tag src.

P.S.
Io ho aggiunto un logo più piccolino anche alla base delle pagine del sito. Per far questo ho modificato la porzione “Piè di pagina del tema (footer.php)” aggiungendo lo stesso codice che ho aggiunto nell’header. Il punto esatto in cui aggiungere il codice per avere il logo alla base della pagina è dopo questa riga:

Io ho messo il seguente codice riducendo di 100 pixel la dimensione del logo:

Come potete vedere il tutto è racchiuso in un div a cui ho applicato la classe “myalign” per allineare al centro il logo.
Nel mio WordPress infatti faccio uso del plugin “CSS Theme Override” che mi permette di aggiungere classi css personalizzate.

Ed ecco un esempio del risultato finale,

logo nell’header:

logo più piccolo nel footer:

Annunci