Kuinka lisätä esilataajan animaatio WordPressiin (askel askeleelta)

Haluatko lisätä esikuormittajan WordPress-sivustoosi? Esikuorma on animaatio, joka ilmaisee sivun latauksen etenemisen taustalla.

Esikuormittajat vakuuttavat käyttäjille, että verkkosivusto pyrkii lataamaan sivun. Tämä voi auttaa parantamaan käyttökokemusta ja vähentämään yleistä poistumisprosenttia.

Tässä artikkelissa näytämme, kuinka voit lisätä esiasentajan helposti WordPressiin.

Lisää esiasentaja WordPress-verkkosivustoosi

Mikä on esilataaja ja milloin sinun pitäisi käyttää sitä?

Esiasentaja on animaatio tai tilaviesti, joka ilmaisee sivun lataamisen etenemisen taustalle.

Yleens√§ k√§ydess√§si verkkosivustolla selaimesi alkaa ladata erilaisia ‚Äč‚Äčosia sis√§ll√∂st√§. Jotkin verkkosivuston osat latautuvat nopeammin (ts. Teksti, HTML, CSS), kun taas toiset latautuvat hitaammin (ts. Kuvat ja videot).

Jos suurin osa sis√§ll√∂st√§si on teksti√§, jossa on vain v√§h√§n kuvia ja videoita, sinun ei oikeastaan ‚Äč‚Äčtarvitse lis√§t√§ esilataajaa verkkosivustollesi. Sen sijaan sinun tulisi keskitty√§ verkkosivuston nopeuden ja suorituskyvyn parantamiseen nopeuttaaksesi sivujen lataamista.

Toisaalta, jos suurin osa sisällöstäsi on kuvia, valokuvia ja videosisällöksiä, käyttäjien tulee odottaa vähän ennen kuin he voivat nähdä kaiken sisällön.

Näiden osittaisten latausten aikana verkkosivustosi saattaa näyttää hidasta. Joskus käyttäjät saattavat jopa ajatella, että se on rikki. Esiasentajan lisääminen täyttää tämän aukon ja näyttää käyttäjälle etenemisilmaisimen sivun latauksen aikana.

Voit nähdä reaaliaikaisen esikuormittajan napsauttamalla Esikatselu-painiketta kirjoittaessasi blogin lähettämistä WordPressiin.

WordPress avaa blogin viestin reaaliaikaisen esikatselun uudessa ikkunassa ja näyttää esiasentajan ennen kuin se näyttää todellisen esikatselun.

WordPress Post Esikatseluohjelma

Katsotaanpa tämän jälkeen, kuinka voit lisätä esiasentajan helposti WordPress-verkkosivustoosi.

menetelmä 1. Lisää WordPress-esiasentaja WP Smart Preloader -sovelluksella

Tätä menetelmää suositellaan, koska se on helpompi ottaa käyttöön, eikä se vaadi muutoksia WordPress-teemaan.

Ensimmäinen asia, jonka sinun pitäisi tehdä, on asentaa ja aktivoida WP Smart Preloader -laajennus. Lisätietoja on WordPress-laajennuksen asentamista koskevassa vaiheittaisessa oppaassa.

Aktivoinnin j√§lkeen sinun t√§ytyy k√§yd√§ Asetukset ¬ĽWP Smart Preloader sivu, jolla voit m√§√§ritt√§√§ laajennuksen asetukset.

WP Smart Preloader -asetukset

Ensin on valittava esikatselutyyli tai sivukuormitusanimaatio. Lisäosassa on kuusi valittavissa olevaa animaatiota. Voit myös ladata oman mukautetun HTML- ja CSS-tiedoston luodaksesi mukautetun esiasentajan.

Sen jälkeen voit asettaa esikuormittajan näkymään vain kotisivulla valitsemalla Näytä vain kotisivulla.

Sitten sinun on vieritettävä alas "Kesto näyttää laturin" -osaan. Sinun on määritettävä esikuormittajan kesto. Oletusasetus on 1500 millisekuntia (1,5 sekuntia), jonka pitäisi toimia useimmissa sivustoissa, mutta voit muuttaa sitä halutessasi.

Aseta esikuormittajan kesto ja häivytys

Voit myös määrittää ajan, jonka laturi häviää kokonaan. Oletusasetus on 2500 sekuntia tai 2.5 sekuntia.

Muista lopuksi napsauttaa Tallenna muutokset -painiketta tallentaaksesi asetukset.

Voit nyt käydä heidän verkkosivustollaan nähdäksesi esikuormittajan toiminnassa.

WP Smart Preloader -esikatselu

menetelmä 2. Lisää WordPress Preloader Preloader -laajennuksella

Tämä menetelmä on joustava, mutta vaatii lisävaiheita sen asianmukaiseksi toteuttamiseksi WordPress-sivustolla.

Ensimmäinen asia, jonka sinun pitäisi tehdä, on asentaa ja aktivoida Preloader-laajennus. Lisätietoja on WordPress-laajennuksen asentamista koskevassa vaiheittaisessa oppaassa.

Aktivoinnin j√§lkeen sinun t√§ytyy k√§yd√§ Lis√§osat ¬ĽEsiasentaja sivu, jolla voit m√§√§ritt√§√§ laajennuksen asetukset.

Esiasentajan kokoonpanot

Ensin on syötettävä heksadesimaalikoodi taustavärille, jota haluat käyttää latausnäytössä. Oletusasetus on #FFFFFF (valkoinen). Voit käyttää online-värinvalintatyökalua HEX-koodin löytämiseen käytettävälle värille.

Seuraavaksi sinun on annettava käytettävän esikuormituskuvan URL-osoite. Plugin mukana tulee oletusanimaatio-kuva.

Jos haluat käyttää toista animaatiota, löydät linkin ladataksesi animoidun esiasentajan kuvan kolmannen osapuolen verkkosivustolta. Sitten voit lähettää kuvan wp-content-kansioon ja liittää URL-osoite tähän.

Seuraavaksi sinun on valittava, missä haluat näyttää esikuormittajan.

Valitse esiasentajan sijainti

Voit valita, näytetäänkö se jokaisella verkkosivustosi sivulla tai voit valita tietyn osan.

Lopuksi näet ohjeet seuraavan koodin lisäämiseksi WordPress-teeman header.php-tiedostoon.

 

Antes de abandonar la página, no olvide hacer clic en el botón "Guardar cambios" para almacenar su configuración.

No recomendamos agregar código a su tema de WordPress porque se borrará cuando actualice el tema.

Si está utilizando un tema secundario, entonces está bien agregar el código al archivo header.php de su tema secundario.

Una soluci√≥n a√ļn mejor ser√≠a agregar este c√≥digo usando un complemento de fragmentos de c√≥digo por separado, o en un complemento espec√≠fico del sitio.

Aquí está el código que debe agregar:

 function wpb_add_preloader() {
 echo '';
 }
 add_action( 'wp_body_open', 'wpb_add_preloader' );
 

Huomaa: Tämä koodin lisäystapa toimii vain WordPress-teemoissa, jotka tukevat WordPressin lisättyä wp_body_open () -toimintoa 5.2.

Tämä koodin lisäystapa varmistaa, että koodi pysyy siinä, vaikka päivität teeman.

Kun olet lisännyt koodin, voit käydä hänen verkkosivustollaan nähdäksesi esiasentajan toiminnassa.

Esikatselun esikatselu

Toivomme, että tämä artikkeli on auttanut sinua oppimaan lisäämään esiasentajan helposti WordPress-sivustoosi. Voit myös tutustua luetteloomme hyödyllisimpiä WordPress-vinkkejä, temppuja ja hakkereita mielenkiintoisempien ideoiden löytämiseksi.

Jos pidit tästä artikkelista, tilaa kanavamme YouTube katsoa WordPress-opetusvideoita. Löydät meidät myös osoitteesta Twitter ja Facebook.