Come aggiungere immagini personalizzate alla sidebar

Questa guida è stata aggiornata il 11 Gennaio, 2020

Quante volte mi è stato chiesto come aggiungere immagini personalizzate nella sidebar? Tantissime!

Se ti stai chiedendo in questo momento come farlo, hai lo stesso dubbio della maggior parte degli utenti WordPress (e in questa guida troverai la soluzione che cerchi).

Il problema di fondo è che non esiste un widget nativo per aggiungere immagini personalizzate alla sidebar. C’è quello per aggiungere blocchi di testo, ma non uno specifico per le immagini.

Aggiungere foto e grafiche in quest’area del sito è senza dubbio molto utile. Per esempio, potresti inserire un banner, la tua foto, i loghi dei siti con cui collabori, eccetera.

Oggi ti spiegherò come aggiungere immagini personalizzate nella sidebar del tuo sito, sia con un metodo che prevede l’uso di plugin che manualmente (se hai a disposizione qualche minuto in più ti consiglio di approfondire questo secondo metodo che è comunque molto semplice).

Aggiungere immagini personalizzate nella sidebar con Image Widget

Questo plugin è molto utile per creare widget contenenti foto, loghi o altre grafiche.

Installato Image Widget, quando navighi in Aspetto > Widget trovi un nuovo widget chiamato “Image Widget”.

Questo widget è estremamente semplice da usare. Basta selezionare l’immagine dalla libreria media o caricarne una nuova. Poi, appariranno i campi da compilare:

• Titolo: il titolo dell’immagine:
• Testo alternativo: l’attributo alt;
• Related: l’attributo rel del link;
• Didascalia: che apparirà al di sotto dell’immagine;
• Link: qui inserisci un URL, se vuoi che ci sia un collegamento ipertestuale;
• Link title: l’attributo title del link;
• ID del link: l’attributo ID se hai bisogno di identificarlo.

Infine, puoi decidere se aprire il link nella stessa finestra o in una nuova, e stabilire le dimensioni e l’allineamento dell’immagine.

Quando salvi le impostazioni del widget l’immagine è automaticamente visibile nella sidebar.

Attenzione! Aggiungere immagini personalizzate alla sidebar con i widget è veramente molto semplice. Se però vuoi aggiungere solo una o due immagini e prevedi di non aggiornarle per un periodo di tempo abbastanza lungo, ti consiglio di usare la soluzione senza plugin descritta nei paragrafi che seguono.

Il motivo è semplice: è sempre meglio cercare di limitare il numero di plugin installati sul tuo sito. Ogni strumento va infatti ad appesantire leggermente il server ed aumenta anche la possibilità che ci siano eventuali problemi di compatibilità con gli aggiornamenti futuri.

Riassumendo, ti suggerisco di usare i plugin solo se vuoi inserire numerose immagini e/o aggiornarle frequentemente.

Aggiungere immagini alla sidebar manualmente

Esiste un metodo per aggiungere immagini personalizzate alla sidebar senza installare plugin che è altrettanto semplice. Ti basta solo familiarizzarti con alcuni brevi codici HTML.

Per prima cosa, carica l’immagine che vuoi usare all’interno della Libreria Media. Se riscontri dei problemi, potrai risolvere l’errore HTTP durante il caricamento di immagini in maniera molto semplice. Fatto questo, trova l’immagine all’interno della Libreria e clicca Modifica.

Nella schermata che si apre, sulla destra trovi un campo chiamato “URL del file”. Questo link è effettivamente la posizione del file all’interno del server; prendine nota perché ci servirà.

Ora naviga in Aspetto > Widget. Qui aggiungi alla sidebar un widget di testo (questo tipo di widget è presente per default su tutti i siti WordPress).

All’interno del widget, incolla questo codice, modificandolo in modo che vi sia all’interno l’url della tua immagine.

<img src="INCOLLA QUI L’URL DELL’IMMAGINE CHE HAI COPIATO PRECEDENTEMENTE">

Quando salvi il widget, l’immagine è immediatamente visibile nella sidebar.

Sempre usando codici HTML puoi personalizzare l’immagine ulteriormente:

Imposta le dimensioni dell’immagine

Se vuoi ridimensionare il file, puoi impostarne altezza e larghezza inserendo prima del > di chiusura: width=”125″ height=”125″ (questo è un esempio dove 125 è la misura in pixel).

Quindi, il risultato finale è:

<img src="INCOLLA QUI L’URL DELL’IMMAGINE CHE HAI COPIATO PRECEDENTEMENTE" width="125" height="125">

In questo caso l’immagine sarebbe ridimensionata in modo da misurare 125 pixel sia di larghezza che di altezza.

Aggiungi un link all’immagine

Un altro accorgimento che puoi adottare per personalizzare le tue immagini consiste nel renderle cliccabili con un link a tua scelta. Per farlo, ti basta aggiungere il codice

<a href=”INSERISCI QUI IL LINK DELLA PAGINA DI DESTINAZIONE”> prima del codice contenente l’URL del file media e </a> alla fine.

Questo è il risultato finale:

<a href="INSERISCI QUI IL LINK DELLA PAGINA DI DESTINAZIONE"><img src="INCOLLA QUI L'URL DELL'IMMAGINE" width="125" height="125"></a>

Se vuoi fare un passo extra e far sì che quando l’utente clicca l’immagine il link si apra su una nuova scheda, aggiungi target=”_blank” rel=”noopener noreferrer” dopo il link di destinazione. In questo modo:

<a href="INSERISCI QUI IL LINK DELLA PAGINA DI DESTINAZIONE"  target="_blank" rel="noopener noreferrer"><img src="INCOLLA QUI L'URL DELL'IMMAGINE" width="125" height="125"></a>

Centra l’immagine

Se la tua immagine non è della stessa larghezza della sidebar, nella maggior parte dei casi è utile centrarla per renderla visivamente più piacevole.

Per farlo, ti basta aggiungere il codice <div style=”text-align: center”> prima dei codici relativi al link esterno ed al file media, e </div> alla fine. Questo è il risultato finale:

<div style="text-align: center"><a href="INSERISCI QUI IL LINK DELLA PAGINA DI DESTINAZIONE"  target="_blank" rel="noopener noreferrer"><img src="INCOLLA QUI L’URL DELL’IMMAGINE CHE HAI COPIATO PRECEDENTEMENTE" width="125" height="125" ></a></div>

Se non vuoi rendere la tua immagine cliccabile, ma comunque centrata, puoi usare lo stesso codice omettendo quello relativo al link esterno. L’importante è che il tag di apertura e quello di chiusura circondino il codice usato per inserire l’immagine. In questo modo:

<div style="text-align: center"><img src="INCOLLA QUI L’URL DELL’IMMAGINE CHE HAI COPIATO PRECEDENTEMENTE" width="125" height="125" ></div>

Quando inizi a riconoscere la struttura di questi codici, personalizzarli diventa molto semplice.

Ti consiglio di prenderne nota ed iniziare a sperimentare; vedrai che dopo un po’ di pratica non avrai bisogno del plugin!

Conclusione

Nella guida di oggi abbiamo visto due metodi per aggiungere immagini personalizzate alla sidebar: uno che prevede l’utilizzo di plugin ed uno manuale.

Come ho già scritto nel post, ti consiglio di fare pratica con il metodo manuale, così da non aver bisogno del plugin ed evitare di aggiungere strumenti non necessari al tuo sito.

Come al solito, ora ti invito a lasciare tutti i tuoi commenti e domande qui sotto. Questo è un argomento di interesse per molti utenti, quindi, non essere timido e per qualunque dubbio lascia pure un messaggio, ti risponderemo al più presto!