Versnel WordPress met WP Rocket

WP-Rocket is een WordPress plugin dat een caching laag aan je website toevoegt en verschillende functies heeft voor optimalisatie van de website snelheid. Er zijn meerdere WordPress caching plugins in dit segment maar WP Rocket is misschien wel de beste en meest gebruiksvriendelijke van allemaal.

Een van de grootste plus punten is dat direct nadat je de plugin installeert al direct verbetering kan merken, zonder dat je alle instellingen door moet. Dat maakt deze plugin enorm gebruiksvriendelijk en de ideale oplossing wanneer je niet enorm veel tijd kwijt wilt zijn aan de details en techniek.

Daar houd het alleen niet op, ondanks dat WP-Rocket out-of-the-box al direct goed werk levert heeft het óók de mogelijkheid de instellingen verder te finetunen voor een nog beter resultaat.

Wat is WP Rocket voor WordPress?

WP-Rocket is een zeer populaire caching plugin voor WordPress, het is een betaalde plugin zonder gratis versie. De plugin is ontwikkeld om de snelheid en performance van je website te verbeteren én daarmee verminderd het ook nog de ‘server load’. Zo kan je ook op een minder krachtig webhosting pakket meer bezoekers ontvangen.

Om dit te doen heeft de plugin behoorlijk wat coole functies zoals, lazy loading van afbeeldingen, video’s en iframes. Optimalisatie van CSS en Javascript, het automatisch verwijderen van niet gebruikte CSS code. Het uitgesteld laden en uitvoeren van Javascript en het preloaden van de cache om er een paar te noemen.

Welke voordelen biedt caching?

Caching is niet uniek voor WPRocket er zijn tal van WordPress Cache Plugins, caching kan namelijk ook op server niveau door je webhosting provider gedaan worden, op DNS niveau door een partij als bijvoorbeeld Cloudflare én op de PC van je bezoeker zelf met Browser Caching.
Al deze caching lagen werken net wat anders al werken ze meestal uitstekend samen.

De cache moet je eigenlijk zien als een soort van familie foto, een moment opname van een pagina van je website. Wanneer een bezoeker op je website komt krijgt die de foto te zien die al klaar ligt.

Als er geen cache gebruikt wordt moeten alle onderdelen keer op keer opgehaald worden en verwerkt worden voor een pagina getoond kan worden. Alsof voor de foto iedereen telkens opnieuw moet samenkomen en poseren voor de foto.

Doordat met gebruik van WPRocket de ‘foto’ al klaar ligt in de vorm van tijdelijke bestanden kan je de laadtijd van je website enorm verbeteren. Omdat er alleen na een wijziging een statische versie van de pagina gemaakt hoeft te worden en daarna niet meer, kan de pagina veel sneller aan bezoekers getoond worden, heeft de webserver minder werk en laad de website veel sneller.

Komt nog bij dat goed gebruik maken van een cache en het optimaliseren van je website snelheid ook goed is voor je zoekmachine optimalisatie, de laadtijd van een website is namelijk ook een factor die zoekmachines gebruiken om je positie in de resultaten te bepalen.

Caching en WP Rocket

WP Rocket gebruikt verschillende caching vormen om je site te verbeteren. De voornaamste is pagina-caching, daarmee wordt je pagina omgezet naar een statisch HTML versie. Daarnaast maakt het ook per pagina een geoptimaliseerde Javascript en CSS versie.

Dit wordt verder nog aangevuld met regels in de .htaccess van je website waarmee de browsercache wordt aangestuurd om de CSS, Javascript en afbeeldingen langer te bewaren. Het voordeel daarvan is dat een bezoeker niet telkens opnieuw alle gegevens hoeft te downloaden.

Daarnaast is er ook nog object caching wat door de webhosting gedaan kan worden, met namen zoals bijvoorbeeld Redis, Varnish, Relay, Memcached. WP Rocket werkt daar goed mee samen en heeft zelfs voor sommige webhosting providers speciale integraties.

Waarom je WP Rocket wilt

WP Rocket valt op tussen de andere caching plugins niet alleen door de populariteit maar ook door de combinatie van een effectieve krachtige caching plugin die enorm gebruiksvriendelijk is gecombineerd met geavanceerde optimalisatie functionaliteit en degelijke support.

De plugin is eenvoudig te installeren en in te stellen voor eerste gebruik wat het een uitstekende keuze maakt voor zowel beginners als ervaren gebruikers.

Met functies zoals lazy loading van afbeeldingen, database optimalisatie, minimalisering van CSS en JavaScript bestanden, pagina cache, verwijderen van niet gebruikte CSS, CDN ondersteuning en integratie met verschillende hostingproviders zorgt dit voor een goede gebruikerservaring.

Verder is WP Rocket al jaren een stabiele plugin met regelmatige updates en goede support, dat alles maakt deze plugin een uitstekende toekomstbestendige keuze die wij ook zelf gebruiken voor onze klanten als onderdeel van de WordPress onderhoudspakketten.
Geen interesse in WordPress onderhoud? Dan kan je de plugin ook zelf aanschaffen op de website van WP-Rocket.

Gaan we nu door naar de installatie, gebruik en alle instellingen 😉

WP Rocket Handleiding

Nu je een idee hebt wat deze plugin allemaal kan is het tijd om er mee aan de slag te gaan. In dit deel gaan we alle belangrijke functies bij langs

WPRocket installeren

Omdat het een Premium Plugin is, werkt de installatie net iets anders. Wanneer je de plugin hebt aangeschaft kan je vanuit je account een .zip bestand downloaden. Dit bestand moet je vervolgens uploaden in je WordPress site.

  1. koop de WP Rocket plugin als je dat nog niet gedaan had.
  2. Wanneer ingelogd op je account bij wp-rocket.me download je de plugin en sla je het .zip bestand op.
  3. Login op je eigen WordPress website en in de admin ga naar “Plugins” > “Nieuwe plugin”
  4. Boven in de pagina achter de titel “Plugins toevoegen” staat een knop “Plugin uploaden”, daar moet je op klikken
  5. Selecteer nu het .zip bestand dat we in stap 2 gedownload hadden om te uploaden.
  6. Na het uploaden activeer je de plugin.

Algemene “Snelle” instellingen

In principe, zodra de plugin geactiveerd is zal die al direct aan de slag gaan om een statische html versie van de pagina’s te genereren waarmee WordPress al een stuk sneller is.

Kort de belangrijkste functies en opties om nog extra aan te zetten, de belangrijkste kan je vinden onder Bestandsoptimalisatie en Media. Als je dit aanzet moet je wel goed de website testen in een incognito of privé venster van je browser.

Bij Bestandoptimalisatie wil je CSS bestanden verkleinen en de CSS Levering optimaliseren. Daarnaast helpt JavaScript uitgesteld laden ook enorm.

Onder Media is het aanzetten van LazyLoad een optie die veel invloed heeft op de laadtijd van je website. De “Add missing image dimensions” optie is ook aan te raden om te gebruiken.

1. Cache-instellingen van WP Rocket

De statische versie van pagina’s maakt de website een stuk sneller maar kan ook bijzondere problemen geven in sommige configuraties. Daarnaast kan je afhankelijk van hoe je site opgebouwd is dit ook nog verder optimaliseren. Het mooie is dat voor de basis er instellingen aanwezig zijn en de ontwikkelaar ook extra helper plugins en code snippets ter beschikking stelt.

Mobiele cache-instelling

Voor bezoekers op een telefoon is snelheid belangrijk, de snelheid en rekenkracht van een telefoon is doorgaans minder dan dat van een laptop of PC. De caching optie wil je daarom aanhebben zoals dat standaard is ingesteld.

Iets wat vooral in de begin tijd met de opkomst van mobiel internet het geval was, is een volledig aparte mobiele weergave die ook gebruik maakt van andere bestanden. In dat geval moet de optie “Cache-bestanden voor mobiele apparaten scheiden” aangezet worden. Dit is onder andere nodig wanneer je WPtouch of bijvoorbeeld het Avada thema gebruikt in combinatie met WP Rocket.

Gebruikers Cache

In de meeste gevallen wil je Gebruikers Cache optie uit laten staan. Deze optie zorgt er namelijk voor dat er ook een Cache versie wordt gemaakt en getoond voor ingelogde gebruikers, mooi zou je denken, maar er zijn nogal wat nuances.

Standaard wordt voor iedere WordPress gebruiker een eigen unieke cache gemaakt die niet ge”pre-load” wordt. Dat zorgt er voor dat bij de eerste keer bekijken van een pagina voor wat trage laadtijden, omdat er ook een Cache gemaakt wordt op de achtergrond.

Daarbij is het dan ook nog zo dat met meerdere gebruikers de omvang van je cache gigantisch uit de klauwen kan lopen. Met 20 ingelogde gebruikers op een dag maal 10 pagina’s heb je al een cache van 200.

Doe je echter aanpassingen aan de website zodat alle ingelogde gebruikers identieke pagina’s te zien krijgen zonder personalisatie, dan kan er met een stukje extra code wel veel winst behaald worden door de cache voor ingelogde gebruikers te delen.
add_filter( 'rocket_common_cache_logged_users', '__return_true' );

Cache Levensduur

Hiermee kan je aangeven met welke frequentie de cache-bestanden automatisch opgeschoond moeten worden. Wanneer je een pagina of bericht aanpast of publiceert worden die pagina’s automatisch ververst in de cache.

Het heeft voornamelijk invloed op dynamische onderdelen die op de achtergrond bijgewerkt worden en worden getoond op de website. Denk bijvoorbeeld aan extern ingeladen Instagram feed of reviews.

Heb je een eenvoudige website waar niet veel op veranderd dan kan je de cache ook op meerdere dagen zetten of het automatisch verversen zelfs helemaal uitschakelen door een ‘0’ in te voeren.

Samenvatting

De belangrijkste optie van de Cache sectie is de optie “Caching voor mobiele apparaten inschakelen”. Alle andere opties heb je waarschijnlijk niet nodig tenzij je problemen ervaart.

Caching voor mobiele apparaten is de belangrijkste setting in de sectie Cache van de WP Rocket instellingen.

2. Bestandsoptimalisatie

Bestandsoptimalisatie is een bijzonder effectieve functie in WP Rocket, zeker wanneer je een ‘premium’ thema gebruikt of één van de vele pagebuilders.

In die gevalleen heeft je site een enorme hoeveelheid extra bagage qua opmaak code en onderdelen die je niet gebruikt. Met deze opties is het mogelijk een deel daarvan weer er uit te filteren en je site te stroomlijnen.

Minify HTML optimalisaties

In eerdere versies pre-2020 was er een optie voor Minify HTML, deze optie is verwijderd omdat het voor de snelheid van de website niet veel voordeel opleverde en dit door vrijwel geen enkele snelheidstest nog als aanbeveling wordt gezien.

Wat met deze optie werd gedaan was het verwijderen van alle enters, tabs en spaties die niet striknoodzakelijk waren. Omdat de HTML van een pagina vaak maar een klein deel van de code is was de winst hiervan verwaarloosbaar. Door de omvang van CSS en Javascript bibliotheken die veel gebruikt worden is het daarvoor nog steeds wel relevant.

CSS-bestanden optimaliseren

CSS-bestanden verkleinen Even testen maar meestal veilig om aan te zetten, je kan ook CSS bestanden uitsluiten als je een probleem ervaart en kan vast stellen in welk bestand het probleem zich specifiek bevind. Hier kunnen wij je bij helpen als je dat wilt.

CSS-levering optimaliseren

Hierbij heb je twee opties “Remove unused CSS” en “Load CSS Asynchronously”.
Remove unused CSS heeft hierbij de grootste kans op problemen maar zal ook de grootste verbetering geven.

De problemen kunnen veroorzaakt worden doordat WP Rocket automagisch probeert te bepalen welke onderdelen wel aanwezig zijn maar niet gebruikt worden, die worden dan vervolgens uit de geoptimaliseerde versie verwijderd.

Het kan daarbij voorkomen dat er nét iets te veel CSS wordt verwijderd en onderdelen er een beetje vreemd uit komen te zien.

Load CSS Asynchronously Is een veilige optie waarbij een minimale hoeveelheid CSS gegenereerd wordt die ‘altijd’ nodig is om de basis van de site te laten zien. Daarnaast worden alle overige CSS bestanden op de achtergrond geladen.

Op deze manier kan je bezoeker de website al zien en lezen nog voordat die volledig geladen is. Je website moet wel publiekelijk zichtbaar zijn, zit er nog een coming soon, onderhoudspagina voor je website dan werkt deze optie niet.

Er komt ook een waarschuwing in beeld dat deze optie soms fouten kan geven, test dit dus goed.

JavaScript-bestanden optimaliseren

Javascript optimaliseren helpt ook bij om de website te versnellen, sommige plugins laden volledige bibliotheken in qua javascript terwijl er maar een minimale hoeveelheid van gebruikt wordt. Javascript is meestal verantwoordelijk voor interactieve elementen op een pagina en in je admin. Denk aan het verslepen van elementen en onderdelen met wat vertraging en animatie inladen zoals sliders en carousels.

JavaScript bestanden verkleinen

Hiervoor gaat het zelfde op als het verkleinen van CSS bestanden. Onnodige spaties, enters, tabs en opmerkingen in de code worden uit de bestanden verwijderd.

Combine Javascript files

Deze optie is alleen beschikbaar wanneer javascript verkleind wordt. Bij gebruik zou je ook de snelheid goed moeten testen of het wel echt verbeterd.

Maakt je website gebruikt van HTTP/2 dan heeft het combineren van bestanden doorgaans geen positieve bijdrage.

Onder de voorganger HTTP/1.1 was het aantal gelijktijdige downloads namelijk beperkt waardoor het hielp als je zo minmogelijk losse bestanden gebruikte, dat is onder HTTP/2 niet meer het geval.

Javascript uitgesteld laden

Het inladen van een website gaat in de code van boven naar beneden, net als dat je een pagina aan tekst leest. Wanneer javascript in de header van je website wordt ingeladen dan wilt het voorkomen dat het opbouwen en genereren van de pagina ‘pauzeert’ tot dit bestand volledig klaar is en uitgevoerd is.

Door JS uitgesteld te laden kan het inladen van de website gewoon doorgaan en download de benodigde javascript op de achtergrond.

Delay Javascript execution

Is vergelijkbaar met uitgesteld laden, of gaat beter gezegd hand in hand. Bij deze optie wordt de javascript code pas uitgevoerd wanneer een gebruiker ook echt op de pagina actief is.

Hiervoor wil je wel de javascript van je cookie banner, analytics en google tagmanager uitsluiten ander kloppen je statistieken niet. Zelfde gaat op voor eventuele code van een slider.

Uitgesloten javascript bestanden

Voor een ieder van de opties is het mogelijk om specifieke bestanden of domeinen uit te sluiten.
Sommige bestanden wil je wellicht niet verkleinen omdat die problemen geven, of omdat je niet wilt dat die vanaf je eigen webhosting geserveerd worden.

Andere javascript onderdelen wil je niet uitgesteld laden of uitvoeren omdat dit invloed heeft op het meten van je bezoekersstatistieken via Google Analytics bijvoorbeeld.

Veelvoorkomende Javascript bestanden die je wilt uitsluiten worden al gesuggereerd door de plugin.

Samenvatting

Met het optimaliseren van CSS en Javascript bestanden krijg je vrijwel gegarandeerd snellere laadtijden. Het is alleen ook redelijk fout gevoelig doordat niet alle plugins en thema’s hier goed mee om kunnen gaan. Je zal dan ook goed moeten testen of de website goed blijft werken en er goed uit blijft zien wanneer je besluit bestanden te verkleinen of de volgorde qua inladen gaat aanpassen.

3. Media optimaliseren met WP Rocket

Je website bestaat niet alleen uit code maar ook uit media zoals afbeeldingen en video’s.
Voor afbeelding optimalisatie heb je extra plugins nodig als bijvoorbeeld Smush, die plugin kan ook de premium versie kan ook WebP afbeeldingen genereren. Meer over het optimaliseren van afbeeldingen in dit artikel.. Wanneer de afbeelding bestanden zelf geoptimaliseerd zijn kom je uit bij het onderdeel LazyLoad.

LazyLoad

De Lazyload optie binnen WP Rocket heeft een aantal mogelijkheden, de werking is voor allen gelijk. Wat lazyload doet is enkel de onderdelen inladen die zichtbaar zijn op het scherm van de bezoeker en een ~300 pixels onder.

Zo worden afbeeldingen onderaan de pagina nog niet ingeladen totdat de bezoeker die bijna krijgt te zien. Dat maakt je website een stuk sneller en zorgt ook voor minder dataverkeer voor je bezoeker én voor je webhosting pakket.

Voor de meeste sites is er geen reden om de volgende opties uit te laten staan.
“Voor afbeeldingen inschakelen”, “Enable for CSS background images”, “Voor iframes en video’s inschakelen”.

De lazy load opties activeren heeft eigenlijk alleen maar een positieve impact ook voor onder andere de Google PageSpeed score.

Wanneer je toch problemen ervaart met een afbeelding, video of iframe dat niet tijdig ingeladen wordt kan je die invoeren in het kader van “Excluded images or iframes”, zodat die uitgesloten wordt van de Lazyload functionaliteit.

Let op! Wanneer je ook de Smush plugin installeert of een andere plugin voor afbeelding optimalisatie, zorg dan dat daarin de lazyload optie niet geactiveerd staat. Meerdere plugins die exact het zelfde proberen te doen heeft nogal een negatieve impact en kan conflicten geven.

Het vinkje onder de sectie Image Dimensions (Afbeelding dimensies) bij “Add missing image dimensions” kan eigenlijk ook nooit kwaad. Dit zorgt ervoor dan onderdelen van de website niet verspringen wanneer afbeelding met lazyload worden ingeladen door te zorgen dat de afbeelding dimensies, hoogte en breedte, toegevoegd worden.

Youtube Embeds

Wanneer je de lazyload optie voor iframes en videos inschakelt heb je ook de optie om het kader te vervangen met de youtube thumbnail, doe je dat, dan begint de video pas met laden wanneer de bezoeker er op klikt.

Samenvatting

Het gebruik van lazyload heeft weinig kans op problemen en is naast bestand optimalisatie een effectieve manier om trage laadtijden te verbeteren. Met lazyload wordt er minder onnodige inhoud geladen op een pagina.

Onze standaard is om alle lazyload opties van WP Rocket aan te zetten.

4. Preload cache WP Rocket

Preloading is standaard actief en een van de meer unieke eigenschappen van WP Rocket ten opzichte van andere WordPress caching plugins. Bij de meeste alternatieve wordt er pas een gecachete versie gemaakt wanneer een bezoeker een pagina bezoekt. Daardoor zal die bezoeker alsnog te maken hebben met trage websites. Met WP Rocket wordt echter bezoek gesimuleerd waardoor de statische bestanden al gegenereerd worden vóór de eerste bezoeker de site bekijkt.

Preload cache

De checkbox bij “Activeer preloading” zou standaard aan moeten staan.
In het kader er onder kan je eventueel URL’s invoeren die je wilt uitsluiten, dat kan handig zijn voor grotere sites. Je kan dan bijvoorbeeld archief pagina’s voorbij nummer 50 uitsluiten van de cache.
Daarnaast kan op sommige low budget hostingpakketten de preload een te zware belasting zijn voor het hostingpakket. Er is een stukje code beschikbaar dat je kan toevoegen als plugin om de waardes was te verminderen. .

Is een mooie optie voor de meeste websites, het moment dat je bezoeker met de muis over een menu item of link beweegt wordt de aanvraag om de pagina te laden al verzonden. Zo lijkt de website extra snel het moment dat er ook daadwerkelijk op gelikt wordt.

Cache preload en links preloaden kan je het beste aanzetten

DNS verzoeken voorladen

DNS prefetching is een wat complexer onderdeel. Je moet het zo zien dat wanneer een website geopend wordt er eerst op basis van het domeinnaam de server opgezegd moet worden in een telefoonboek, dit kost een klein beetje tijd. Wanneer je een Youtube video inlaad moet niet alleen de DNS van je eigen site gezocht worden maar ook die van Youtube, vul je alle adressen hier in, dan maakt dat de site een beetje sneller.

Je kan uitzoeken wat er allemaal ingeladen wordt via de developer console in je browser of via webpagetest.org, na een test kan je in de waterval ziet welke externe diensten en websites ingeladen worden. Vervolgens kan je die domeinen invoeren

Preload Fonts

Met de preload fonts optie kan je het inladen van lettertypes naar voren in ‘de wachtrij’ verplaatsen.
Dat is goed voor de Google pagespeed score en voorkomt dat teksten verspringen wanneer een stuk tekst eerst in een standaard lettertype getoond wordt en later pas omgewisseld wordt voor een eigen wat unieker lettertype van bijvoorbeeld Google fonts.

Samenvatting

De standaard preload werkt vrijwel altijd goed en de preload links optie is ook niets om je zorgen over te maken. De DNS verzoeken en het preloaden van lettertypes is een stuk complexer en niet zo eenvoudig als je daar niet de technische ervaring voor hebt, gelukkig kan je altijd onze hulp daarvoor inschakelen.

5. Geavanceerde regels

In dit deel kan je op basis van de slug een pagina uitsluiten van de cache. Handig voor je login pagina of als je problemen ervaart met WooCommerce op bijvoorbeeld de checkout pagina’s.
Verder kan je ook specifieke user agents uitsluiten van de cache bijvoorbeeld mobiele gebruikers of een specifiek systeem dat je gebruikt.

Met altijd URLs legen kan je aangeven dat bij het bewerken van een pagina of update, sommige pagina’s ook ververst moeten worden. Denk bijvoorbeeld wanneer je zelf een overzichtspagina opbouwt die berichten uit verschillende categorieën laat zien.

Query string(s) cachen is een handige optie voor wanneer je bijvoorbeeld veel advertentie campagnes draait. Normaal wanneer er een ? in de url van je pagina zit, wordt er geen gebruik gemaakt van de cache, dit wordt alleen ook door sommige plugins gebruikt om de correcte taal van de website te tonen of bezoekers te tracken. Wanneer je de correcte combinatie invoert worden die waardes genegeerd en toch een correcte cache weergegeven zonder dat dit de functionaliteit of tracking beinvloed.

6. Database opschonen met WP Rocket

WordPress slaat alle berichten, pagina’s en reacties op in een database. Die database kan langzaam vullen met informatie die niet meer noodzakelijk is. WP Rocket heeft een gebruiksvriendelijke interface om dit op te schonen. Om te bepalen wat je wel en niet wilt verwijderen uit de database is het goed om te weten wat ieder punt betekend.

Berichten opschonen > Revisies

Revisies zijn oudere en eerdere versies van berichten. Standaard worden alle revisies altijd bewaard. Het kan dus zijn dat je een pagina iedere week aanpast 10 jaar lang er voor die ene pagina meer dan 500 revisies bewaard worden.
Je kan zie vanuit dit scherm allemaal verwijderen. Als alternatief kan je ook de volgende regel toevoegen in je wp-config.php bestand waarmee alleen de laatste 5 versies bewaard worden.
define( 'WP_POST_REVISIONS', 5 );

Berichten opschonen > Automatische concepten

Wanneer je een nieuw bericht begint te schrijven dan zal na ~60 seconden de pagina automatisch opgeslagen worden, ook als je het bericht niet opslaat als concept of publiceert. Met deze optie kunnen die automatisch opgeslagen versies weer verwijderd worden.

Berichten opschonen > Verwijderde berichten

Wanneer een bericht of pagina verwijderd wordt komt die in de prullenbak te staan van de website. Vandaaruit kan je het nog weer herstellen als je zou willen. Het kan voorkomen dat over tijd die prullenbak overvol raakt. Via deze optie kan je de prullenbak automatisch legen.

Reacties opschonen

Spreekt redelijk voor zich. Net als met verwijderde berichten blijven spam en verwijderde reacties nog wel bewaard in de database, je kan dit handmatig legen vanuit de reacties of je kan het via WP Rocket automatisch laten doen.

Transients Opschonen

Dit zijn tijdelijke database opties, kan eigenlijk geen kwaad om te verwijderen want de transients die nodig zijn worden automatisch opnieuw aangemaakt. Het aanmaken van een nieuwe transient kost wel een beetje extra laadtijd dus dit is niet iets wat je ieder uur moet gaan verwijderen.

Database opschonen

Schoont de database van de website op, hebben we nog nooit een probleem mee gezien. Het opschonen van de database heeft voor de meeste wat kleinere websites haast geen impact op snelheid. Voor grotere sites en webshops kan het wel nut hebben om de database schoon te houden.

7. CDN met RocketCDN

Wanneer je een CDN (Content Delivery Network) gebruikt voor je website kan je die hier invoeren.
WP Rocket kan dan alle links van afbeeldingen, javascript en CSS vervangen met de url van de CDN. Ze bieden ook een eigen Rocket CDN aan.

Binnen Nederland en de rest van in ieder geval Noord Europa is het internet goed geregeld. We hebben in Nederland een groot internetknooppunt waardoor een CDN zeer weinig voordelen bied.

Heb je echter een groot wereldwijd publiek of enorme hoeveelheden dataverkeer voor foto’s en video’s dan is een CDN wellicht het overwegen waard, al zou je dan ook eerst kunnen kijken wat de extra maandelijkse kosten je bij je huidige webhost op kunnen leveren.

8. Heartbeat

De WordPress Heartbeat stuurt op de achtergrond iedere 15 a 60 seconden een bericht naar je server. Daarmee functioneert onder andere de autosave functie en onderdelen als realtime data weergave voor sommige plugins.
Wanneer je de heartbeat beperkt wordt er nog maar eens per twee minuten een signaal verstuurt.
Je kan dit ook volledig uitzetten voor bijvoorbeeld de voorkant van de website.
Heartbeat uitschakelen voor de post editor en backend raad ik met klem af.

9. Add-ons

Er zijn nog een aantal integraties die je aan/uit kan zetten als je die gebruikt. In de meeste gevallen hoef je hier niets mee te doen.
Gebruikt je webhost Varnish als extra caching oplossing, dan zou je de Varnish add-on moeten activeren.
De WebP Compatibility add-on is alleen nodig wanneer je een webp plugin gebruikt die problemen geeft. WP Rocket zo’n populaire plugin dat andere ontwikkelaars al vaak rekening mee houden en dit niet nodig is.
De Cloudflare en Sucuri add-ons zijn handig om te gebruiken wanneer je deze extra dienst ook daadwerkelijk gebruikt.

10. Afbeelding optimalisatie

Dit heeft eigenlijk geen plaats in de WP Rocket instellingen en is ter promotie van een ander product. Voor afbeelding optimalisatie geven wij de voorkeur aan WP Smush pro.
Enige waar je op moet letten is dat je enkel de optimalisatie functie gebruikt en niet de lazyload optie.

WP-Rocket Problemen

Wij zijn specialisten in het oplossen van WordPress Problemen, als je een probleem hebt met WP Rocket gebruik het formulier onderaan deze pagina voor hulp. We hebben een aantal problemen al voor je op een rijtje gezet.

Extreem veel opslag verbruik

Bij grote websites gecombineerd met javascript kunnen er enorm veel statische kopieën gemaakt worden van html, css en javascript bestanden. Soms wel 1mb per pagina, combineer dat met een website van 2000+ pagina’s en je webhosting pakket kan snel volraken. De eenvoudige oplossing is om de optimalisatie van javascript en css uit te schakelen. Je kan ook uitzoeken welk bestand of deel dit veroorzaakt en enkel dat stukje uitsluiten van de optimalisatie.

WP Rocket could not modify the .htaccess file due to missing writing permissions.

Bij installatie worden er regels toegevoegd aan een .htaccess bestand. Het kan zijn dat er extra beveiliging op het bestand zit waardoor WP Rocket de regels niet kan toevoegen. Je kan met FTP inloggen op je website en de betreffende regels handmatig toevoegen aan het htaccess bestand.

De melding wanneer het .htaccess bestand niet door WP rocket aangepast kan worden

WP Rocket: één of meerdere plugins zijn in- of uitgeschakeld, leeg de cache als dit van invloed is op de frontend van je site

Bij het activeren of deactiveren van een plugin heeft dit mogelijk invloed op de weergave van de website. Denk aan deactiveren van een contact formulier plugin. In dat geval moet je de cache handmatig verversen.

De melding die in beeld komt wanneer je een plugin deactiveert.

Mobiele website versie wordt niet getoond op tablet

Standaard wordt een tablet het zelfde behandeld als de cache voor desktop. Sommige tablets hebben ook bijna eenzelfde formaat als kleinere laptops. Toch kan het zijn dat je daarvoor de mobiele versie wilt tonen omdat die beter is geoptimaliseerd, je kan dit voor elkaar krijgen met een extra aanvullende code snippet.

Samenvattend

WP Rocket is onze go-to Optimalisatie plugin, de ontwikkelaar brengt regelmatig een nieuwe versie uit en is ook voor beginners de makkelijkste manier om de laadtijd te versnellen.

Heb je een langzame website en heb je hulp nodig om die te versnellen en de snelheid verder te optimaliseren? Bij onze WordPress onderhoudspakketten helpen we je graag verder met het optimaliseren van je website of als eenmalige fix met onze WordPress snelheidsoptimalisatie service.

Heb je vragen over WP Rocket of een foutmelding waarvan je niet weet wat je er mee moet? Stuur ons een bericht en we helpen je graag verder.

WordPress handmatig installeren

In deze handleiding staat uitgelegd hoe je binnen 5 minuten gemakkelijk zelf WordPress installeert via FTP. 

Ga jij aan de slag met je eigen website? In deze handleiding leggen we uit hoe je WordPress gemakkelijk zelf installeert in 4 stappen.

Om WordPress handmatig te kunnen installeren op een WordPress hosting pakket hebben we de volgende dingen nodig:

WordPress installeren: de belangrijkste begrippen

Webhosting – om WordPress handmatig te installeren heb je een webhosting provider nodig. Deze provider zorgt ervoor dat je gegevens kan opslaan op een webserver. Op deze server komen alle gegevens te staan die met je website te maken hebben. Diezelfde server is nodig zodat bezoekers je site kunnen raadplegen wanneer ze op jouw domeinnaam zoeken. 

Domeinnaam – bezoekers maken contact met je website via een domeinnaam. Een domeinnaam kost een paar euro per jaar en regel je het makkelijkst via je webhosting provider. 

FTP – betekent File Transfer Protocol en deze term zal je vaker voorbij horen komen in deze handleiding. Met FTP kan je gegevens up- en downloaden op je hostingpakket. Je hebt hiervoor een gebruikersnaam, wachtwoord en servernaam nodig.

HTML – staat voor HyperText Mark-up Language en zorgt ervoor dat je webbrowser (zoals Google Chrome, Safari of Firefox) deze taal naar een visuele weergave vertaalt.

PHP – staat voor Hypertext Processor. PHP is een programmeertaal waarmee je dynamische webpagina’s kan maken.

MySQL – alle gegevens van je site zoals berichten, pagina’s en instellingen worden opgeslagen in een database. MySQL is een type database dat wordt gebruikt voor het opslaan van al deze gegevens. 

WordPress – en natuurlijk is daar WordPress zelf. WordPress behoort tot Content Management Software (CMS). WordPress zorgt ervoor dat je, na het installeren van WordPress, op een gebruiksvriendelijke manier aan je website kan werken. Zonder technische kennis nodig te hebben.

Waarom WordPress handmatig installeren?

Steeds meer webhosting providers bieden pakketten aan waar WordPress vooraf geïnstalleerd is. Je kan hierdoor eenvoudig en snel aan de slag, maar toch heeft het handmatig installeren van WordPress een aantal grote voordelen:

  1. Je leert met een FTP programma te werken
    Het handmatig installeren van WordPress is een leerzaam proces omdat je met een FTP programma en databases leert werken. Deze onderdelen zijn essentieel voor iedere website.
  1. Je voorkomt dat onnodige code en plugins worden geïnstalleerd
    Door WordPress handmatig te installeren voorkom je dat er allerlei onnodige code en plugins die vanuit de webhosting provider worden geïnstalleerd. Deze extra code zou in de toekomst problemen kunnen geven. 

WordPress installeren stappenplan

Liever alle stappen kijken? We hebben ook een video gemaakt hoe je WordPress handmatig installeert. Tekst uitleg gaat verder onder de video.

Stap 1 – WordPress downloaden

Ga allereerst naar nl.wordpress.org. Hier download je de meest recente versie van WordPress met het Nederlandse taalpakket.

Rechtsboven op nl.wordpress.org is de download pagina te vinden.

Er verschijnt nu een nieuwe pagina. Scroll naar beneden en klik op “WordPress downloaden”.

6.4.3 is op moment van schrijven de meest recente versie, wanneer je dit leest kan er een nieuwe WordPress update uit zijn met een nieuw versie nummer.

Sla de download op in een map op je PC en pak de WordPress map uit. Je ziet nu alle losse WordPress bestanden: 

Een overzicht van de WordPress Core bestanden en mappen

Deze bestanden heb je straks nodig om WordPress te installeren op je webhosting pakket. 

Let op: open de bestanden in de volgende stap niet met Word. Gebruik in plaats hiervan Notepad/Kladblok of een code editor. 

Stap 2 – Webhosting regelen, FTP en MySQL database instellen

Log in op het beheerpaneel van je webhosting provider met de gegevens die zijn verstrekt door je webhosting provider. 

In dit voorbeeld maken we gebruik van een provider die het DirectAdmin paneel gebruikt. Gebruikt jouw provider een ander paneel als plesk, cpanel of een totaal eigen paneel (zoals oa. strato, one.com, transip) dan zal je wellicht even moeten zoeken waar de verschillende onderdelen zich precies bevinden.

Wanneer je bent ingelogd op het beheerpaneel ga je naar Your Account > FTP Management:
Gebruik je een andere webhost check dan onze uitgebreide FTP uitleg.

In deze handleiding gebruiken we DirectAdmin als voorbeeld

Maak vervolgens een FTP account aan door een gebruikersnaam en wachtwoord in te voeren en klik op “Create”.

Daarnaast moeten we nog een MySQL database aanmaken. 

Ga hiervoor terug naar het overzicht binnen het beheerpaneel van je webhosting provider en klik op “MySQL Management”:

Bij andere beheerpanelen kan je zoeken naar de termen Database, SQL of MySQL.

Klik op “Create new Database” en vul in:

  • Database Name
  • Database Username
  • Database Password

Klik op “Create” om de database aan te maken. 

Sla de database naam, gebruikersnaam en wachtwoord goed op. Bij de installatie van WordPress hebben we deze gegevens weer nodig. Als er ook nog een Database Host getoond wordt dient dit ook opgeslagen te worden.

Ga nu weer terug naar het overzicht binnen het beheerpaneel en klik op “SSL Certificates” onder “Advanced Features”:

De SSL setup zit soms ook nog onder de “domain setup” optie.

Via deze optie kan je een beveiligingscertificaat aanvragen voor je website. Afhankelijk van je webhosting kan het verschillen waar deze optie precies zit. Bij de meeste webhosting providers kan je tegenwoordig gratis een SSL certificaat aanvragen. 

Stap 3 – Bestanden website uploaden via FTP

In deze stap gaan we de WordPress map uit stap 1 op de webserver plaatsen via FTP. Om toegang te krijgen tot je webserver dien je gebruik te maken van een FTP-programma. In ons voorbeeld gebruiken we hiervoor FileZilla Client. 

Dit programma is gratis te downloaden via de site van FileZilla.

Zorg dat je de filezilla client download en niet de server.

Zodra je FileZilla op je PC hebt geïnstalleerd, open je het programma en log je in op de webserver. Gebruik hiervoor de inloggegevens uit stap 2 die je hebt gebruikt om een FTP account aan te maken. 

Sommige providers gebruiken sftp, in dat geval moet de host beginnen met sftp:// en wordt meestal poort 22 gebruikt.

Vul bij “Poort” 21 in en klik op “Snelverbinden”.

Nu de verbinding is gemaakt met de webserver zie je onderin twee kolommen met mappen. Linksonder zie je de lokale mappen die op je PC staan. In de rechterkolom zie je de mappen die op je webserver staan. Hier gaan we WordPress installeren. 

Selecteer alle WordPress bestanden uit de linkerkolom en sleep deze naar de public_html map in de rechterkolom. Het uploaden kan even duren. 

bij sommige providers moet je eerst nog door een paar mapjes klikken voor je de public_html vind.

Let bij het uploaden op dat je niet de hele WordPress map uploadt op je webserver, maar alle losse bestanden in de public_html map zet. Het is geen groot probleem, maar doe je dit niet dan verschijnt de naam “wordpress” in je website adres. Voor het mooie wil je dit voorkomen. 

Heb je de gehele WordPress map al op je webserver gezet? Geen paniek, selecteer alle losse bestanden, en versleep deze naar de public_html map: 

Stap 4 – WordPress instellen

Nu is het tijd om WordPress in te stellen!

Open je website door de domeinnaam in te typen in je webbrowser om WordPress gebruiksklaar te maken.

Wanneer het een nieuwe website is zal die nog niet vindbaar zijn via Google, je zal dus echt de volledige url moeten intypen in de adresbalk van je browser.

Klik op “Laten we starten!”:

De eerste installatie stap

Vul nu de gegevens in van je database met de info uit stap 2. 

Vul hier alle database gegevens in. Tenzij je een andere database host hebt kan je localhost meestal laten staan.

Klik op “Verzenden” en “De installatie uitvoeren”. 

Nu kom je op een scherm waarin je een site titel, gebruikersnaam en wachtwoord kan instellen:

Bewaar je gebruikersnaam en wachtwoord goed! Wachtwoord van WordPress vergeten? Volg deze uitleg.

Klik op “WordPress installeren”. De installatie is nu voltooid en WordPress is klaar voor gebruik. Vanuit het scherm dat je nu ziet kan je inloggen op de -backend- admin van WordPress en beginnen met het maken van je website.

de standaard login url is /wp-login.php

Vul je gebruikersnaam en wachtwoord in en klik op “Inloggen”. Gefeliciteerd! WordPress is nu geïnstalleerd. 

De volgende stappen:

Nu je WordPress site een feit is, is het zaak om je website veilig te stellen. In dit artikel leggen we je uit hoe je handmatig een WordPress backup maakt. Daarna wil je misschien nog de volgende onderdelen toevoegen:

Heb je meer hulp nodig of wil je dat wij de website volledig voor je klaar zetten? Dat kan met onze website bouw service.

WordPress hulp nodig?

Nu de basis van je website staat is het zaak om je site online, veilig en up-to-date te houden. Met onze Site Service pakketten ontzorgen we je van alle technische aspecten van je website en heb je toegang tot onze hulplijn wanneer je vragen of problemen hebt met je site. Bekijk hier onze Site Service pakketten om te zien hoe we je kunnen helpen. 

Alle Contact Form 7 Formulier velden voor WordPress

Contact Form 7 is een populaire en gratis WordPress plugin waarmee je gemakkelijk contact formulieren voor je website maakt.

Je kan zelf bepalen welke invoervelden je gebruikt en de plugin biedt integraties met andere populaire WordPress plugins. Super handig dus.

Vandaag nemen we je mee door alle invoervelden en leer je hoe je optimaal gebruikmaakt van Contact Form 7.
Lees hoe je Contact Form 7 installeert en hoe je zelf formulieren maakt.

Wat zijn de mogelijkheden met de Contact Form 7 velden

Wanneer je een contactformulier binnen WordPress bewerkt, zie je bovenaan een tal van opties. Hieronder lees je wat ieder invoerveld betekent. Vervolgens nemen we ze een voor een met je door.

Invoervelden Contact Form 7

  • Tekst: een enkele regel waar tekst ingevuld kan worden, denk aan een naam of straat
  • E-mail: een veld om een e-mailadres achter te laten
  • URL: een veld om een website-URL in te voeren
  • Tel: een veld voor een telefoonnummer
  • Getal: een invoerveld alleen voor getallen
  • Datum: een veld met een datumkiezer
  • Tekstgebied: een groot tekstveld
  • Dropdown-menu: een keuzemenu waar iemand kan kiezen uit meerdere opties
  • Selectievakjes: een keuzemenu waar iemand één of meerdere opties kan kiezen
  • Keuzerondjes: een keuzemenu waar iemand maximaal één optie kan kiezen
  • Acceptatie: een optie om je bezoeker akkoord te laten gaan met bijvoorbeeld de algemene voorwaarden 
  • Quiz: een optie om een quiz toe te voegen aan het formulier
  • reCAPTCHA: met deze optie voorkom je spamberichten
  • Bestand: een optie om een bestand toe te voegen aan het formulier
  • Verzenden: met deze optie voeg je een verzendknop toe aan een formulier

Tekst

Het tekst veld is het meest gebruikte tekstveld en hiermee kan je, zoals de naam al zegt, tekst invoeren. Bij het toevoegen van een tekstveld kan je kiezen om dit veld verplicht te maken. Daarnaast kan je het veld een naam geven. Deze naam zie je niet terug op het formulier op je website, maar wordt gebruikt in de e-mail die je ontvangt nadat iemand het formulier verstuurt. Tot slot kan je ook een standaardwaarde invullen. Dit is een voorbeeld tekst die bezoekers te zien krijgen bij het tekstveld. Vergeet niet het vinkje onder “Standaardwaarde” aan te zetten. Anders moeten je bezoekers de voorbeeld tekst handmatig weghalen, wat niet heel praktisch is. 

 

Extra opties bij het invoegen van een tekstveld.

 

Hoe het tekstveld wordt weergeven op je website.

E-mail

Dit veld is speciaal bedoeld voor het invullen van een e-mailadres. Anders dan een tekstveld controleert het veld voor e-mails automatisch of er een geldig mailadres is ingevuld. Ook dit veld kan je verplicht maken en een standaardwaarde opgeven.

Het instellen van een “e-mail veld” met een standaardwaarde.


Hoe het e-mail veld wordt weergeven op je website.

URL

Met een URL-veld kunnen bezoekers een website-URL achterlaten. Ook dit veld controleert automatisch of de opgegeven URL geldig is. Vergeet je bij dit veld http:// of https:// in te vullen, dan geeft Contact Form 7 een foutmelding.

Het instellen van een URL-veld.


Hoe het URL-veld wordt weergeven op je website.

Telefoonnummer

Dit veld is bedoeld om een telefoonnummer achter te laten. Net als bij de andere invoervelden kan je voor dit veld instellen om het veld verplicht te maken en een standaardwaarde opgeven.

Het instellen van een telefoonnummer veld.

Weergave van het telefoonnummer veld op je website.

Getal

Het veld voor getallen is bedoeld om getallen op te geven. Je kan kiezen uit twee soorten; een normaal tekstveld waar een willekeurig getal kan worden ingevoerd, of een “slider” waarmee je een getal kan selecteren. Je kan hierbij ook een minimum en maximum instellen. 

Het instellen van een “getal-veld” met een slider en een minimum en maximum.

Weergave van het getallenveld op je website.

Datum

Met dit veld kan je een datum laten invullen. Ook kan je kiezen om bezoekers alleen uit een bepaalde periode te laten kiezen. In dit geval verschijnen alleen de data uit de door jou gekozen periode. 

Het instellen van een datumveld met een specifiek bereik.

Weergave van het datumveld op je website.

Tekstgebied

Een tekstgebied gebruik je voor de invoer van grotere stukken tekst. Meestal is dit de plek waar je je bericht kan typen. Een normaal tekstveld gebruik je dan weer voor het invoeren van bijvoorbeeld je naam. 


Een tekstgebied instellen dat het woord “Bericht” standaard al in het veld heeft staan.

Weergave van het tekstgebied op je website.

Drop-down menu

Met een drop-down menu kan je iemand laten kiezen uit meerdere opties. Bij de aanvullende opties van dit veld kan je daarnaast aangeven of bezoekers één of meerdere selecties kunnen maken. 

Bij de aanvullende opties kan je aangeven of je toestaat dat bezoekers meerdere selecties kunnen maken.

Weergave van het drop-down menu op je website.

Selectievakjes

Met dit veld kan je bezoekers de keuze laten maken uit één of meerdere opties. Liever de keuze beperken tot maximaal één optie? Gebruik dan het veld “keuzerondjes”.

Het instellen van het “selectievakjes veld”.

Weergave van selectievakjes op je website.

Wil je de selectievakjes onder elkaar weergeven in een lijst dan kan je de volgende CSS code toevoegen in de Customizer onder extra css.

.wpcf7-form-control.wpcf7-checkbox {
display: flex;
flex-direction: column;
}

Keuzerondjes

Dit veld beperkt je bezoekers tot het maken van één keuze. Handig wanneer je iemand een keuze wil laten maken uit meerdere alternatieven. 

Het instellen van het “keuzerondjes veld”.


Weergave van keuzerondjes op je website.

Acceptatie

Met het “acceptatie-veld” geef je de bezoekers de vraag om akkoord te gaan met de algemene voorwaarden en de privacy policy. Via de extra opties kan je instellen dat het formulier alleen wordt verzonden als de algemene voorwaarden zijn geaccepteerd. Dit is een handige functie omdat je in het kader van de AVG-wetgeving verplicht bent om toestemming te hebben om de ingevulde gegevens te verzamelen. 

Instellingen met betrekking tot het “acceptatie veld”.

Weergave van “acceptaties” op je website.

Contact Form 7 reCAPTCHA

Met deze optie voorkom je dat je spam berichten ontvangt en moeten bezoekers bevestigen dat zij geen “robot” zijn. Om gebruik te maken van reCAPTCHA moet je eerst een “API key” aanvragen bij Google. Vervolgens activeer je reCAPTCHA door op het dashboard van WordPress op Contact > Integratie > reCAPTCHA > Integratie instellen te klikken.

Klik op “Integratie” links in het dashboard van WordPress om reCAPTCHA te activeren.

Wanneer je de tool geïnstalleerd hebt, komt er vaak een icoontje rechts onderin de website te staan.
Die kan verborgen worden met de volgende code:

.grecaptcha-badge { visibility: hidden; }

Quiz

Met deze functie kan je vragen en antwoorden toevoegen aan een formulier. Uiteraard spreekt het antwoord op de onderstaande vraag voor zich. 

Voer hier je vragen en antwoorden in.


Weergave van een quiz op je website.

Bestand

Met deze optie laat je bezoekers een bestand toevoegen aan het formulier. Bij de extra opties kan je instellen hoe groot het bestand maximaal mag zijn en welke bestandstypes worden toegestaan. Houd er rekening mee dat de meeste webhosting providers bestanden toestaan tot maximaal 8 a 16 MB echter zijn er ook providers waar dit beperkt is tot 2 a 4MB.

Extra instellingen voor het “bestand-veld”. 8.000.000 bytes in dit voorbeeld staat gelijk aan 8 MB.

Weergave van het toevoegen van een bestand op je website.

Bestanden als bijlage meesturen

Standaard worden verstuurde bestanden opgeslagen in de mediabibliotheek van je WordPress admin. En worden ze niet als bijlage meegestuurd in de e-mailnotificaties die je ontvangt van een nieuw ingevuld formulier. Dit is vervelend want zo zie je belangrijke bestanden gemakkelijk over het hoofd.

Wil je dat geüploade bestanden standaard als bijlage worden meegestuurd bij je mails? Klik dan op de tab “Mail” wanneer je het formulier aan het aanpassen bent.

Scroll vervolgens naar beneden totdat je de instelling “Bestand bijlages” ziet. Hier vul je de naam in van het aangemaakte upload veld.

Vul hier de aangemaakte upload tag in.

Bestanden zullen nu als bijlage worden meegestuurd wanneer je een e-mail notificatie ontvangt.

Wil je bezoekers toestaan om meerdere bestanden te uploaden? Maak dan meerdere bestand upload tags aan en plaats alle verschillende tags in dit veld.

Verzenden

Bij ieder nieuw formulier maakt Contact Form 7 standaard een verzendknop aan. Heb je deze per ongeluk verwijderd, dan kan je deze via de optie “verzenden” handmatig weer toevoegen. Je kan zelf een knoptekst invoeren of wijzigen.

Stel onder “Label” de tekst in die je wilt koppelen aan de verzendknop.

De volledige Contact Form 7 handleiding

Wil je stap voor stap weten hoe je Contact Form 7 installeert en hoe je zelf nieuwe formulieren maakt en plaatst?
Bekijk dan de volledige handleiding van Contact Form 7

Problemen met Contact Form 7

Heb je alle stappen gevolgd maar heb je problemen met Contact Form 7? Zoals e-mails die niet aankomen. Lees dan hier hoe je problemen met Contact Form 7 oplost.

Zoek je vakkundige hulp bij het onderhouden van je website en het oplossen van WordPress problemen? Neem dan nu contact op of bekijk onze Site Service pakketten.

Afbeelding invoegen in WordPress

Afbeelding toevoegen via WordPress, Elementor, Divi, WPBakery en meer! Handige stappenplan voor iedere plugin.

Hoe voeg je precies een afbeelding toe in je WordPress berichten? Er zijn zoveel verschillende mogelijkheden en bij iedere plugin gaat net alles weer anders. Maar hoe weet je precies welke jij moet gebruiken? In dit artikel leggen we je per plugin uit hoe je een afbeelding binnen je WordPress pagina of bericht kan toevoegen. 

Afbeelding toevoegen via WordPress blokken bewerken

Een afbeelding op WordPress toevoegen kan gemakkelijk door een blok te bewerken. In dit stappenplan leggen we je gemakkelijk uit hoe je een WordPress afbeelding kan toevoegen via blokken in een paar simpele stappen:

Stap 1: Voeg een afbeelding toe door middel van op + te klikken of de afkorting /afbeelding te gebruiken zodat je afbeelding kan selecteren.

 

Je kan het plus icoontje gebruiken wat zich links boven bevind of die rechtsboven

 

Of:

of door /afbeelding te typen nadat je een nieuw blok start na een paragraaf/alinea

Stap 2: Afbeelding uploaden of selecteren.

vervolgens kan je de afbeelding uploaden of selecteren uit de mediabibliotheek

Stap 3: Klik op de afbeelding en klaar is kees. 

Wil je dat je WordPress afbeelding naast je tekst doorloopt?

Stap 4: Zorg ervoor dat je bericht tekst bevat en daaronder de afbeelding hebt ingevoegd.

Stap 5: Je kan nu de tekst en afbeelding uitlijnen. Met links en rechts uitlijnen komt deze naast de tekst te staan.

Stap 6: Druk op het pijltje naar boven om de afbeelding naast de tekst te krijgen.

links uitlijnen is ook mogelijk. je kan ook de tekst verdelen door met kolom blokken te werken.

Stap 7: Met de blauwe puntjes kan je de afbeelding van vergroten en verkleinen naar de gewenste grootte.

Liever de video bekijken? Bekijk dan hoe je in WordPress tekst naast je foto krijgt die doorloopt.

Wil je een volledige foto galerij in je pagina plaatsen? Check deze uitleg:

Afbeelding toevoegen in Elementor

Naast de standaard WordPress editor kan je ook gemakkelijk afbeeldingen toevoegen via Elementor. Open een bericht met Elementor en volg onderstaande stappen.

Stap 1: Selecteer de afbeelding widget.

Selecteer de afbeelding widget

Stap 2: Kies bij het grijze afbeelding logo een nieuwe afbeelding om deze toe te voegen. Kies een afbeelding uit je mediabestand of upload een nieuwe afbeelding.

kies vervolgens de afbeelding in elementor

Stap 3: Bij het tabblad Style kan je de grootte van de afbeelding aanpassen naar de door jouw gewenste grootte.

aanpassingen qua formaat doe je in het tabje stijl

Afbeelding toevoegen in Divi

Stap 1: Druk op het + icoontje om een module toe te voegen binnen een bestaande sectie en selecteer de module ‘afbeelding’.

Met het plus icoontje kan je een blok / module toevoegen in divi

Stap 2: Bovenin kan je een nieuwe afbeelding invoegen (of uploaden). Mocht hier een voorbeeld afbeelding staan dan kan je deze vervangen voor je eigen afbeelding.

door op de placeholder afbeelding te klikken kan je die vervangen door je eigen foto.

Eventueel stap 3: Bij het tabblad ‘content’ en ‘ontwerp’ kan je de afbeelding nog bewerken, mocht je dit willen.

Stap 4: Rechtsonder druk je op het vinkje om op te slaan.

Afbeelding toevoegen in WPBakery

WPBakery is naast Elementor en Divi een populaire pagebuilder voor WordPress en heeft ontzettend veel gebruikers. 

Maak je gebruik van WPBakery, dan gaat het invoegen van een afbeelding als volgt:

Stap 1: Druk op het + teken en klik op het element ‘Afbeelding’.

kies het element dat je wilt invoegen in de pagina

Stap 2: Geef een titel op en klik op het + teken.

Kies vervolgens de afbeelding bron en selecteer de afbeelding door op het grijze vlak met groene plusje te klikken

Stap 3: Kies een afbeelding uit je map of upload hier een afbeelding.

Stap 4 (optioneel): Hier kan je ook andere bewerkingen aan je WordPress afbeelding doen zoals het toevoegen van een animatie of het instellen van de grootte, uitlijnen, etc.

Stap 5: Wanneer je op ‘Opslaan’ drukt, sla je de afbeelding op.

Afbeelding toevoegen in de sidebar

Naast de hierboven besproken methoden kan je natuurlijk ook een afbeelding toevoegen in de sidebar. Dit kan door middel van een widget waarmee je de afbeelding in de sidebar plaatst.

Stap 1: Ga naar ‘widgets’ in je WordPress menu.

de widgets & sidebar kan je vinden onder weergave > widget

Stap 2: Sleep de afbeelding widget naar de (blog) sidebar.

Afhankelijk van je WordPress versie kan het widget menu er soms verschillend uitzien.

Stap 3: Kies een afbeelding (of upload deze).

de widget blokken werken vergelijkbaar met de standaard WordPress blokken bewerker

Stap 4: Sla deze op!

Zoals je hebt kunnen lezen zijn er verschillende manieren om afbeeldingen toe te voegen aan je berichten en pagina’s in WordPress.  

Lukt het uploaden van afbeeldingen niet? Worden afbeeldingen niet zichtbaar bij het uploaden? We hebben een aantal veel voorkomende oorzaken op een rijtje gezet in ons artikel WordPress afbeelding upload problemen.

Mocht je nog WordPress problemen ondervinden met afbeeldingen of heb je daar verdere hulp bij nodig? Bekijk dan onze Site Service pakketten of neem contact op.

WordPress Avada thema licentie invoeren

Avada thema licentie invoeren op je WordPress website met deze stapsgewijze handleiding. Ontdek de gemakkelijkste manier om het Avada thema te activeren.

Wat is het Avada thema?

Het Avada thema is naast Elementor en Divi een populair WordPress thema. Avada wordt gebruikt voor verschillende type websites zoals een portfolio, e-commerce, blogs en meer.

Het thema staat bekend om de “drag-and-drop” page builder. Hiermee kan je eenvoudig zelf websites maken zonder ook maar enige kennis van coderen nodig te hebben.

Avada licentie aanschaffen

Ben je van plan om Avada te gebruiken voor jouw website? Je koopt Avada via themeforest.net. Je hebt dan meteen een ‘lifetime’ licentie. Het voordeel hiervan is dat je niet na een bepaalde periode hoeft te verlengen en altijd toegang hebt tot de laatste versie en updates van Avada. Een licentie kost momenteel $69 inclusief 6 maanden support van de ontwikkelaars.

Hoe installeer ik de Avada thema licentie in WordPress?

Gebruik je Avada voor het bouwen van jouw site? Volg dan de stappen hieronder om Avada te activeren.

  1. Ga naar themeforest.net/downloads

  2. Log in met het account waarmee je Avada hebt gekocht en ga naar downloads. Zoek hier naar Avada.

  3. Selecteer bij de groene download knop dat je alleen het licentiebestand in text wil downloaden
    download enkel de license (text) om eenvoudig de licentie code te kunnen kopiëren

  4. Open het gedownloade bestand
    En kopieer de purchase code.
    Het item Purchase Code is een uniek nummer en kan maar 1 keer gebruikt worden.

  5. Ga terug naar WordPress.
    Klik op Avada in je WordPress dashboard en voer hier de code uit de vorige stap in. Dit doe je in het “register your website” veld. Klik vervolgens op “Register now”.

    Voor de zojuist gekopieerde licentie in

Avada elders downloaden (illegaal)

Wanneer je Avada niet volgens de officiële route hebt gekocht, dan loopt je website, los van dat het illegaal is, serieuze veiligheidsrisico’s. Je weet niet waar het bestand precies vandaan komt en welke code er toegevoegd is aan de bestanden. Bovendien mis je support en updates van Avada bij vragen of problemen.

Hulp bij installeren van Avada thema op WordPress

Wil je hulp bij het installeren van het Avada thema op je WordPress site? Of heb je een andere WordPress vraag? Laat het ons weten en wij lossen je WordPress probleem snel op!

Handmatig een WordPress back-up maken

Het is belangrijk om regelmatig een back-up te maken van je WordPress website, zodat je gegevens en bestanden veilig zijn in het geval er iets misgaat. In dit artikel leggen we je stap voor stap uit hoe je een back-up van je WordPress website maakt en hoe je deze kan opslaan en herstellen.

Een handmatige WordPress back-up is handig wanneer

  • WordPress niet meer werkt en je geen backup kan maken met een plugin
  • Je webhosting provider geen backups maakt (ja die bestaan nog…)
  • Je jouw site niet via een plugin kan herstellen omdat die niet werkt
  • Je gedeeltes van een backup wilt terugzetten
  • Deze skill is ook handig te hebben voor systemen anders dan WordPress

Belang van een WordPress back-up maken

Het is belangrijk om altijd een actuele back-up van je WordPress website achter de hand te hebben. Los van het oplossen van onverwachte problemen zijn WordPress back-ups handig (lees ‘een must’) wanneer je nieuwe plugins, thema’s en andere aanpassingen aan je website wilt testen. Er kan tenslotte altijd iets misgaan. Met een recente back-up kan je jouw site altijd weer herstellen naar de situatie voor de aanpassingen.

Maar ook wanneer je jouw WordPress website migreert naar een nieuwe hosting provider of domein gebruik je een back-up om je website weer online te krijgen vanaf je nieuwe hosting provider.

Wist je dat al onze service pakketen inclusief supersnelle webhosting van onze hostingpartner komen? 

Handmatig WordPress backup maken

Bij deze stap leggen we je uit hoe je handmatig zelf een backup maakt van je WordPress website.

Wat heb je nodig?

  • FTP login gegevens
  • Een FTP-programma, meer informatie in deze handleiding
  • Een database programma, Adminer is universeel. Als je webhost phpMyAdmin aanbiedt is dat nog makkelijker

Uitleg video

1. Maak verbinding met je website via FTP

Log in met de FTP-gegevens van je hostingprovider en ga naar de ‘document root’, ook wel de installatie map van WordPress.

Dit is het moeilijkste deel omdat de mappenstructuur per webhosting provider kan verschillen.

In ons artikel FTP-handleiding voor WordPress leggen we dit in meer detail uit.

schermafbeelding van filezilla met actieve connectie
Verbinding maken via ftp in Fillezilla

Rechtsonder zie je nu alle mappen van je website. In de linkerkolom zie je de mappen van je PC. Hierin staan al je plugins, thema’s en afbeeldingen opgeslagen. Sleep nu alle bestanden uit de rechterkolom naar je PC (linkerkolom). Je kan ook enkel de wp-content map en het wp-config.php bestand uit de rechterkolom downloaden.

filezilla highlight wp-content map
sleep minstens de wp-content map naar je pc

De volgende stap is om in te loggen in de database van je website. Hier staan alle teksten, pagina’s, menu’s en instellingen opgeslagen.

Kijk of je webhost phpmyadmin aanbiedt op jouwwebsite.nl/phpmyadmin. Of installeer Adminer en log daarmee in op de database.

highlight wp-config.php
in het wp-config.php bestand kan je de database gegevens terug vinden.

Om in te loggen kan je het wp-config.php bestand raadplegen. Hier vind je de login gegevens van de database.

Open het bestand in kladblok en zoek de regels met daarin DB_USER en DB_PASSWORD. Na de komma, tussen aanhalingstekens vind je de logingegevens.

database gegevens in wp-config.php bestand
hier zie je de WordPress database gegevens terug.

4a. Database exporteren via phpmyadmin

Klik bovenin op ‘Exporteer’ en zorg dat de Indeling op ‘SQL’ staat. Klik vervolgens op ‘Starten’. Je database wordt nu gedownload op je PC. Bewaar deze bestanden veilig!

phpmyadmin database export maken
in phpmyadmin klik je op export en vervolgens op starten

4b. Database exporteren via Adminer

Ga naar Adminer.org en download het programma.

Sleep nu het Adminer-bestand naar de rechterkolom in FileZilla. Kopieer nu de naam van het bestand en plaats dit achter je url in de zoekbalk.

adminer uploaden met filezilla
sleep het adminer bestand van je pc naar je webhost

Er verschijnt nu een login waarmee je kan inloggen op de database van je site via Adminer. Gebruik hiervoor de logingegevens uit het wp-config.php bestand (zie stap 3).

Klik vervolgens op Exporteren > Opslaan > Exporteren om de database te downloaden.

database exporteren in adminer
bij adminer vind je de export knop aan de linkerzijde

Database backup herstellen

Dezelfde tools die je gebruikt voor het downloaden van je WordPress-gegevens gebruik je ook voor het herstellen van je gegevens. In plaats van het exporteren van je gegevens, importeer je ze en sleep je de bestanden van je PC weer naar de webhosting omgeving.

phpmyadmin import database
bij phpmyadmin kan je via import een database backup importeren.

Vragen over back-ups?

Wil jij je WordPress back-ups echt goed geregeld hebben? Standaard inbegrepen en onderdeel van onze WordPress onderhoudspakketten.

“installatie mislukt: Doelmap bestaat al” oplossen

Je probeert een oude plugin opnieuw te downloaden of je probeert een plugin te updaten maar dit lukt niet. Tijdens het downloaden of updaten krijg je de melding ‘Installatie mislukt: Doelmap bestaat al’ (aangeduid in het oranje vierkant).
foutmelding installatie mislukt doelmap bestaat al
Voorbeeld van de foutmelding foutmelding installatie mislukt doelmap bestaat al

Oorzaak: Installatie mislukt: Doelmap bestaat al

In beide gevallen komt de melding ‘Installatie mislukt: Doelmap bestaat al’ omdat er bij jouw hosting provider al een mapje onder de zelfde naam bestaat. De plugin of thema is in principe dan al aanwezig. Het kan ook gebeuren door een update of installatie waarbij de webhosting hapert. Dan ontbreken er bestanden waardoor de map wel aanwezig is in de hosting omgeving maar de bestanden van de plugin om te kunnen functioneren er niet zijn.

Hoe “Installatie mislukt: Doelmap bestaat al” foutmelding verhelpen

Om de Installatie mislukt: Doelmap bestaat al melding te verhelpen zijn er een paar opties. Indien je de plugin wel in het overzicht van alle plugins ziet staan, verwijder die dan, mogelijk moet je de plugin eerst deactiveren. Nu kan je deze opnieuw downloaden. Als de plugin niet in het overzicht staat maar je toch de melding ‘Installatie mislukt: Doelmap bestaat al’ te zien krijgt moet via een andere weg het mapje van de plugin handmatig verwijderd worden. Dit kan met een FTP programma (lees onze FTP handleiding voor WordPress hier), via de bestandsbeheer/filemanager die sommige webhosting providers aanbieden of met een filemanager plugin. Let wel op! De verkeerde map verwijderen kan behoorlijk nadelige gevolgen hebben, zorg dus wel eerst voor een goede backup! Uitleg gaat verder onder de video

Map verwijderen via WordPress file manager plugin

Stap 1: Installeer & activeer de file manager plugin [afbeelding2]
WordPress filemanager plugin installeren
afbeelding 2. Plugins > nieuwe toevoegen > zoeken naar “file manager”. beide zijn vrijwel identiek
Stap 2: Ga naar de file manager in admin [afbeelding 3]
File manager in WordPress admin
Afbeelding 3. de filemanager
Stap 3: Navigeer door de bestanden standaard “wp-content” > plugins (of themes afhankelijk waar de fout zat) Stap 4: Klik de map aan / selecteer en klik op het ‘X’ icoon om te verwijderen [Afbeelding 4] of druk rechtermuisknop op de map en druk ‘delete’.
Map verwijderen
Afbeelding 4. Map verwijderen
Stap 5: Bevestig het verwijderen. [afbeelding5]
Bevestig verwijderen van map
Afbeelding 5. Bevestig verwijderen van doelmap
Nu kan je de plugin weer normaal downloaden en werkt het weer zoals bedoelt. Dit is de meest eenvoudige manier om te doen, echter zijn er ook andere mogelijkheden.

Map verwijderen via FTP

Ook kan je de plugin verwijderen of de naam veranderen via FTP. Onze FTP uitleg kan je hier vinden. Dit gaat via je hosting pakket en kan vrij gemakkelijk gaan, echter moet je wel weten wat je doet, anders kan je het verkeerde verwijderen. Ook heb je de FTP login gegevens nodig van je hostingprovider. Stap 1: Maak verbinding met je hosting pakket In ons voorbeeld maken we gebruik van FileZilla.
inloggen op FTP met Filezilla
inloggen op FTP met Filezilla
Stap 2: Navigeer naar de WordPress ‘root’ In dit voorbeeld staat het in de map Files, andere plekken waar je het vaak kan vinden is in public_html, www, http_docs of soms in het mapje met de domeinnaam zelf. Maak je geen zorgen, je kan gewoon door de mapjes heen klikken om te zoeken, zolang je maar niets zomaar verandert of verwijdert kan dit geen kwaad. Stap 3: Selecteer de wp-content map Wanneer je in de map zit zoals in onderstaande afbeelding met oa. de wp-content, wp-admin en wp-includes mappen dan zit je goed. Navigeer vervolgens naar de wp-content map.
filezilla in de WordPress root / installatie map
Basis inhoud van de WordPress root / installatie map
Stap 4: Selecteer de plugin map Vervolgens klik je door naar de plugins map, of de themes map afhankelijk wat je aan het installeren was op het moment dat de “installatie mislukt: Doelmap bestaat al” melding zich voordoet.
filezilla in de wp-content map
filezilla in de wp-content map, navigeer vervolgens naar de plugins of themes map
Stap 5: Zoek de plugin in kwestie. Deze map kan je vervolgens verwijderen of de naam aanpassen zodat dit niet meer overeenkomt met de ‘doelmap’ De map verwijderen doe je door er met de rechtermuisknop op te klikken of op delete te drukken van je toetsenbord.
filezilla plugin map verwijderen
Verwijder de plugin map die de doelmap bestaat al foutmelding gaf.
Stap 6: Download & installeer de plugin opnieuw. Deze zal nu geen foutmelding meer geven.

Map verwijderen via DirectAdmin

Een veelgebruikte beheer paneel is DirectAdmin. DirectAdmin heeft zelf een bestandsbeheer tool waar je zonder plugin of FTP programma de desbetreffende map kan verwijderen. Qua navigeren door de mappen is dit zeer vergelijkbaar met de voorgaande opties. Stap 1: Druk op Files → Domains → selecteer de domeinnaam waar het om gaat → public_html of private_html → wp-content map → Plugins map.
filemanager knop in DirectAdmin
bestandbeheer van DirectaAmin kan je hier vinden
Stap 2: Zoek de desbetreffende plugin map op en vink deze aan.
DirectAdmin map aanklikken en verwijderen
DirectAdmin map aanklikken en verwijderen
Stap 3: Rechts onderin kan je op de delete knop drukken → OK Vergelijkbare beheerpanels zijn CPanel en Plesk. Die werken vergelijkbaar, enkel zien de knoppen er wat anders uit en kunnen die benamingen wat afwijken. Verder is het qua principe hetzelfde. In de filemanager de juiste map opzoeken en deze verwijderen zodat de ‘doelmap’ niet meer bestaat. Zo krijg je dan ook niet meer de “Installatie mislukt: Doelmap bestaat al” melding. Mocht je er aan de hand van deze uitleg niet uitkomen kan je contact met ons opnemen. Het maken van backups en het fixen van dit soort problemen is inbegrepen bij onze WordPress onderhoudspakketten

Afhaal optie met tijdslot voor WordPress & WooCommerce

Tijdens de persconferentie werd er aangekondigd dat vanaf 10 februari klanten vooraf/online bestelde producten mogen afhalen bij de winkels.
Wel met de voorwaarden dat men niet naar binnen gaat, er minimaal 4 uur zit tussen bestellen en het afhalen én dat men enkel op kan halen in een toegewezen of afgesproken tijdsslot.

Vanuit de expertise die we hebben in WordPress en WooCommerce webshops zullen we een dergelijk systeem zo snel en eenvoudig opzetten tegen zo laag mogelijke kosten.

Wanneer je al een WooCommerce webshop hebt ben je behoorlijk in het voordeel, je kan dan eigenlijk direct naar de laatste stap springen.

Een van de problemen waar je mogelijk wel mee blijft zitten is het afhandelen van de betalingen. Ik verwacht dat dit nog wel te overzien is, minister-president Rutte gaf aan dat er ook telefonisch besteld zou kunnen worden, dat suggereert dat betalen bij ophalen een optie is wanneer je een mobiel pinapparaat hebt (of nog snel regelt). Anders zijn voor zolang als het nodig is betaalverzoeken via de bank of Tikkie ook nog een optie, al vergt dat wat meer arbeid.

Het eenvoudigste is om online iDeal betalingen te accepteren wanneer je klant de bestelling plaatst. Dit kan je laten afhandelen en integreren met een Payment Service Provider als Mollie (gratis account 0,30€ per transactie). Het nadeel hiervan is wel dat je daar na je account aanmaken, deze nog geverifieerd moet worden, dat kan een paar dagen of misschien wel langer duren afhankelijk van hoeveel nieuwe mensen zich daar melden. Kostbare tijd waar je niet op wilt wachten.

Er zijn een aantal punten die niet behandeld worden, omdat dit niet direct noodzakelijk is of buiten de scope van deze eenvoudige click & collect webshop vallen.

We behandelen het volgende niet

  • De website mooi maken met thema’s / grafisch vormgeving
  • Verzendmethode’s en printen van adres labels (het gaat immers om afhalen)
  • Koppeling met boekhoud systeem
  • Koppeling met je voorraad beheer

Mogelijkheid tot afhalen bestelling in WooCommerce

Voor de optie om klanten hun bestelling af te laten halen maken we in dit voorbeeld gebruik van de PI WooCommerce order date time and type **plugin. Deze plugin heeft in de gratis versie nét voldoende opties om aan de regels te voldoen. Zo kunnen we een begin en eind tijd van de dag aangeven voor het afhalen, aangeven dat er tussen bestellen en pick-up 4 uur moet zitten en de klanten zelf een tijdslot laten kiezen.
In de betaalde versie die $34 per jaar kost kan je ook een limiet per tijdvak aangeven en het standaard tijdvak van 15 minuten aanpassen, daar is op dit moment niets over vermeld bij de regels door de Rijksoverheid

Een andere plugin die je hiervoor kunt gebruiken is Local Pickup Plus verkocht via WooCommerce.com, die is met $79,- en zonder gratis versie iets prijziger.
Deze plugin geeft meer opties om te integreren met een bestaande webshop om ook op product niveau ophalen toe te staan of juist niet.

Anyways, we gaan allereerst onder Plugins > Nieuwe plugin

Plugins, sub optie Nieuwe plugin
Nieuwe plugin toeven

Zoeken naar “PI WooCommerce order date time and type
Deze plugin installeren en activeren we.

Weergave van de PI WooCommerce order date time and type plugin in het overzicht van wordpress.org draagt de naam: order date, order pickup, order date time, pickup location, delivery date for woocommerce
Zoals PI WooCommerce order date time and type in de resultaten naar voren komt

In het admin menu onder “WooCommerce” komt nu een extra sub-menu item te staan genaamd “Date & Time”. Klik daar op, laat je niet afschrikken door de felle kleuren, ze willen je erg graag de pro versie verkopen ????

In de afbeelding heeft alles wat enkel beschikbaar is in de pro-versie een rode laag, en kan genegeerd worden.
De belangrijk punten zijn 1 t/m 6 genummerd, lees de tekst onder de afbeelding goed, de instellingen zoals op de afbeelding zijn niet de juiste.

opties van de pickup plugin
opties 1 tm 6

  1. Hier kan je aangeven of je enkel pick-up (afhalen) wilt toestaan, enkel delivery (bezorgen) of beide. Kies je voor beide dan komt er boven de afreken pagina een balk te staan met 2 knoppen zoals in de afbeelding hier onder.
    weergave in checkout wanneer bezorgen en afhalen beide actief zijn
    Weergave wanneer bezorgen én afhalen beide actief zijn

    Let wel op dat bij de bezorg optie ook nog een datum en tijd selectie is! Heb je al een normale webshop dan kan je beter de Local Pickup Plus plugin gebruiken, dan blijven je normale verzend-opties behouden naast het afhalen!

  2. Delivery type label, deze kan er waarschijnlijk wel uit, de tekst is in het Engels en kan je niet eenvoudig aanpassen. Daarnaast is de tekst op de knoppen zelf al wel duidelijk toch?
  3. Enable Delivery date and time moet op Yes, anders kunnen je klanten geen tijdslot kiezen en krijgen ze die ook niet toegewezen.
  4. Preorder days, maximum in de gratis versie is 10. Dit is het aantal dagen in de toekomst dat gekozen kan worden voor het ophalen.
  5. Order Preparation days, het minimum vanuit de overheid is 4 uur, je kan echter ook kiezen dat er een dag tussen moet zitten, dan kan je hier een 1 invoeren.
    Wanneer je het aantal dagen op 0 zet verschijnt optie 6
  6. Order Preparation minutes, verschijnt wanneer het aantal dagen in punt 5 op 0 staat. Vier uren hebben gezamenlijk 240 minuten dus dat kunnen we hier invullen. Dit kan natuurlijk ook meer zijn als je dat wilt.

De volgende punten zijn iets minder spannend maar gaan vooral over de weergave.

vervolg van de instellingen
vervolg opties 7 tm 11

  1. Pickup label – De tekst in de knop voor ‘Afhalen’
  2. Delivery label – De tekst in de knop voor ‘Bezorgen’
  3. Default Delivery Type – Pickup (afhalen) dat is immers waar we ons op richten, maar voel je vrij om dit op verzenden (delivery) in te stellen.
  4. Time Format – Standaard is AM/PM, ik weet niet hoe het met jou zit maar ik blijf dat verwarrend vinden, met mij waarschijnlijk nog heeeeel wat Nederlanders, instellen op de 24HR klok is het handigste.
  5. Hier kan je de kleuren selecteren van de knoppen en tekst zoals die bij punt 1 in de afbeelding staan.

Vervolgens even verder naar beneden scrollen om alle instellingen op te slaan.
Dan kunnen we daarna door naar het tabje “Time setting”

tijd instellingen voor afhaal
openingstijden instellen voor afhalen

Als je zowel pickup als delivery aan hebt staan heb je hier 4 invoervelden.
staat enkel pickup aan dan heb je er maar 2.
Het invoeren van verschillende tijden per dag is enkel mogelijk in de betaalde versie.

in de afbeelding staat het ophalen op 10:00 AM, tien uur in de ochtend,
tot en met 06:00 PM, zes uur in de avond.

De ‘pro’ tabjes kunnen we vervolgens overslaan en dan is “Date setting” aan de beurt!

instelling voor dagen om af te halen.
aangeven op welke dagen afhalen mogelijk is

Hier kan je aangeven op welke dagen bestellingen bezorgd / afgehaald kunnen worden.
Meerdere dagen selecteren in de lijsten kan door op het toetsenbord de CTRL toets (CMD op Apple) ingedrukt te houden en vervolgens meerdere dagen aan te klikken.

In het volgende tabblad “Pickup Locations” kunnen we het afhaal adres invoeren.

ophaal locatie invoeren
Ophaal / winkel locatie

Misschien is de <br/> je al opgevallen, hiermee kan je het adres over 2 regels knippen voor de bezoeker.
Wanneer je meerdere locaties hebt kan je in de gratis versie er 2 toevoegen, in de betaalde versie onbeperkt.
Bij 1 afhaal locatie is het verleidelijk om dit eerste vlak leeg te laten, dan krijgt men de knop in het bestel proces niet te zien zoals in de afbeelding hier onder.

weergave in checkout
weergave in checkout

Het nadeel is dat het adres dan ook niet mee wordt gezonden in de bevestigingsmail richting je klant.

bestelling details in de mail ophaal / pickup locatie, datum en tijd
Hoe de bestelling details in de bevestigingsmail komen te staan

Daarnaast heeft deze plugin ook nog een “Order Calendar for WooCommerce” waarvan eigenlijk alleen de betaalde $25/jaar versie handig is in deze situatie.

Bij de betaalde versie is namelijk zichtbaar welke bestellingen op welke dag & tijdsslot vallen.
Iets wat bij Local Pickup Plus wel standaard aanwezig is, wanneer je verwacht veel volume te gaan draaien kan dat een betere keus zijn. Maar die $79 die je bespaart kan je natuurlijk ook eerst in een kleine promotie campagne steken.