Utilizzando questo sito accetti il nostro uso dei cookie. Approfondisci

Barra fissa espandibile in WordPress: jQuery Expandable Sticky Bar

Barra fissa espandibile in WordPress: jQuery Expandable Sticky Bar


Vuoi avere una barra fissa in alto o in basso dello schermo sul tuo sito WordPress? Magari vuoi anche che passandoci sopra con il mouse, questa si espanda in automatico mostrando nuovi contenuti? Bene, oggi sei fortunato, in questo articolo ti mostrerò proprio come ottenere questo risultato.

Codice

Tutto il codice è fornito da Dynamic Drive con licenza freeware e permette di mostrare in una posizione fissa dello schermo una barra che si espande al passaggio del mouse. È molto utile per mostrare del materiale aggiuntivo, per promuovere un evento o per qualsiasi altra cosa… basta dare libero sfogo alla fantasia.

Ma non ti voglio far perdere tempo, lo so che non vedi l’ora di avere la tua sticky bar :)

Per prima cosa consiglio di fare un backup della cartella del tema, ovvero di scaricarla sul tuo computer, così da avere un bel paracadute nel caso insorgessero problemi.

Scarica il file compresso sticky-bar.rar, che contiene javascript expstickybar.js e le immagini open.gif e close.gif. Dopodichè carica questi file all’interno della cartella del tuo tema, e se vuoi mantenere un po’ di ordine, il file expstickybar.js nella cartella /js/(se non c’è, creala), mentre le immagini nella cartella /images/.

Poi incolla il codice qui sotto prima del tag </head> nel file header.php, da Aspetto > Editor > header.php.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/expstickybar.js">
/***********************************************
* Expandable Sticky Bar- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
</script>

Da notare che se nel tuo tema viene già caricata la libreria jQuery, allora la prima riga puoi non metterla.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Per capire se è già stata caricata devi cercare nel codice del file header.php prima di </head>, solitamente basta cercare la parola jquery.

Ora apri il file style.css ed incolla in fondo al file, questo codice:

.expstickybar{
position:fixed;
color: white;
padding: 5px;
right:0; /*horizontally center bar in window*/
left:0; /*horizontally center bar in window*/
visibility:hidden;
background: #e43a3d;
z-index: 10000;
width:auto; /*set width of bar to width of entire window*/
font-weight:bold;
}
.expstickybar a{
color: white;
}

Questo codice serve per dare lo stile alla barra, in particolare, per modificare il colore rosso/rosa, devi modificare il valore di background (riga 8 del codice). Ad esempio, se volessi la barra nera, sostituisci il valore attuale con background:#000; .

Infine inserisci il codice per mostrare la barra all’interno del sito web. Apri il file footer.php, e prima della chiusura del </body>, aggiungi questo codice:

<div id="stickybar" class="expstickybar">
  <a href="#togglebar"><img src="<?php bloginfo('template_directory'); ?>/images/open.gif" data-closeimage="<?php bloginfo('template_directory'); ?>/images/close.gif" data-openimage="<?php bloginfo('template_directory'); ?>/images/open.gif" style="border-width:0; float:right;" /></a>
  <div style="text-align:center;padding-top:3px"><b>Copyright (c) 2010 Dynamic Drive - via robertoiacono.it</b></div>
  <strong>More content here</strong>
</div>

Potrai inserire il tuo contenuto al post della frase More content here. Ci potrai mettere quello che vorrai, immagini, testo, link, elenchi puntati o numerati, div… tutto ciò che fai in una pagina normale.

Di default, questa barra mostra l’immagine del simbolo + e – (riga 2 del codice) per permettere all’utente di aprire e chiudere la barra manualmente (nel caso in cui non volessi aprirla in automatico).

Se volessi cambiare la velocità di scorrimento della barra oppure il numero di pixel visibili quando è nascosta, devi modificare il codice che si trova in fondo al file expstickybar.js:

var mystickybar=new expstickybar({
 id: "stickybar", //id of sticky bar DIV
 position:'bottom', //'top' or 'bottom'
 revealtype:'mouseover', //'mouseover' or 'manual'
 peekamount:35, //number of pixels to reveal when sticky bar is closed
 externalcontent:'', //path to sticky bar content file on your server, or "" if content is defined inline on the page
 speed:200 //duration of animation (in millisecs)
})

Le informazioni che puoi modificare sono:

  • position: per modificare la posizione della barra, bottom (in basso) o top (in alto)
  • revealtype: per selezionare se vuoi espandere la barra manualmente (manual) o in automatico (mouseover)
  • peekamount: per impostare il numero di pixel da mostrare quando è chiusa
  • speed: velocità di transizione

Per finire, potresti avere un problema con la leggibilità del tuo footer, nel senso che la barra potrebbe ricoprirlo. In questo caso, devi dare del margine inferiore al tuo footer, tramite l’istruzione margin-bottom:35px; (al posto di 35 metti il valore che hai in peekamount), nel il file style.css. Il problema è che devi riuscire a risalire al nome dell’identificatore del footer, solitamente chiamato footer. In questo caso, l’istruzione sarà: #footer {margin-bottom:35px;} .

Io ho usato la sticky bar per mettere in risalto un contenuto utile all’utente, la mia Blogging Box. Te, in che modo intendi utilizzarla? Scrivilo nei commenti qui sotto.


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!
28 Commenti
  • Davide

    Ciao Roberto!
    Il link per scaricare la “sticky-bar.rar” apre una pagina “non trovata”.

    • Roberto Iacono

      Aggiornato, grazie mille!

      • Davide

        Grazie a te per tutto il lavoro che condividi a noi “Entry level” del web.

  • Marco Loretelli

    salve, ho trovato molto utile questa sticky bar, però all’inizio del tuo articolo ti poni alcune domande tipo: Vuoi avere una barra fissa in alto o in basso dello schermo sul tuo sito WordPress?

    Si, voglio avere una barra fissa in alto! 😉
    Come fare? metto il codice del footer in header?

    • Roberto Iacono

      Ciao Marco,
      dovresti imporre top:0; (o qualcosa del genere)… Il Problema è che dovresti modificare anche il verso di apertura della barra (penso sia nel codice Js).

  • Marco Loretelli

    Si, hai ragione, ma per il momento lascio stare; infatti, l’ho tenuta in basso. Piuttosto un’ altra cosa: ho notato che se si va a guardare il sito sul cellulare, la barra rimane a metà dello schermo e non si blocca in fondo. (Così succede anche visualizzando il tuo sito). Sai per caso come si potrebbe risolvere un tale errore?

    • Roberto Iacono

      Da che cellulare lo guardi? Io con S3 lo vedo normale.
      Mi puoi inviare uno screenshot per piacere a info AT robertoiacono.it?
      Probabilmente è solo un problema CSS, di impaginazione…

  • simone

    Ciao ormai ti tartasso….. come faccio a dare la trasparenza alla barra, credevo di sapelo fare dal css, ma sto impazzendo…..
    Grazie

  • Antonio

    Un bel tuttoriale, soltanto che non riesco a capire il perche non vedo, ho seguito tutto come impostare pero niente. Centra magari il tipo di theme che a uno?

    Grazie ancora e complimenti per il tutto!!!

    Antonio

    • Roberto Iacono

      Potrebbe dipendere da molte variabili, prova ad effettuare lo stesso procedimento con il tema Twenty Eleven disattivando tutti i plugin (magari fallo in locale sul tuo computer).

      Ti ringrazio Antonio! :)

  • Isolacine

    Ciao Roberto, ci piacerebbe inserire nel nostro sito la tua barra espandibile, però Sigh.. Sigh.. non ci riusciamo. Potresti aiutarci? Abbiamo scaricato il pacchetto rar, ma non sappiamo dove inserirlo per poi proseguire. All’interno di questa barra ci vorremmo inserire il film (con immagine) della settimana. Grazie in anticipo per tutto quello che potrai fare.
    Claudio

    • Roberto Iacono

      Mi dispiace Claudio,
      magari su altervista non funziona, non l’ho mai provato lì.

  • simone

    Ciao, che tu sappia non c’è mica un modo per limitarla alla home page????
    Grazie

    • Roberto Iacono

      Certamente, puoi aggiungere il javascript e il codice per mostrare la barra solamente nel file index.php (oppure lasciare il javascript nel footer ma inserirlo dentro un if, per mostrarlo solo in homepage)

  • DrLoki

    Ciao, ho scoperto il tuo blog ieri e devo farti i più sentiti complimenti per la qualità e la precisione dei tuoi post.
    Alcune delle tue proposte le ho già implementate nei miei siti (ottimizzazione con CloudFlare) e altre sono in fase di studio (acquisto tema da ElegantTheme).
    I slider menu sono un po’ un mio pallino che utilizzo su delle web application custom, ma per quanto riguarda invece WordPress ho trovato questo plugin JQuery Slick Menu Widget (wordpress.org/extend/plugins/jquery-slick-menu/) che mi sembra altrettanto interessante.

    • Roberto Iacono

      Ti ringrazio per tutto, plugin molto interessante :)

  • Pietro Montagna

    Maestro!
    Ho seguito i tuoi consigli e in mezza giornata sono riuscito a fare quello che volevo (vedi sul sito inglese, che sto usando come test).

    Ora vedi un risultato per me accettabile ma solo per la parte centrale.
    Poi vorrei mettere in mezzo alla parte sx (dx) un immagine Cliccabile (e questo lo so fare) che mi rimandi dove voglio io.

    Quello che non so fare è porre l’immagine proprio dove voglio io. Una sorta del tuo Hosting e Gestione….ma molto più semplice in quanto verrebbe il logo cliccabile e sotto la scritta che tu vedi che ho già messo.
    Hai una guida in proposito? Puoi darmi delle info in merito?
    Grazie
    p.s.: vorrei anche un tuo giudizio su quello che ho fatto, hai dei suggerimenti?

  • Pietro Montagna

    Fermo là!

    Guarda che ho combinato?….a volte mi meraviglio di me stesso .it/news.

    Ora inserisco anche la parte Dx e poi ti do il mio Feedback definitivo

  • Pietro Montagna

    Ecco dove ho il problema….non riesco a fare meglio di questo che vedi ora.
    In sostanza vorrei che anche a dx sia tutto su una sola riga e che dex e sx siano equidistanti dai bordi (diciamo come quello dx andrebbe bene).
    Poi ovviamente la parte centrale non vuole saperne di aggiustarsi il codice css a cui sono arrivato è:

    .barra_fissa_centro {text-align: center; font-size: 1.4em; font-weight: bold; float: left; width: 50%; }

    .barra_fissa_sx {text-align: left; font-size: 1em; float: left; margin-right: 10px; margin-left: 40px; position: relative; width: 25%; }

    .barra_fissa_dx {text-align: left; font-size: 1em; font-weight: bold; float: right; margin-right: 100px; position: relative; width: 190px; }

    C’è speranza?

    • Roberto Iacono

      Sembra che yu abbia allargato troppo la colonna centrale, e fai tutte le larghezze in percentuale, non mischiare coi px. Attenzione anche ai margini e padding che occupano spazio (anche per questo a destra va a capo).
      Per la posizione verticale, dagli un po’ di margine verticale e bom.

      Sei un grande :)

    • Pietro

      Ma che grande….il poco che ho imparato è perchè ho avuto un buon maestro. Cmq il test sul .it/eng è migliorato di molto, seguendo il tuo consiglio, come vedi ora.
      Ma non c’è simmetria tra dx e sx e su questo ti chiedo l’ultimo consiglio:

      Le modifiche fatte sono mi hanno portato a questo codice:

      .barra_fissa_centro {text-align: center; font-size: 1.4em; font-weight: bold; float: left; width: 40%; }
      .barra_fissa_sx {text-align: left; font-size: 1em; float: left; margin-right: 10px; margin-left: 40px; position: relative; width: 25%; }
      .barra_fissa_dx {text-align: left; font-size: 1em; float: right; margin-right: 40px; margin-left: 10px; position: relative; width: 25%; }

      Qual’è il tuo parere?

      • Roberto Iacono

        Hai infiliato il div di destra dentro quello centrale… ovviamente non va a destra ma rimane al centro 😉

        • Pietro

          Maledetto div! Grazie …..

  • Devil

    il link di download mi porta a una pagina piena di simboli strani

  • Pietro Montagna

    Ciao Roberto,
    dunque, sono riusciuto, leggendo attentamente il post e i suggerimenti che mi hai dato, a mettere tutto a posto e a fare un lavoro, a mio avviso abbastanza accettabile e professionale.
    Ho fatto anche delle piccole modifiche, giusto per finezza.

    Ora .it e .eu, per me, sono finite ed ok….ma il .it/news, senza nessuna spiegazione, a mio avviso ha un’anomalia….se vedi bene la colonna dx è più larga!!!
    Eppure non ho fatto nulla….mi sapresti dire dove devo mettere mano?

    • Roberto Iacono

      A me sembra ok…

      • Pietro

        Eh no…..ti mando screen in pvt così mi spiego meglio :(

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:
13598+
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:
13598+
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