Chissà quante volte avrete pensato di creare una strip, o una riga utile sopra l’intestazione (header) di un tema WordPress o magari di un tema child WordPress Genesis. A me, per esempio, è una cosa che è capitata molte volte e molto spesso sono dovuto ricorrere a dei plugin dal momento che avevo, proprio con WordPress Genesis, difficoltà a farlo, ma stavolta mi sono impegnato ed ho deciso di trovare una soluzione personalizzata, che voglio condividere con voi.
WordPress Genesis top bar
A cosa può servire una “top bar” da posizionare sopra l’header del tema? In realtà gli usi possono essere molteplici vediamone alcuni:
- un menù personalizzato
- il collegamento per il login o l’account degli utenti
- una casella di ricerca
- il carrello di un ecommerce
- una semplice riga di informazioni
oppure una qualsiasi altra cosa che vi possa venire in mente per personalizzare il vostro sito web e dargli diciamo cosi un tocco di originalità.
Creazione del Widget
Andiamo a creare la nostra area e nel mio caso mi è venuto in mente di farne addirittura due, una a sinistra ed una a destra, e quindi creiamo una “top bar” area che sarà divisa in due, una parte a sinistra che chiamerò “Top bar left” ed una parte a destra il cui nome sarà “Top bar right” e per farlo ho scritto questo snippet di codice da inserire nel file functions.php del nostro tema:
Non appena salvato, nel backend del nostro WordPress Genesis Child Theme, sotto la voce Aspetto —> Widgets compariranno due nuove aree, appunto con i nomi di “Top Bar Left” e “Top Bar Right” che dovrebbero dare la possibilità di poter inserire testo, codice HTML o altro.
Ma ancora queste aree non saranno visibili nel frontend del nostro sito web costruito con WordPress Genesis, per renderle visibili dobbiamo inserire ancora un po’ di codice, quindi vi sottopondo altri snippets di codice da inserire appunto nel file functions.php:
A questo punto la nostra “top bar” sarà effettivamente visibile, ma per avere alla fine il corretto risultato sarà necessario inserire gli opportuni aggiustamenti visivi e abbiamo bisogno di utilizzare un po’ di CSS che inseriremo nel file style.css del nostro tema child di WordPress Genesis:
Finalmente otteniamo il risultato sperato. Naturalmente potete e dovete modificare il codice per rendere il tutto adeguato al vostro tema child di WordPress Genesis. Ma si potrebbe presentare un problema, a volte di non facile soluzione: cosa potrebbe succedere se il nostro header è “sticky”?
Per chi non lo sapesse un header sticky e un header che rimane fisso in cima alla pagina, sempre, anche quando si utilizza la rotellina del mouse o la barra laterale per scorrere più o meno velocemente la pagina.
Questo appunto potrebbe essere un vero fastidio perchè ci ritroveremmo l’header fisso ed invece la “top bar” che scorre insieme alla pagina e questa, probabilmente, è una cosa che. dal punto di vista estetico, non va troppo bene e non è bello da vedere.
Alla fine però, la cosa si può risolvere sempre tramite CSS, mettendo “sticky” cioè fissa anche la “top bar” e visto che abbiamo dato alla nostra top bar una classe CSS apposita chiamata, guarda caso, .top-bar aggiungerò, aggiungeremo, al codice CSS prima illustrato, anche queste istruzioni:
.top-bar {
/* Fixed Options */
z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;
}
Un riepilogo di tutto il codice lo potete trovare a questo Link/Gist con tutti i codici del tutorial che ho messo nel mio account Git-Hub per renderlo disponibile e condividerlo con tutti coloro a cui potrebbe servire, poi magari potreste trovare qualcos’altro che vi possa essere utile per i vostri codici e/o lavori vari.
