Hoe u een preloader-animatie aan WordPress toevoegt - DeLaatbusiness
chatbot bouwen

Hoe u een preloader-animatie aan WordPress toevoegt

5 min


108
Dummy image 6 gratis internet marketing ebooks, klik hier voor download

Wil je een preloader toevoegen aan je WordPress-site? Een preloader is een animatie die de voortgang van het laden van een pagina op de achtergrond aangeeft.

Preloaders verzekeren gebruikers dat de website bezig is met het laden van de pagina. Dit kan de gebruikerservaring helpen verbeteren en het algehele bouncepercentage verlagen.

In dit artikel laten we u zien hoe u eenvoudig een preloader aan WordPress kunt toevoegen.

Een preloader toevoegen aan uw WordPress-website

Wat is een preloader en wanneer moet u deze gebruiken?

Een preloader is een animatie- of statusbericht dat de voortgang van het laden van de pagina op de achtergrond aangeeft.

Normaal gesproken begint uw browser bij het bezoeken van een website verschillende delen van de inhoud te downloaden. Sommige delen van de website worden sneller geladen (bijvoorbeeld tekst, HTML-code, CSS), terwijl andere veel langzamer worden geladen (bijvoorbeeld afbeeldingen en video’s).

Als de meeste van uw inhoud tekst is met heel weinig afbeeldingen en video’s, hoeft u niet echt een preloader aan uw website toe te voegen. In plaats daarvan moet u zich concentreren op het verbeteren van de snelheid en prestaties van de website, zodat pagina’s sneller worden geladen.

Aan de andere kant, als de meeste van uw inhoud afbeeldingen, foto’s en ingesloten video’s zijn , moeten uw gebruikers even wachten voordat ze alle inhoud daadwerkelijk kunnen zien.

Tijdens deze gedeeltelijke downloads kan uw website traag aanvoelen. Soms denken gebruikers zelfs dat het kapot is. Door een preloader toe te voegen, wordt dit gat opgevuld en wordt de gebruiker een voortgangsindicator getoond tijdens het laden van de pagina.

U kunt een live voorbeeld van een preloader zien door op de knop Voorbeeld te klikken terwijl u een blogpost in WordPress schrijft .

WordPress opent een live preview van je blogbericht in een nieuw venster en toont een preloader voordat het daadwerkelijk de live preview laat zien.

Preview-preloader van WordPress-berichten

Dat gezegd hebbende, laten we eens kijken hoe u eenvoudig een preloader aan uw WordPress-website kunt toevoegen.

Methode 1. Een preloader toevoegen aan WordPress met WP Smart Preloader

Deze methode wordt aanbevolen omdat deze gemakkelijker te implementeren is en geen wijzigingen in uw WordPress-thema vereist.

Het eerste dat u hoeft te doen, is de WP Smart Preloader- plug-in installeren en activeren . Raadpleeg onze stapsgewijze handleiding voor het installeren van een WordPress-plug-in voor meer informatie .

Na activering moet u de pagina Instellingen »WP Smart Preloader bezoeken om plug-in-instellingen te configureren.

WP Smart Preloader-instellingen

Eerst moet u een preloader-stijl of een animatie voor het laden van de pagina kiezen. De plug-in wordt geleverd met zes ingebouwde animaties om uit te kiezen. U kunt ook uw eigen aangepaste HTML en CSS uploaden om een ​​aangepaste preloader te maken.

Daarna kunt u de preloader alleen op de startpagina laten verschijnen door de optie ‘Alleen op startpagina weergeven’ aan te vinken.

Vervolgens moet u omlaag scrollen naar het gedeelte ‘Duur om lader weer te geven’. U moet de duur van de preloader specificeren. De standaardoptie is 1500 milliseconden (1,5 seconde), wat voor de meeste sites zou moeten werken, maar u kunt dit wijzigen als u dat wilt.

Stel de duur van de voorlader in en fade-out

U kunt ook instellen hoe lang het duurt voordat de lader volledig verdwijnt. De standaardoptie is 2500 seconden of 2,5 seconden.

Vergeet ten slotte niet op de knop ‘Wijzigingen opslaan’ te klikken om uw instellingen op te slaan.

U kunt nu uw website bezoeken om de preloader in actie te zien.

WP Smart Preloader Preview

Methode 2. Een preloader toevoegen aan WordPress met behulp van Preloader Plugin

Deze methode is flexibel, maar vereist aanvullende stappen om deze correct op uw WordPress-site te implementeren .

Het eerste dat u hoeft te doen, is de Preloader- plug-in installeren en activeren . Raadpleeg onze stapsgewijze handleiding voor het installeren van een WordPress-plug-in voor meer informatie .

Na activering moet u de pagina Plug-ins »Preloader bezoeken om de instellingen voor plug- ins te configureren.

Preloader-instellingen

Eerst moet u de hex-code invoeren voor de achtergrondkleur die u voor het laadscherm wilt gebruiken. De standaardoptie is #FFFFFF (wit). U kunt een online kleurkiezer gebruiken om de HEX-code te vinden voor de kleur die u wilt gebruiken.

Vervolgens moet u de URL opgeven van de preloader-afbeelding die u wilt gebruiken. De plug-in wordt geleverd met een standaard animatie-afbeelding.

Als je een andere animatie wilt gebruiken, vind je een link om een ​​geanimeerde preloader-afbeelding te downloaden van een website van een derde partij. U kunt die afbeelding vervolgens uploaden naar uw wp-content-map en de URL hier plakken.

Vervolgens moet u kiezen waar u de preloader wilt weergeven.

Selecteer de locaties van de voorlader

U kunt ervoor kiezen om het op alle pagina’s van uw website weer te geven, of u kunt een specifieke sectie selecteren.

Ten slotte ziet u de instructie om de volgende code toe te voegen aan het header.php-bestand van uw WordPress-thema.

1<div id="wptime-plugin-preloader"></div>

Vergeet voordat u de pagina verlaat niet op de knop ‘Wijzigingen opslaan’ te klikken om uw instellingen op te slaan.

We raden af ​​om code aan je WordPress-thema toe te voegen, omdat deze wordt weggevaagd wanneer je het thema bijwerkt.

Als je een child-thema gebruikt , is het oké om de code toe te voegen aan het header.php-bestand van je child-thema.

Een nog betere oplossing zou zijn om deze code toe te voegen met een aparte Code Snippets-plug- in of in een site-specifieke plug-in .

Hier is de code die u moet toevoegen:

1234function wpb_add_preloader() {echo '<div id="wptime-plugin-preloader"></div>';}add_action( 'wp_body_open', 'wpb_add_preloader' );

Opmerking: deze methode voor het toevoegen van code werkt alleen op WordPress-thema’s die compatibel zijn met de functie wp_body_open () die is toegevoegd in WordPress 5.2 .

Deze methode om de code toe te voegen zorgt ervoor dat uw code daar blijft, zelfs als u het thema bijwerkt.

Nadat u de code heeft toegevoegd, kunt u uw website bezoeken om de preloader in actie te zien.

Preloader-voorbeeld

We hopen dat dit artikel je heeft geholpen om te leren hoe je eenvoudig een preloader aan je WordPress-site kunt toevoegen.


Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *