Come aggiungere un banner in colonna laterale

banner ispirato al tema grafico di WordPress

La piattaforma di WordPress consente un’agevole gestione delle immagini. Questo è soprattutto verificato negli ambienti “Articolo” e “Pagina“.

Diverso è l’inserimento di immagini nelle colonne laterali, normalmente destinate alla gestione, mediante link testuale, dei collegamenti interni/esterni.

Questi collegamenti si trovano all’interno dei “Widget“. Un Widget che consente il collegamento con l’omonima ed apprezzata galleria immagini è Flickr. I Widget si trovano in “Aspetto“.

Ma come fare per inserire un’immagine isolata nella colonna laterale?

Mancando uno spazio predisposto, un Widget appunto, è il caso di usare un po’ di codice HTML.

Punto 1: dimensioni del banner

Innanzitutto si tratta di calcolare lo spazio disponibile nella colonna laterale dove verrà inserito il banner:

• mediante il tasto “PrtSc” della tastiera (probabilmente in alto a dx, vicino a F12) fotografare la home page del sito WordPress in oggetto
• in Photoshop cliccare “Ctrl + n” o “File/Nuovo” e quindi “Ctrl + v“, ossia copia
• calcolare almeno la larghezza massima disponibile per l’inserimento dell’immagine
• riportare in Photoshop queste dimensioni e comporre il banner

Punto 2: inserimento del banner

Dopo aver creato l’immagine o il banner, inserire il file in un Articolo o in una Pagina che potrebbero essere destinati alla gestione di questi files.

Un modo per “nascondere” questo Articolo potrebbe essere quello di retro datarlo.

come inserire un banner in WordPress

Una volta inserito il banner nell’articolo, selezionarne la url: è sufficiente visualizzare l’articolo, cliccare sull’immagine o mediante mouse-dx selezionare la funzione “Visualizza immagine“. Es: http://500tutorial.files.wordpress.com/2009/09/banner_002.jpg, quindi il dominio, la data d’inserimento ed il nome dell’immagine.

Punto 3: inserimento del banner nella colonna

• A questo punto basterà passare nel pannello di controllo del sito, selezionare “Aspetto/Widget“
• mediante trascinamento (drag & drop) spostare il pulsante “Testo” dalla colonna (sx) dei Widget disponibili alla “Barra laterale” (dx) ed aprirlo cliccando sul triangolino che si trova a dx del titolo.
• a questo punto si può inserire un “Titolo” che verrà visualizzato (es: Sponsor)
• ed il codice HTML che consentirà di collegarsi con il banner appena inserito

come inserire un banner in WordPress

In linea di massima il codice sarà di questo tipo:

1. <a><img src=”http://URL IMMAGINE” border=”0″></a><p>
   per l’inserimento di un’immagine semplice
2. <a href=”http://LINK A PAGINA WEB” target=”_blank”><img src=”http://URL IMMAGINE” border=”0″></a>
   per l’inserimento di un banner che rimandi (Link) ad un’altra pagina Web (si consiglia l’uso del comando target=”_blank” per aprire il Link in un’altra scheda/finestra del Browser)
3. una variante può essere rappresentata dal Link alla Email, anzichè una pagina Web;  in questo caso la stringa sarà:
   <a href=”mailto:INDIRIZZO EMAIL” target=”_blank”><img src=”http://URL IMMAGINE” border=”0″></a><p>

inserimento di un banner: solo immagine o link a pagina web o posta elettronica

Il comando <p> consente di distanziare le immagini.

inserimento di un banner: esito finale