Come aggiungere immagini personalizzate alla sidebar

Come aggiungere immagini personalizzate alla sidebar

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.

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!

Guide correlate:

Immagine di Andrea Di Rocco autore articoli SOS WP
Andrea Di Rocco Fondatore di SOS WP™
La mia passione per WordPress mi ha portato negli ultimi 10 anni a voler aiutare sempre più persone a creare blog e siti web in WordPress in completa autonomia. Spero che troverai utili le oltre 700 guide su WordPress e sulla SEO che ho pubblicato su questo blog. Se ne hai voglia ti invito a leggere la mia storia, cliccando sul pulsante qui sotto.
25Commenti
Lascia un commento
  1. Immagine avatar per roberta
    roberta

    non ho capito niente. voglio capire x fare mettere delle foto, meglio loghi su sidecar, ma dalla tua spiegazione manuale non si capisce i passaggi che devo fare

    grazie

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Roberta, puoi aggiungere delle immagini sulla sidebar seguendo i passaggi suggeriti nella guida. Certamente puoi inserire dei loghi! Cosa non capisci nello specifico?

  2. Immagine avatar per Federico
    Federico

    Ciao Andrea, vorrei modificare la mia colonna di sinistra in modo che il banner segua la pagina dalla metà in poi come su questo sito che ho visto https://www.annuncitoday.it/immobili per caso esistono dei plugin ? grazie mille!

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Federico, prima di tutto dai un’occhiata alle impostazioni del tuo tema, perché alcuni possono avere questo tipo di sidebar già nelle loro opzioni. Se non c’è, puoi provare ad usare questo comodo plugin: https://wordpress.org/plugins/mystickysidebar/. Un saluto!

  3. Immagine avatar per Alberto
    Alberto

    Ciao,

    sto cercando un plugin o un codice che mette la parola “New” obliqua sull’anteprima delle nuove immagini.

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao, non conosciamo un plugin che faccia questo. Stai usando già un plugin per le immagini sul tuo sito web?

    2. Immagine avatar per Alberto
      Alberto

      Si qualche plugin lo sto usando, ma se avevo un codice da mettere nel child era meglio.

  4. Immagine avatar per Andrea Cusati
    Andrea Cusati

    Ciao Chiara.
    Grazie dell’articolo.

    Vorrei ridurre la distanza dal bordo superiore e di sinistra per il logo a piè pagina, c’è un codice html per questo da inserire nell’immagine?

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Andrea, serve una modifica al padding, quindi al CSS (foglio di stile del tema). Ti consigliamo in merito la lettura di questa guida dedicata https://sos-wp.it/guida-css/.

  5. Immagine avatar per sonia
    sonia

    Ciao, io ho un problema con Fixed Widget: non riesco a farlo funzionare correttamente con il tema Enfold, il che è strano, dato che se non sbaglio è lo stesso che utilizzate voi. Esiste altro plugin con la stessa funzione?
    Oppure c’è una procedura particolare da seguire? Grazie

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Sonia, hai provato questo plugin https://it.wordpress.org/plugins/fixed-widget-area/?

    2. Immagine avatar per sonia
      sonia

      Ciao Andrea, io avrei bisogno di fissare la sidebar quando il visitatore scorre in basso l’articolo. Il plugin che mi hai segnalato non sembra risolvere questa esigenza ma probabilmente mi ero spiegata male io.
      Quale puoi consigliarmi? Grazie

    3. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Sonia, prova a usare di nuovo il plugin indicato in questa guida: https://www.wpbeginner.com/plugins/how-to-create-a-sticky-floating-sidebar-widget-in-wordpress/. Disattiva gli altri plugin, e vedi se funziona a dovere. Facci sapere, un saluto!

    4. Immagine avatar per sonia
      sonia

      Ciao Andrea, grazie.
      Ho provato a reinstallarlo. In effetti ho notato che in alcune pagine funziona, in altre no. Non ho idea però quale possa essere la ragione.

    5. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Hai disattivato gli altri plugin?

  6. Immagine avatar per Mara
    Mara

    Buongiorno Chiara, grazie per l’articolo, io sto cercando di capire come inserire nel sito un’immagine tridimensionale e in piccolo di un libro, puoi aiutarmi? Grazie.

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Mara, hai già provato a seguire la guida? Un saluto!

  7. Immagine avatar per Raffaela
    Raffaela

    Salve, molto interessante e davvero ben spiegato. Grazie mille, in realtà il plugin immagini che sto usando non viene aggiornato da un po’, pertanto questa guida mi è utilissimo, essendo alle prime armi. Vorrei chiederti anche un aiuto per inserire il testo alternativo e Attributo title dell’immagine. Ti ringrazio in anticipo per la disponibilità.

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Raffaella, se mastichi un po’ di inglese, consiglio questa guida per Alt e testo alternativo alle immagini: https://yoast.com/image-seo-alt-tag-and-title-tag-optimization/. Fammi sapere se ti è utile, un saluto!

  8. Immagine avatar per Agnieszka
    Agnieszka

    Aggiungo che per creare un’immagine personalizzata, anche con la scritta per invitare le persone a fare qualcosa (per esempio a iscriversi alla newsletter) si possono utilizzare i programmi grafici on line come Canva :-). L’effetto visivo è molto piacevole.

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Concordiamo 😉

  9. Immagine avatar per marta
    marta

    buonasera Chiara, ho trovato molto utile la tua spiegazione, ma ho un problema. ho utilizzato il metodo manuale ed ho inserito più di un’immagine nella sidebar seguendo le tue indicazioni. fino a due immagini, non ci sono problemi, quando inserisco la terza immagine e provo a ricaricare la pagina, il corpo centrale diventa tutto nero e sparisce anche la side bar… il codice html è corretto perchè ho provato a caricare solo quell’immagine e funziona…ma se la metto di seguito alle altre due mi da questo problema…cosa mi consigli?

  10. Immagine avatar per Goffredo
    Goffredo

    Grazie Chiara, spiegazione molto chiara , ne ho fatto uso e funziona perfettamente.

  11. Immagine avatar per Oriano
    Oriano

    Grazie Chiara, molto utile e ben spiegato, ne ho fatto tesoro

    1. Immagine avatar per Chiara Buzzi
      Chiara Buzzi

      Ciao Oriano! Graaie a te per il commento; continua a seguirci e se hai domande non esitare a scriverci. Chiara

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *