Come creare un pulsante torna all’inizio in WordPress

Mantenere una buona esperienza utente (UX) è fondamentale. Pertanto, se i tuoi contenuti sono lunghi, potresti voler aggiungere un pulsante torna all’inizio per risparmiare tempo.

Fortunatamente, aggiungerlo al tuo sito WordPress è semplice. Puoi adottare l’approccio manuale e utilizzare il codice oppure scegliere un plugin WordPress dedicato. In definitiva, i pulsanti di scorrimento torna all’inizio possono essere configurati per funzionare su qualsiasi dispositivo su cui è visualizzato il tuo sito.
In questo articolo, daremo uno sguardo più da vicino a cosa sia un link del pulsante torna all’inizio (e perché è buono per la UX). Ti guiderò quindi attraverso entrambi i metodi per aggiungerli al tuo sito. Iniziamo!

Pulsante Torna all’inizio

Non è un segreto che i contenuti lunghi stanno diventando sempre più popolari sul Web. Ciò ha senso, poiché i contenuti lunghi offrono maggiori opportunità per trasmettere informazioni dettagliate, mostrare più immagini e aumentare l’ottimizzazione per i motori di ricerca (SEO). Tuttavia, la semplice generazione di contenuti lunghi e ignorare la UX probabilmente scoraggerà i tuoi lettori.

L’aggiunta di un pulsante torna all’inizio può aiutarti a evitarlo. Come suggerisce il nome, una volta cliccato, questo riporta semplicemente l’utente all’inizio della pagina in cui si trova. Sono adatti a tutti i dispositivi e schermi e in genere si trovano nell’angolo in basso a destra dello schermo. Se utilizzi contenuti lunghi, si consiglia vivamente di incorporare un pulsante torna all’inizio. Questo pezzo spiegherà esattamente come farlo.

Aggiunta di un pulsante torna all’inizio con HTML

Questo metodo è ideale se desideri modificare direttamente l’aspetto e il comportamento del pulsante di scorrimento torna in alto manualmente (ed evitare di appesantire il tuo sito con plugin extra).Prima di iniziare, ricorda che lavorerai con il codice di WordPress. Pertanto, è una buona idea utilizzare un child theme quando si aggiunge il pulsante tramite HTML (oltre a eseguire il backup del sito). Diamo un’occhiata!

Step #1

Il primo passaggio sarà accedere ai file del tuo sito web tramite File Transfer Protocol (FTP) per individuare la tua cartella JavaScript. Per questo esempio, utilizzeremo la soluzione FTP FileZilla, poiché è facile da usare, sicura e disponibile per ogni piattaforma.

Dopo aver aggiunto le credenziali del tuo sito, vai a wp-content> temi> yourtheme> js (il tuo tema è il tema che hai selezionato per il tuo sito):

pulsante tona in all'inizio

In questa cartella, dovremo creare un file di script che determinerà il comportamento del pulsante sul tuo sito.

Step #2

Successivamente, dovrai creare un nuovo file denominato topbutton.js all’interno della tua cartella js. Per farlo in FileZilla, fare clic con il pulsante destro del mouse sul quadrante in basso a destra e selezionare Crea nuovo file. Una volta che il file si apre nel tuo editor di testo preferito, incolla il seguente codice:

jQuery(document).ready(function($){
    var offset = 100;
    var speed = 250;
    var duration = 500;
        $(window).scroll(function(){
            if ($(this).scrollTop() < offset) {
                      $('.topbutton') .fadeOut(duration);
            } else {
                      $('.topbutton') .fadeIn(duration);
            }
        });
     $('.topbutton').on('click', function(){
            $('html, body').animate({scrollTop:0}, speed);
            return false;
            });
});

Puoi regolare le impostazioni di velocità e durata in questo codice per soddisfare le tue esigenze in quanto rappresentano unità di tempo, ma al momento non è necessario. Quando sei soddisfatto delle impostazioni del pulsante, salva il file e vai al passaggio successivo.

Step #3

Ora dovrai creare il tuo pulsante. Puoi crearne uno da zero o scaricarne uno da un sito come Font Awesome. Quindi, carica la tua immagine su WordPress tramite la libreria multimediale e copia il suo URL:

icona

Dovrai incollare questo URL nel tuo file style.css per poterlo utilizzare sul tuo sito, il che ci porta al passaggio successivo.

Step #4

Il tuo file style.css contiene tutti gli elementi di design del tuo sito, come caratteri, colori e molto altro. Per accedervi, vai su Aspetto> Editor in WordPress e apri la scheda Foglio di stile. Dovrai quindi incollare il seguente snippet:

.topbutton {
     height:50px;
     width:50px;
     position:fixed;
     right:5px;
     bottom:5px;
     Z-index:1;
     background-image:url("http://tuosito.com/wp-content/uploads/2021/03/topbutton.png");
     background-repeat:no-repeat;
     display:none;
}

Assicurati di sostituire l’URL del link dell’immagine in questo frammento con l’URL che hai copiato nel passaggio precedente. Quindi seleziona Aggiorna file, che farà apparire il tuo pulsante.

Step #5

Ora dovrai dire a WordPress che desideri utilizzare il file JavaScript che hai creato. Rimanendo nella pagina Editor, apri la scheda Theme Functions (functions.php):

crea-scroll-to-top

Successivamente, incolla il seguente enqueue script:

function my_scripts_method() {
     wp_enqueue_script(
           'custom-script',
           get_stylesheet_directory_uri() . '/js/topbutton.js',
           array( 'jquery' )
     );
}

Non preoccuparti se non capisci il testo: WordPress lo farà, che è la cosa più importante! Quando sei pronto, premi Aggiorna file.

Step #6

Infine, per aggiungere il tuo pulsante torna all’inizio al piè di pagina della tua pagina, vai al file footer.php nella schermata dell’Editor e incolla il seguente frammento di codice (idealmente prima di un tag div di chiusura per garantire una spaziatura ottimale):

<a href="#" class="topbutton"></a>

Seleziona Aggiorna file e il gioco è fatto! Il tuo pulsante torna all’inizio dovrebbe ora essere visualizzato sulle pagine del tuo sito WordPress.

Conclusioni

Spero di essserti stato utile se hai domande o dubbi lascia un commento e sarò lieto di aiutarti.

Potrebbe interessarti Come creare un Child Theme