Utilizzando questo sito accetti il nostro uso dei cookie. Approfondisci

Inserire un banner (immagine + link) nella sidebar in WordPress senza plugin

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:

banner di 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:

dimensioni banner

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!

larghezza sidebar test

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):

caricamento-immagine

Una volta caricato, premi sul link Modifica e copia l’URL dell’immagine:

Copia URL 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):

widget testo

È 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.

<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>

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:

<a href="http://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>

widget di testo con codice

E questo è il mio risultato:

risultato finale

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?

Scegli uno tra i migliori hosting per WordPress

HOSTING

Scegli uno tra i migliori hosting per WordPress

Hosting

Scegli uno tra i migliori temi WordPress professionali

GRAFICA

Scegli uno tra i migliori temi WordPress professionali

Grafica

Guide e risorse per gestire il sito WordPress a 360°

GESTIONE

Guide e risorse per gestire il sito WordPress a 360°

Gestione

EMAIL NEWSLETTER

Vuoi ricevere i miei ultimi articoli
comodamente nella tua email? È gratis!
Ben 3552 persone lo stanno già facendo!
Anonimo
   
con le dita sempre in costante, frenetico movimento sulla tastiera… vengo spesso trascinato e catturato “in rete” per colpa delle mille idee che mi girano per la testa (prima o poi troverò quella giusta)… dal futuro incerto (nonostante una laurea, e chi non lo è?..siamo in tanti!) .. credo fortemente nella condivisione della conoscenza!
6 Commenti
  • cesare

    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

  • FABRIZIO

    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

    • Roberto Iacono

      Ciao Fabrizio,
      usa Display Widgets

  • ale

    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

    • Roberto Iacono

      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.

Seguimi

Scarica gli ebook gratuiti

Vuoi creare e gestire il tuo blog WordPress autonomamente ed in maniera gratuita?

Allora scarica gratuitamente gli ebook Blogging Box e Le 30+ cose da non fare con WordPress, inserisci la tua email qui sotto:
13584+
Scarica gratuitamente gli ebook!

Per maggiori informazioni guarda questa pagina per la Blogging Box e questa per le 30+ cose da non fare con WordPress.

Scarica gli ebook gratuiti

Vuoi creare e gestire il tuo blog WordPress autonomamente ed in maniera gratuita?

Allora scarica gratuitamente gli ebook Blogging Box e Le 30+ cose da non fare con WordPress, inserisci la tua email qui sotto:
13584+
Scarica gratuitamente gli ebook!

Per maggiori informazioni guarda questa pagina per la Blogging Box e questa per le 30+ cose da non fare con WordPress.
Unisciti agli oltre 10999 lettori
che seguono questo blog
3152
982
2251
4614