Di seguito, ti fornisco uno snippet di codice che puoi aggiungere al tuo tema WordPress.
Questo snippet include un pulsante che appare in fondo alla pagina e, quando cliccato, riporta l’utente all’inizio della pagina.
Per creare un pulsante che consenta agli utenti di tornare all’inizio della pagina su un sito WordPress, è possibile utilizzare un mix di HTML, CSS e JavaScript. Di seguito, ti fornisco uno snippet che puoi aggiungere al tuo tema WordPress. Questo snippet include un pulsante che appare in fondo alla pagina e, quando cliccato, riporta l’utente all’inizio della pagina.
Passo 1: Aggiungi HTML al tuo tema
Puoi inserire l’HTML direttamente nel file footer.php del tuo tema, o se preferisci, puoi utilizzare un widget HTML personalizzato se il tuo tema lo supporta.
<!-- Pulsante Torna Su -->
<div id="back-to-top" style="display: none;">
<button onclick="scrollToTop()">Torna Su</button>
</div>
Passo 2: Aggiungi CSS per lo stile del pulsante
Aggiungi il seguente CSS al file style.css del tuo tema o utilizzando l’opzione di personalizzazione del CSS nel pannello di amministrazione di WordPress.
#back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
}
#back-to-top button {
padding: 10px 15px;
background-color: #0073aa;
color: #ffffff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
#back-to-top button:hover {
background-color: #005177;
}
Passo 3: Aggiungi JavaScript per la funzionalità
Inserisci il seguente JavaScript nel file footer.php del tuo tema, subito prima del tag di chiusura </body>, oppure utilizza un plugin per inserire script nel footer.
<script>
document.addEventListener("DOMContentLoaded", function() {
var backToTopButton = document.getElementById("back-to-top");
window.onscroll = function() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
backToTopButton.style.display = "block";
} else {
backToTopButton.style.display = "none";
}
};
window.scrollToTop = function() {
window.scrollTo({ top: 0, behavior: 'smooth' });
};
});
</script>
Come funziona
- HTML: Crea un div contenente un pulsante che appare quando l’utente scorre verso il basso.
- CSS: Posiziona il pulsante in basso a destra della pagina e gli conferisce uno stile accattivante.
- JavaScript: Controlla lo scroll della pagina. Se l’utente ha scrollato più di 100 pixel dal top, il pulsante appare. Quando cliccato, il pulsante utilizza
window.scrollTocon l’opzionebehavior: 'smooth'per riportare l’utente in cima alla pagina in modo fluido.
Assicurati di testare il tuo sito dopo aver aggiunto questo codice per verificare che il pulsante funzioni correttamente e che si integri bene con il design del tuo tema.
Utilizzare Code Snippet
Se desideri inserire il codice tramite un plugin come “Code Snippets” in WordPress, puoi farlo facilmente senza modificare direttamente i file del tema. Questo metodo è più sicuro e mantiene le modifiche anche quando cambi tema.
Passo 1: Installa e attiva il plugin “Code Snippets”
- Vai alla tua dashboard di WordPress.
- Naviga su Plugin > Aggiungi nuovo.
- Cerca “Code Snippets”.
- Installa e attiva il plugin.
Passo 2: Aggiungi uno snippet di codice
- Vai su Snippets > Add New.
- Dai un nome al tuo snippet, ad esempio “Pulsante Torna Su”.
Codice da inserire
Ecco il codice completo che puoi inserire come snippet. Questo include CSS, HTML, PHP e JavaScript.
<?php
// Aggiungi il pulsante Torna Su
add_action('wp_footer', 'add_back_to_top_button');
function add_back_to_top_button() {
?>
<!-- Pulsante Torna Su -->
<div id="back-to-top" style="display: none;">
<button onclick="scrollToTop()">Torna Su</button>
</div>
<style>
#back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
}
#back-to-top button {
padding: 10px 15px;
background-color: #0073aa;
color: #ffffff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
#back-to-top button:hover {
background-color: #005177;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var backToTopButton = document.getElementById("back-to-top");
window.onscroll = function() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
backToTopButton.style.display = "block";
} else {
backToTopButton.style.display = "none";
}
};
window.scrollToTop = function() {
window.scrollTo({ top: 0, behavior: 'smooth' });
};
});
</script>
<?php
}
?>
Passo 3: Salva e attiva lo snippet
Dopo aver incollato il codice, fai clic su Save Changes and Activate per attivare lo snippet.
Come funziona
-
PHP:
add_action('wp_footer', 'add_back_to_top_button');: Utilizza l’hookwp_footerper inserire il codice HTML, CSS e JavaScript direttamente nel footer della tua pagina. -
HTML: Il pulsante è creato e inizialmente nascosto.
CSS: Posiziona e stila il pulsante.
JavaScript: Gestisce la visibilità del pulsante in base alla posizione di scroll e implementa lo scroll fluido verso l’alto.
Considerazioni Finali
Utilizzando il plugin “Code Snippets”, il codice è mantenuto separato dai file del tema, il che significa che non perderai le modifiche quando aggiorni o cambi il tema. Inoltre, il plugin offre un’interfaccia semplice per gestire e organizzare tutti i tuoi snippet di codice. Per la maggior parte degli utenti, l’uso di un plugin come “Code Snippets” offre un equilibrio ideale tra facilità d’uso e sicurezza. Tuttavia, per sviluppatori avanzati, la creazione di un tema child o la modifica diretta dei file del tema possono offrire maggiore flessibilità e controllo.
Autore: Redazione
Vivo da oltre 40 anni nel Malcantone e amo questa regione!
