Inserire un banner (immagine + link) nella sidebar in WordPress senza plugin
Vuoi inserire un banner pubblicitario (composto da un’immagine e un link) nella sidebar del tuo amatissimo blog-sito in WordPress e hai deciso di non affidarti a nessun plugin per la gestione di banner pubblicitari?
Non è complicatissimo 🙂
Il Banner
Il banner è una “semplice” immagine, solitamente in formato .jpg oppure .png.
Ecco il banner che userò come esempio:
Essendo un’immagine ha una dimensione composta da larghezza (width) e altezza (height), il tutto espresso in pixel.
Per capire la dimensione della tua immagine clicca col tasto destro del mouse sul file dell’immagine > Proprietà > Dettagli > Immagine:
Come puoi vedere la dimensione del mio banner è 300 x 300 px. Questi valori sono molto importanti perchè devono essere adattati alla larghezza della sidebar del tuo blog, che varia a seconda del tema utilizzato.
Quindi, per prima cosa controlla la larghezza della sidebar del tuo blog. Io mi trovo bene con FireBug, come ho scritto in questo articolo che ti consiglio di leggere. Altrimenti è possibile risalire alla larghezza anche leggendo bene il codice css del file style.css o facendo vari test (provando varie dimensioni del banner fino a che non trovi quella giusta).
Nel mio caso, su un blog di test, la larghezza della sidebar è proprio di 300 px 🙂 Ottimo!
Un consiglio: è più semplice adattare il banner alla sidebar che fare il contrario! Quindi se hai un banner da 300 px di larghezza e una sidebar di 250 px, è più comodo e veloce rifare il banner largo 250 px, non allargare la sidebar!
PS: l’altezza del banner non è fondamentale, può essere una dimensione qualsiasi (purchè abbia un aspetto finale decente).
Carica il banner
Ora che hai il banner adatto alla larghezza del tuo blog, devi caricarlo e aggiungere il codice per mostrarlo.
Vai su Media > Aggiungi nuovo >e trascina il file qui dentro (oppure selezionalo tramite il pulsantino):
Una volta caricato, premi sul link Modifica e copia l’URL dell’immagine:
Il codice
Vai su Aspetto > Widget > e trascina un widget di Testo nella sidebar laterale (leggi questo articolo per capire come funzionano i widget):
È arrivato il momento di inserire il codice che si compone da due parti: il link e l’immagine.
Il codice per mostrare l’immagine andrà inserito all’interno del codice utilizzato per creare il link, così da rendere l’immagine “cliccabile”, ovvero l’utente che cliccherà sull’immagine verrà reindirizzato al link desiderato.
[html]
<a href="URL_DEL_LINK" title="TITOLO_DEL_LINK_CHE_COMPARIRà_ALL_UTENTE" rel="nofollow" target="_blank">
<img src ="URL_DELL_IMMAGINE-BANNER" alt="DESCRIZIONE_DELL_IMMAGINE-BANNER" width="LARGHEZZA_IN_PIXEL" height="ALTEZZA_IN_PIXEL">
</a>
[/html]
Ricordati di sostituire:
- URL_DEL_LINK: indirizzo del link verso cui vuoi mandare l’utente
- TITOLO_DEL_LINK_CHE_COMPARIRà_ALL_UTENTE: questo viene visualizzato quando l’utente passa sul banner con il mouse
- rel=”nofollow”: da inserire quando si viene retribuiti o per banner pubblicitari di siti esterni (per sicurezza)
- target=”_blank”: apre il link in una nuova finestra
- URL_DELL_IMMAGINE-BANNER: URL del banner-immagine che hai copiato al passaggio precedente
- DESCRIZIONE_DELL_IMMAGINE-BANNER: descrizione dell’immagine (Google ci tiene)
- LARGHEZZA_IN_PIXEL: larghezza in pixel dell’immagine, ad esempio 300.
- ALTEZZA_IN_PIXEL: altezza in pixel dell’immagine, ad esempio 300.
Infine aggiorna il widget e vai a vedere il risultato 🙂
Nel mio caso inserirò nel widget di testo il seguente codice:
[html]
<a href="https://www.robertoiacono.it/blogging-box/" title="Tutorial e Risorse per creare e gestire il proprio blog (o sito) WordPress autonomamente" rel="nofollow" target="_blank">
<img src ="http://localhost/robertoiacono/wp-content/uploads/2013/11/banner-blogging-box.png" alt="Tutorial e Risorse per creare e gestire il proprio blog (o sito) WordPress autonomamente" width="300" height="300">
</a>
[/html]
E questo è il mio risultato:
Ah, quasi dimenticavo, ovviamente puoi anche andare a visitare di persona la mia Blogging Box, troverai tanto materiale interessante per WordPress e non solo…
VUOI CREARE IL TUO SITO O BLOG WORDPRESS?
Articoli Recenti
25/11/2013 alle 10:31
Caro Roberto,
grazie per gli articoli che scrivi.
Mi sono iscritto indicando la mia mail per ricevere gli ebook Blogging box ma non ho ricevuto nulla. Scusami se lo spazio che uso non è pertinente, ma era l’unico modo per informarti.
E’ possibile rimediare all’inconveniente?
Grazie
26/11/2013 alle 16:18
Ebook inviati! 🙂
11/12/2013 alle 13:03
Grazie dei suggerimenti ma avrei una domanda: come faccio ad inserire un widget di testo nella sidebar di un articolo specifico e non tutte le pagine del blog?
Grazie mille
19/12/2013 alle 16:20
Ciao Fabrizio,
usa Display Widgets
11/12/2013 alle 17:48
Ciao Roberto, chiaro come sempre ma vorrei sapere come fare per inserire un banner senza widget, è possibile vero?
vorrei che nella sidebar ci fosse una immagine linkabile senza che essa sia inserita nel widget.
grazie
19/12/2013 alle 16:23
Ciao ale,
ni.
Puoi creare un widget “vuoto”, che non abbia nulla (nemmeno lo sfondo), così ti viene comodo ad inserire le immagini, ma devi programmare un po’.
Altrimenti puoi inserire il codice del banner al in sidebar.php o fare qualcosa del genere, ma poi risulterebbe alla fine o all’inizio della colonna… io preferisco fare come la prima soluzione.