Fissare uno o più Widget della Sidebar in WordPress durante lo scroll della pagina

Fissare uno o più Widget della Sidebar in WordPress durante lo scroll della pagina

Vuoi mantenere visibile l’ultimo widget (o uno qualunque) che hai sulla sidebar mentre l’utente scorre la pagina? Magari implementandolo in maniera (quasi) semplice? È proprio quello che ti sto per mostrare in questo articolo!

Partiamo dall’inizio… I widget sono i contenitori che puoi riempire a piacimento e che vedi nella sidebar, la colonna laterale di un blog WordPress, ma anche nel footer o nell’header.

Di default, tutti i temi hanno la sidebar fissa, quindi quando un utente scorre (scroll) la pagina fino in fondo, vede solamente i widget presenti nella porzione della sidebar visibile in quella precisa altezza della pagina. I Widget sono fissi. Una volta che l’utente li ha passati, non li vedrà più se continuerà a scorrere verso il basso.

Dopo l’ultimo widget, la sidebar sarà vuota… e allora, perchè non riempire questo spazio?

sidebar senza e con widget

E perchè non “riempire” la sidebar mostrando sempre l’ultimo widget (o uno qualunque) anche mentre l’utente scorre la pagina?

Potrebbe essere una soluzione molto interessante, da sfruttare per qualsiasi scopo, basta un po’ di fantasia… Puoi mostrare dei link utili, i pulsanti di condivisione sociali come il pulsante Mi Piace o il pulsante Tweet, puoi presentare un prodotto o, come nel caso dell’immagine qui sopra, una risorsa gratuita come la mia Blogging Box, ma perchè no, se te la senti, potresti anche metterci un bel banner pubblicitario, ma NON AdSense in quanto è vietato dal regolamento! (Prima di “giocare” con banner pubblicitari di network importanti, controlla sempre il relativo regolamento)

Ad ogni modo, dai libero sfogo alla tua fantasia, ma pensa sempre al bene dell’utente… a te piacerebbe “farti inseguire” da un banner pubblicitario?

La cosa interessante è che con il metodo che ti mostrerò, potrai anche fissare durante lo scroll un widget che non sia necessariamente in ultima posizione (ad esempio il primo), ma soprattutto, permette di fissare anche più di un widget!!!

Come fissare l’ultimo Widget durante lo scroll della pagina

Per poter fissare l’ultimo widget della sidebar e quindi renderlo sempre visibile durante lo scroll della pagina, installa il plugin Q2W3 Fixed Widget.

Comparirà nel menù Aspetto il sotto-menù Fixed Widget Options:

Opzioni del plugin fixed widget

Qui potrai impostare il margine superiore (top) ed inferiore (bottom) che il widget avrà dallo schermo durante lo scroll della pagina.

Andando su Aspetto > Widget >, potrai selezionare quali widget vuoi che diventino fissi durante lo scroll, semplicemente selezionando la casella che è comparsa a fondo di ogni widget.

Ad esempio, inserisci un semplice widget di testo, seleziona la casella Fixed widget e salva.

Widget di testo fisso

Vai ad aggiornare la pagina e… e puoi ritrovarti un due situazioni: soddisfazione + inchino alla potenza di Roberto Iacono 🙂 o odio profondo per Roberto Iacono 🙂

Se sei soddisfatto e funziona tutto, vai pure al paragrafo Dì la tua

Ecco un esempio di utilizzo del plugin con due widget fissi, non in ultima posizione!

Prima e dopo lo scroll della pagina

Non funziona!

Aspetta ad insultarmi 🙂

Il widget non si blocca se non possiede un identificatore univoco. Quindi non funziona se il contenitore del widget non ha un ID, oppure se ha un ID uguale a quello di un altro widget.

Come risolvere questo problema?

Fai un backup del file functions.php del tuo tema, dopodichè vai su Aspetto > Editor > functions.php e cerca register_sidebar.

Se non lo trovi, devi cercare questa stringa in altri file. Prova ad usare il programma gratuito FileSeek come spiegato in questo articolo.

Una volta trovato la funzione register_sidebar, devi aggiungere id="%1$s" al contenitore del widget (solitamente rappresentato dal codice ‘before_widget‘), ecco l’esempio per il tema TwentyEleven, guarda la riga 4:

[php]
register_sidebar( array(
‘name’ => __( ‘Main Sidebar’, ‘twentyeleven’ ),
‘id’ => ‘sidebar-1’,
‘before_widget’ => ‘<aside id="%1$s" class="widget %2$s">’,
‘after_widget’ => "</aside>",
‘before_title’ => ‘<h3 class="widget-title">’,
‘after_title’ => ‘</h3>’,
) );
[/php]

Salva e vai a controllare se funziona.

Ancora niente?

Può essere che il tuo tema sia sprovvisto delle funzioni wp_head(); e wp_footer();. In questo caso, aggiungile rispettivamente nel file header.php (prima del </head>) e del file footer.php (aggiungila prima del </body>).

Dì la tua

In che modo sfrutterai il widget fisso durante lo scroll della pagina? Che contenuti conterrà?

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
  
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!
5 Commenti
  • Ottima risorsa.. Grazie Roberto stavo proprio cercando una cosa simile!!

  • Farlo senza il plugin sarebbe molto complicato?

  • Roberto, sei una miniera di informazioni; ho appena letto questo articolo e quello che parla del software “file seek”. Per me, che ho cominciato a provare wordpress a settembre, i tuoi articoli sono molto importanti; seguo molti dei tuoi consigli per il blog di prova che ho in locale.
    Grazie ancora; passa un Buon Natale e ti auguro che il 2013 sia un sereno anno.
    mauro

    • Roberto Iacono

      Ti ringrazio Mauro, mi fa molto piacere!!!
      Buon Natale anche a te!

  • Ciao Roberto, ho fatto tutto quello che hai detto nell’articolo, aggiunti gli id, controllato wp_head e wp_footer ma il plugin, non funziona. C’è da dire che uso Infinite Scroll, ma anche disattivandolo lo stesso non funziona. Mi è venuto il dubbio sulla jquey, dice che funziona dalla 1.8 in poi possibile sia questo il problema? Come faccio a vedere che versione di jquery ho impostato nel tema? E nel caso, aggiornarlo? Grazie