Quando hai dei contenuti lunghi che si sviluppano molto, può essere utile aggiungere un pulsante “Torna su” per consentire ai tuoi visitatori di tornare nella parte superiore del sito o delle tue pagine in un solo clic evitando loro fare scorrere fino in alto.
Aggiungere un pulsante torna su
Per cominciare, è necessario creare il link in questione. Il modo più semplice consiste nell’aggiungere il pulsante torna su nella parte superiore dell’intestazione o del footer della pagina. Personalmente preferiamo aggiungerlo nel footer di pagina in modo da non rallentare il caricamento dell’intestazione del tuo sito, anche se dovesse essere minimo. Per questo possiamo inserirlo in wp_head o in wp_footer.
Basta aggiungere il seguente codice al file functions.php:
//ehelpmarketing
// Creazione del collegamento per il pulsante torna su
add_action( ‘wp_footer’, ‘wppln_back_to_top’ );
function wppln_back_to_top() {
echo ‘<a id=”totop” href=”#”>Retour en haut</a>’;
}
Ora che abbiamo creato il link per il nostro pulsante torna su dobbiamo definire il suo CSS aggiungendo il seguente codice (che è possibile personalizzare a vostro piacimento) tramite il file functions.php:
//ehelpmarketing
// CSS del pulsante “torna su”
add_action( ‘wp_head’, ‘wppln_back_to_top_style’ );
function wppln_back_to_top_style() {
echo ‘<style type=”text/css”>
#totop {
position: fixed;
right: 30px;
bottom: 30px;
display: none;
outline: none;
}
</style>’;
}
Il nostro link è ora pronto, resta solo a farlo funzionare aggiungendo l’effetto scroll ( effetto di scorrimento). Se il tuo sito WordPress utilizza già la libreria jQuerry puoi ignorare questo passaggio, se non aggiungi il seguente codice al tuo file functions.php: (puoi
spostare la posizione del link cambiando “400” che corrisponde a 400 pixel partendo dalla parte superiore della pagina.)
add_action( ‘wp_footer’, ‘wppln_back_to_top_script’ );
function wppln_back_to_top_script() {
echo ‘<script type=”text/javascript”>
jQuery(document).ready(function($){
$(window).scroll(function () {
if ( $(this).scrollTop() > 400 )
$(“#totop”).fadeIn();
else
$(“#totop”).fadeOut();
});
$(“#totop”).click(function () {
$(“body,html”).animate({ scrollTop: 0 }, 800 );
return false;
});
});
</script>’;
}
E voilà! In soli 3 piccoli passi ora hai il tuo pulsante Torna all’inizio nella parte inferiore delle pagine e degli articoli del tuo sito. Puoi anche modificare il link come meglio credi aggiungendo un’immagine o un font google o quello che ti piace.
ti potrebbe anche interessare:
come aggiungere media in wordpress?