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.

[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>
[/php]

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

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

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:

[css]
.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;
}
[/css]

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:

[php]
<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>
[/php]

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:

[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)
})
[/js]

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.