Una guida per gli sviluppatori Aggiungi uno scorrimento fluido all'effetto Top in WordPress usando JQuery

Pubblicato: 2022-06-03

Tutti amiamo WordPress per la sua fluidità e il fatto che rende le cose molto più facili quando si tratta di utilizzare un efficiente sistema di gestione dei contenuti.

Non è un'esagerazione, ma lo sviluppo web facile e accessibile è una benedizione per i nuovi webmaster. WordPress ha dozzine di funzionalità che consentono a vari proprietari di siti Web di fornire ai propri utenti un'interfaccia super fluida e interattiva.

Coloro che sono nuovi su WordPress, possono controllare i tutorial di WordPress su risorse come The Blog Starter, che ha una guida passo passo su come avviare il tuo blog e gestirlo.

Se ti stai concentrando solo sul contenuto del tuo sito Web, vorremmo dirti che un sito Web reattivo e visivamente accattivante è importante quanto il contenuto.

Se hai un sito web esistente e non sai da dove cominciare, prenditi un periodo di tempo e investi 30 minuti ogni giorno per pensare all'aspetto e all'interfaccia del tuo sito web. Fidati di noi perché troverai gradualmente gli elementi che devi correggere. Una volta potenziato il tuo sito Web con grandi sforzi visivi, i tassi di conversazione aumenteranno.

E se sei una persona che ha già investito nel fornire agli utenti un'esperienza di visita fluida per il tuo sito web, complimenti a te! Bene, abbiamo un ottimo tutorial in programma per tutti coloro che desiderano apportare ulteriori modifiche spigolose al proprio sito Web e migliorare le prestazioni visive complessive del proprio sito Web.

In questo post del blog, lascia che ti guidiamo sull'aggiunta di uno scorrimento uniforme all'effetto superiore in WordPress con l'aiuto di jQuery.

Perché usare Smooth Scroll?

Di solito, quando i siti Web hanno articoli lunghi e l'utente li sta esaminando, potrebbe trovare frustrante raggiungere la fine della pagina Web.

Quindi, se il tuo sito Web può fornire uno scorrimento fluido verso l'alto con un solo clic, il lettore troverà il tuo sito Web senza interruzioni e super fluido.

Quindi, se sei il proprietario di un sito web o un marketer digitale, devi essere un opportunista e assicurarti di fare tutto il necessario per attirare un pubblico aggiuntivo e organico sul tuo sito web.

Modi per aggiungere lo scorrimento uniforme all'effetto Top in WordPress

Per essere in grado di aggiungere uno scorrimento fluido a To Effect in WordPress, puoi utilizzare uno qualsiasi dei modi seguenti:

1. Utilizzando del codice scritto in jQuery

2. Utilizzo di un plug-in

Di solito preferiamo la codifica rispetto ai plugin perché ciò non lascia spazio a singhiozzi se fatto nel modo giusto. I plug-in a volte possono ridurre la velocità di caricamento del sito Web, ma la codifica può aiutarti ad aggiungere alcune personalizzazioni senza influire sulla velocità in primo luogo. In particolare, in questo tutorial, spiegheremo il processo di codifica.

Come aggiungere l'effetto Smooth Scroll to Top in WordPress con la codifica?

Per aggiungere uno scorrimento fluido all'effetto superiore sul tuo sito Web WordPress utilizzando la codifica, devi seguire questi quattro passaggi:

Crea un file "Smoothscrolleffect.js".
Allega la funzione "Smoothscrolleffect.js" al tuo tema.
Aggiungi l'icona nel tema
Collegamento dell'effetto con le pagine web

Una volta che hai finito con questi 4 passaggi, sei pronto per ottenere più lettori. Se sei un programmatore, puoi creare i tuoi script secondo le tue esigenze.

Per i non programmatori, abbiamo spiegato accuratamente ogni passaggio e aggiunto il codice richiesto. Quindi, devi solo leggere i passaggi ed eseguirli di conseguenza.

Passaggio 1: crea un file "Smoothscrolleffect.js".

Questo è il file più importante che creerai per questo passaggio. Se non riesci a implementare questo passaggio in modo efficace, potresti non ottenere completamente uno scorrimento regolare.

In questo passaggio, creeremo un file ".js" (jQuery) che contiene una funzione che aggiungerà uno scorrimento uniforme all'effetto Top. Segui i passaggi per creare un file ".js" e caricarlo nella directory del sito web.

Crea un nuovo file di blocco note nel tuo sistema.
Copia il seguente codice:

jQuery(documento).ready(funzione($){

$(finestra).scorri(funzione(){

se ($(questo).scrollTop() < 200) {

$('#smoothup') .fadeOut();

} altro {

$('#smoothup') .fadeIn();

}

});

$('#smoothup').on('click', funzione(){

$('html, body').animate({scrollTop:0}, 'veloce');

restituire falso;

});

Incolla il codice nel file del blocco note.
Salvalo con qualsiasi nome ma assicurati che l'estensione sia ".js".
Accedi al cPanel del tuo sito web.
Vai alla directory del sito web “/js/”

Nota: se il tuo sito Web non ha una directory js, devi crearne una.

Carica nella directory il file ".js" che hai creato sul tuo sistema.

Passaggio 2: allega lo scorrimento scorrevole al tema

Nel passaggio precedente, abbiamo creato un file (con funzione di scorrimento uniforme) nella directory del sito Web e, in questo passaggio, collegheremo la funzione di scorrimento uniforme al nostro tema. Per fare ciò, segui i passaggi:

Passa al tuo editor di temi nella dashboard di amministrazione di WordPress. Apri function.php per modificare. e incollare il seguente codice al suo interno.

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), ”, true );

Premi "Salva modifiche".

Passaggio 3. Aggiungi l'icona al tema

Ovviamente, vuoi aggiungere un'icona al tuo sito web attraverso la quale puoi offrire al lettore di scorrere verso l'alto. Oltre a ciò, devi renderlo più interattivo e reattivo. Puoi farlo con l'aiuto di CSS come segue:

Passa al foglio di stile.css del tuo tema nell'Editor del tema.
Copia il codice seguente.

#lisciare {

altezza: 40px;

larghezza: 40px;

Posizione:fissa;

In basso: 50px;

A destra: 100px;

Rientro testo:-9999px;

Display:nessuno;

Sfondo:url(“http://www.example.com/wp-content/uploads/2013/07/top_icon.png”);

-durata-transizione-webkit: 0,4s;

-moz-transizione-durata: 0,4 s; durata della transizione: 0,4 s;

}

#smoothup:passa il mouse {

-webkit-transform: ruota (360 gradi) }

sfondo: url() non ripetuto;

}

Incollalo nel foglio di stile del tuo tema.
Premi "Salva modifiche".

Qui puoi cambiare l'icona secondo le tue esigenze; abbiamo usato un riferimento. Per modificare l'immagine, puoi caricarla sul tuo sito Web e incollarla nel campo Sfondo: URL nel codice sopra.

Passaggio 4: collegamento dello scorrimento fluido con le pagine Web.

Ora che abbiamo creato un file ".js" e lo abbiamo caricato nella directory del sito Web, l'abbiamo allegato con il tema e creato un'icona per l'effetto, è il momento del passaggio finale. Ora collegheremo l'effetto di scorrimento uniforme a tutte le pagine Web del sito Web. Segui i passi:

Apri footer.php nell'editor del tema.
Copia il seguente codice:
1. <a href=”#top” id=”smoothup” title=”Torna all'inizio”></a>
Incollalo nella pagina footer.php.
Premi "Salva modifiche".

Congratulazioni!, hai aggiunto con successo l'effetto scorrimento superiore scorrevole al tuo sito Web WordPress utilizzando jQuery.

Conclusione

Ci auguriamo che il tutorial di cui sopra ti aiuti efficacemente ad aggiungere l'effetto "scorrimento uniforme in alto" in WordPress utilizzando JQuery e corteggiare i tuoi utenti con un'esperienza di navigazione del sito Web eccezionale.

Se riscontri problemi nell'implementazione dei passaggi sopra menzionati, faccelo sapere lasciando un commento qui sotto.