Come inserire una barra statica fissata su WordPress

Molti blogger e webmaster si chiedono come mettere in risalto una pagina o un post del proprio sito basato su WordPress. Tra le soluzioni più efficaci c’è sicuramente l’inserimento di una barra statica, una fixed bar, capace di mostrare avvisi, banner e messaggi di ogni tipo, anche form per l’iscrizione alla newsletter.

Per questo vedremo in questo post come inserire una barra fissata ad esempio in cima o in fondo alla pagina, sempre a disposizione dell’utente che naviga tra i contenuti del nostro sito o blog.

Quanto vedremo va bene sia per inserire una sticky bar o barra fissa in cima o nell’header, sia in basso o nel footer. Come verrà spiegato in seguito basta settare alcuni valori per ottenere diversi risultati.

La prima operazione da effettuare è inserire un codice all’interno del foglio di stile CSS, preferibilmente le modifiche vanno inserite all’interno dei file del tema child, in alternativa nel foglio di stile che si trova editando il tema in uso.

CSS

#gcub-fixedbar {
  position:fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  margin-bottom:0px;
  background-color: #666666;
  color: #FFFFFF;
  border-bottom: solid #000000;
  padding: 5px 0 0px 0;
  text-align: center;
  font-size: 16px;
  font-family: Verdana, Arial, Tahoma;
  font-weight: bold;
}
#gcub-fixedbar
a:link { 
 color: #ffea00; 
 text-decoration: none; 
} 

Chiaramente questo è solo un esempio: in questo caso la barra viene fissata in basso, ma basta sostituire margin-bottom:0px; con margin-top:0px per spostarla in cima. Attraverso le altre impostazioni inoltre potrai personalizzare al massimo l’elemento.

Codice HTML

Ora non resta che richiamare all’interno delle pagine quanto inserito nel foglio di stile ed aggiungere il contenuto desiderato:

<div id="gcub-fixedbar">LINK, AVVISI, BANNER, ECC. QUI</div>

All’interno del div con l’id creato è possibile inserire ciò che si desidera: banner, link, avvisi e tutto il resto. Questo codice va inserito nella testata, header.php, prima del tag di chiusura </head>.

Se hai dubbi o considerazioni non esitare a lasciare un commento, come sempre saremo contenti di risponderti.

4 Comments
  1. Reply
    Luciano 29/01/2015 at 14:20

    Sto costruendo un sito in wordpress e questo tuo articolo sulla barra statica fissa é quello che stavo cercando. Nella bara ho inserito un TAG all’interno del quale ho messo il link ad una web radio.
    Con il tuo codice, quando si cambia pagina il flusso della musica ovviamente momentaneamente s’interrompe.
    Come si puó fare che ció non accada?
    Forse un IFrame aiuterebbe ma non come fare.

    • Reply
      Elio 29/01/2015 at 16:18

      Ciao Luciano, si il flusso si interrompe perché la barra viene ricaricata. L’iframe sembra l’unica soluzione: http://www.luca1962.altervista.org/audio.html qui trovi informazioni sull’utilizzo per questo scopo, valuta attentamente se ne vale la pena. In alternativa puoi vedere se ci sono appositi plugin, se non sbaglio c’era audiobar, ma non viene aggiornato da anni purtroppo.

  2. Reply
    marco 15/09/2015 at 21:33

    Ciao,
    mi tornerebbe moto utile questa barra su un sito wp che sto realizzando, però provando a mettere il css e successivamente il codice come da te indicato, la barra non resta fissa ma scorre insieme alla pagina.
    cosa potrebbe essere?
    Grazie

    • Reply
      Elio 05/12/2015 at 13:36

      La barra resta ancorata, è fissa in quel senso, quindi è normale che scorra e rimanga sempre visibile.

Leave a reply