WordPress categorie

Wat is een WordPress categorie?

Een categorie in WordPress is een manier om gerelateerde berichten (posts) te groeperen. Categorieën helpen om inhoud op een georganiseerde en gestructureerde manier te presenteren, waardoor zowel bezoekers als zoekmachines gemakkelijker door je site kunnen navigeren.

Categorieën zijn een van de ingebouwde taxonomieën van WordPress, wat betekent dat ze een kernonderdeel zijn van hoe WordPress inhoud beoordeelt en groepeert.

Waarom categorieën gebruiken?

Categorieën zijn nuttig omdat ze bezoekers helpen om snel relevante inhoud te vinden. Stel dat je een blog hebt over technologie, je zou categorieën kunnen maken zoals “Gadgets”, “Software”, en “Hardware”.

Als een bezoeker geïnteresseerd is in gadgets, kan hij of zij eenvoudig alle berichten binnen die categorie bekijken. Bovendien helpt het gebruik van categorieën zoekmachines om te begrijpen waar je inhoud over gaat, wat je SEO ten goede kan komen.

Categorie in WordPress maken

Het aanmaken van een nieuwe categorie in een WordPress website is eenvoudig. Ga naar het dashboard, navigeer naar “Berichten” en vervolgens naar “Categorieën”.

Hier kun je een nieuwe categorie toevoegen door een naam, slug en optionele beschrijving in te vullen.

Zodra de categorie is aangemaakt, kun je deze toewijzen aan berichten wanneer je ze publiceert of bewerkt.

Categorieën

Met categorieën kun je verschillende dingen doen om je inhoud beter te presenteren en te organiseren:

Toon categorieën in je menu om bezoekers een eenvoudige manier te bieden om door je site te navigeren.
Gebruik een categorie-widget in de zijbalk om een lijst van categorieën weer te geven.
Maak categorie-gebaseerde landingspagina’s om gerichte inhoud te tonen.
Stel een “categorie” als voorpagina in voor blogs die op een specifiek onderwerp willen focussen.

Sticky met CSS

een veelgebruikte techniek in WordPress webdesign, stelt elementen in staat om tijdens het scrollen op een specifieke plaats in de viewport te blijven. Dit effect wordt bereikt door de CSS-eigenschap position: sticky; toe te passen op een element. Denk bijvoorbeeld aan een sidebar die in beeld blijft staan bij het scrollen van een artikel of een winkelmandje wat tijdens het afrekenen in beeld blijft bij het scrollen van alle velden in de checkout.

CSS Position sticky

Wanneer een element als sticky wordt gemarkeerd, gedraagt het zich als een normaal element totdat het de rand van zijn container of de viewport bereikt. Op dat moment ‘plakt’ het element vast op de plaats die is ingesteld met de top, right, bottom, of left eigenschappen. Dit zorgt ervoor dat het element zichtbaar blijft terwijl de gebruiker door de rest van de inhoud scrolt.

Een veelvoorkomend gebruik van sticky positionering is bijvoorbeeld voor navigatiemenu’s of zijbalken, die toegankelijk blijven terwijl de gebruiker door een lange pagina scrolt. Een ander voorbeeld is het vastzetten van een koptekst in een tabel, zodat deze zichtbaar blijft terwijl door tabelrijen wordt gescrold.

Tips voor Sticky CSS

Het is belangrijk om te onthouden dat position: sticky alleen werkt wanneer het element binnen een container valt die groter is dan het element zelf. Bovendien moet er voldoende ruimte zijn in de viewport om het element te kunnen vastzetten. Als een element bijvoorbeeld een top waarde heeft van 10px, dan zal het element 10px van de bovenkant van de viewport vastgeplakt worden.

Een ander aandachtspunt is de browserondersteuning. Hoewel de meeste moderne browsers sticky positionering ondersteunen, kunnen er verschillen zijn in de manier waarop dit wordt geïmplementeerd. Het is daarom aan te raden om de CSS fallbacks te gebruiken voor oudere browsers die deze eigenschap niet ondersteunen.

In de praktijk kan de implementatie van sticky positionering in CSS er als volgt uitzien:

#mijnStickyElement {
   position: -webkit-sticky; /* Voor Safari */
   position: sticky;
   top: 0;
}

In dit voorbeeld blijft het element met het ID mijnStickyElement aan de bovenkant van de viewport ‘plakken’ zodra het tijdens het scrollen die positie bereikt.

Sticky positionering in CSS biedt WordPress agencies een krachtige tool om dynamische, gebruikersvriendelijke interfaces te creëren. Het is een eenvoudige maar effectieve manier om belangrijke elementen binnen het zicht en bereik van de gebruiker te houden, wat bijdraagt aan een betere gebruikerservaring.

Het wissen van de CDN-cache is een goed eerste stappenplan voor probleemoplossing als je discrepanties ziet aan de voorkant van je site. Bijvoorbeeld, als je enkele wijzigingen aanbrengt in je CSS, maar deze wijzigingen niet aan de voorkant ziet, kan het oude CSS-bestand in de cache staan. Het wissen van de CDN-cache is een van de eerste dingen om te proberen in je probleemoplossingsproces.

CDN cache wissen via het WordPress dashboard

Als je ingelogd bent in je WordPress dashboard heb je rechts bovenin de zwarte menubalk die je ziet een optie Clear Caches. Bij hover verschijnt hier een submenu en kun je kiezen om alle caches of alleen de CDN cache te legen.

CDN cache wissen in MyKinsta

In MyKinsta kun je de server-, CDN- en Edge-cache wissen voor een of meerdere sites, inclusief staging-sites, tegelijk vanaf de WordPress Sites-pagina. Dit wist ook de Redis-objectcache als je de Redis-addon aan je site hebt toegevoegd.

Selecteer de selectievakjes naast de site(s) waarvoor je de cache wilt wissen, klik op Acties en kies Cache wissen.

Mochten niet alle problemen vanuit Kinsta opgelost zijn dan is vaak het legen van de Chrome browsercache ook nog een goede aanvulling op deze acties.

Wat is FunnelKit?

FunnelKit is een krachtige tool voor WooCommerce webshops waarmee je eenvoudig verkoopfunnels, checkouts, upsells en cross-sells kunt creëren. Het helpt om jou als webshop eigenaar de klantreis te optimaliseren en de conversies te verhogen. Laten we eens kijken wat je allemaal kunt doen met FunnelKit en hoe het jouw webshop kan helpen.

Verkoopfunnels maken

Met FunnelKit kun je moeiteloos verkoopfunnels maken. Een verkoopfunnel is een reeks stappen die een klant doorloopt, van het bekijken van een product tot het voltooien van een aankoop. FunnelKit biedt kant-en-klare templates waarmee je deze stappen kunt instellen.

Bijvoorbeeld, je kunt een funnel maken die begint met een landingspagina, gevolgd door een productpagina, een checkout en een bevestigingspagina. Dit helpt om de klant te begeleiden en de kans op een aankoop te vergroten.

Aangepaste checkouts creëren

Een goede checkout ervaring is cruciaal voor het succes van je webshop. FunnelKit maakt het mogelijk om aangepaste checkout-pagina’s te creëren die zijn afgestemd op jouw merk en klantbehoeften. Deels kun je hiervoor hun uitgebreid getest templates gebruiken of volledig zelf samenstellen.

Je kunt bijvoorbeeld velden toevoegen, verwijderen of herordenen, evenals aantrekkelijke elementen zoals getuigenissen of productinformatie toevoegen. Dit helpt om de checkout-ervaring te verbeteren en de kans op verlaten winkelwagentjes te verminderen.

Upsells en Cross-sells aanbieden

FunnelKit biedt ook krachtige upsell– en cross-sell-functies. Een upsell is wanneer je de klant aanmoedigt om een duurder product te kopen, terwijl een cross-sell is wanneer je aanvullende producten aanbeveelt.

Bijvoorbeeld, als iemand een smartphone koopt, kun je een bijpassend telefoonhoesje als cross-sell aanbieden. Dit helpt om de gemiddelde bestelwaarde te verhogen en klanten meer waarde te bieden.

Marketing automatiseringen inzetten

Met FunnelKit kun je ook geautomatiseerde marketingcampagnes opzetten. Dit kan bijvoorbeeld zijn het verzenden van e-mails om verlaten winkelwagentjes te herstellen, klanten te verwelkomen, of promoties aan te bieden. Deze automatiseringen helpen om klanten betrokken te houden en terugkerende aankopen te stimuleren.

Veel van onze klanten gebruiken gratis deze plugin als ze via ons WordPress onderhoud afnemen. En wij zien dat er met name door de geoptimaliseerde checkout meer conversies behaald worden.

Wat is een slug in WordPress?

Een “slug” in een WordPress website is het deel van een URL dat verwijst naar een specifieke post, pagina, categorie, of tag op je website. Het is meestal een korte, beschrijvende tekst die volgt op je domeinnaam en fungeert als een unieke identifier voor die specifieke inhoud. Bijvoorbeeld, in de URL “https://example.com/over-ons” is “over-ons” de slug.

Zijn slugs belangrijk?

Slugs zijn belangrijk omdat ze bijdragen aan zowel de gebruikerservaring als de zoekmachineoptimalisatie (SEO) van je website. Een duidelijke en relevante slug helpt bezoekers om te begrijpen waar de pagina over gaat voordat ze erop klikken.

Zoekmachines zoals Google kunnen de WordPress slugs gebruiken om te bepalen waar je pagina over gaat, wat invloed kan hebben op de ranking van je pagina in de zoekresultaten.

Wat is een goede slug?

Een goede slug is kort, beschrijvend en bevat relevante trefwoorden. Het is het beste om koppeltekens te gebruiken om woorden te scheiden, omdat dit helpt om de leesbaarheid en indexeerbaarheid te verbeteren. Vermijd het gebruik van speciale tekens, cijfers of onnodig lange teksten in je slugs. Bijvoorbeeld, voor een blogpost over “De voordelen van SEO” zou een goede slug “voordelen-seo” zijn.

Slugs aanpassen in WordPress

Het aanpassen van slugs in WordPress is eenvoudig. Wanneer je een nieuwe post of pagina maakt, kun je de slug bewerken door op de “Bewerk” knop naast de URL onder de titel te klikken.

Voor bestaande inhoud, ga je naar de post- of paginabewerker, klik je op “Snel bewerken” en pas je de slug aan in het veld “Slug”. Vergeet niet om je wijzigingen op te slaan.

Het kan zijn dat in jouw taal in WordPress er geen slug staat maar permalinks. Dat is hetzelfde.

Slugs in permalink structuren

Slugs zijn ook een belangrijk onderdeel van de permalink structuur van je website. Je kunt de algemene structuur van je permalinks aanpassen door naar Instellingen > Permalinks te gaan in je WordPress dashboard.

Het is gebruikelijk om een structuur te kiezen die de titel van de post of pagina (de slug) in de URL opneemt, zoals “/%postname%/”.

Met de RankMath plugin kun je permalinks nog verder optimaliseren. Standaard staat er bijvoorbeeld /product-category/ tussen bij WooCommerce webshops. Dit kun je automatisch eruit filteren met Rankmath.

WordPress async JavaScript?

“Async” is een attribuut dat je kunt toevoegen aan een script-element in HTML om de laadtijd van een WordPress website te optimaliseren. Het woord “async” staat voor “asynchroon”, wat betekent dat het script onafhankelijk van de rest van de pagina wordt geladen. Dit kan helpen om de prestaties van je website te verbeteren, vooral als je meerdere JavaScript-bestanden hebt die moeten worden geladen.

Waarom async gebruiken?

Het gebruik van het “async” attribuut is handig omdat het de browser toestaat om het JavaScript-bestand te laden terwijl de rest van de pagina doorgaat met laden. Hierdoor kan je website sneller worden weergegeven voor bezoekers, wat de gebruikerservaring verbetert. Dit is vooral nuttig voor scripts die niet direct invloed hebben op de inhoud van de pagina, zoals analytics-scripts of andere externe scripts.

Het gebruik van “async” is eenvoudig. Je hoeft alleen maar het attribuut toe te voegen aan het script-element in je HTML-bestand. Bijvoorbeeld:

<script src="example.js" async></script>

Dit vertelt de browser om het script asynchroon te laden, wat betekent dat het niet zal blokkeren of wachten op andere scripts of onderdelen van de pagina.

Async versus Defer

Naast “async” is er ook een attribuut genaamd “defer” dat je kunt gebruiken om de laadtijd van scripts te optimaliseren. Het verschil tussen de twee is dat “async” het script onmiddellijk laadt terwijl de pagina wordt geladen, wat betekent dat het kan worden uitgevoerd zodra het is gedownload.

“Defer” daarentegen wacht tot de volledige HTML-pagina is geladen voordat het script wordt uitgevoerd. De keuze tussen de twee hangt af van de volgorde en het type scripts dat je gebruikt.

Gebruik van async met plugins

Veel WordPress-plugins, zoals WP Rocket en W3 Total Cache, bieden de mogelijkheid om automatisch “async” toe te voegen aan je scripts. Dit kan handig zijn als je niet handmatig elk script wilt aanpassen. Deze plugins hebben instellingen die je eenvoudig kunt inschakelen om de asynchrone laadtijd te optimaliseren.

Het gebruik van “async” bij het laden van JavaScript-bestanden is een effectieve manier om de prestaties van je website te verbeteren. Door asynchrone scripts te laden, kunnen je bezoekers sneller de inhoud van je website zien, wat hun ervaring verbetert.

Wat is defer JavaScript en CSS?

Bij het laden van een WordPress website is “defer” een term die verwijst naar een attribuut dat je kunt toevoegen aan een script-element in HTML. Dit attribuut vertelt de browser om het JavaScript-bestand uit te stellen tot nadat de volledige HTML-pagina is geladen. Dit kan helpen om de laadtijd van je website te verbeteren en ervoor te zorgen dat de gebruiker sneller de inhoud ziet.

Waarom defer gebruiken?

Als je meerdere JavaScript-bestanden hebt die op een pagina moeten worden geladen, kan het gebruik van “defer” ervoor zorgen dat de belangrijkste inhoud van de pagina eerst wordt weergegeven, terwijl de scripts op de achtergrond worden geladen. Dit is vooral nuttig voor het verbeteren van de gebruikservaring, omdat bezoekers dan sneller de inhoud kunnen zien en met de pagina kunnen interageren, zelfs als er nog JavaScript-bestanden worden geladen.

Hoe gebruik je defer?

Het gebruik van “defer” is eenvoudig. Je hoeft alleen maar het attribuut toe te voegen aan het script-element in je HTML-bestand. Bijvoorbeeld:

<script src="example.js" defer></script>

Door dit attribuut toe te voegen, vertel je de browser om het script uit te stellen tot de pagina volledig is geladen.

Automatisch Defer Gebruiken met Cache Plugins

Het gebruik van “defer” kan handmatig worden ingesteld, maar gelukkig zijn er verschillende cache-plugins die dit proces automatisch kunnen uitvoeren voor je WordPress website. Laten we eens kijken naar twee populaire plugins, WP Rocket en W3 Total Cache, en hoe zij het gebruik van “defer” eenvoudig maken.

WP Rocket

WP Rocket is een populaire premium cache-plugin voor WordPress die tal van optimalisaties biedt, waaronder het uitstellen van JavaScript. Om “defer” in te schakelen, volg je de onderstaande stappen:

Log in op je WordPress dashboard en ga naar “Instellingen” > “WP Rocket”.
Navigeer naar het tabblad “File Optimization”.
Scroll naar beneden naar het gedeelte “JavaScript Files” en vink het vakje aan naast “Load JavaScript deferred”.
Klik op “Save Changes”.

WP Rocket zorgt er nu voor dat je JavaScript-bestanden worden uitgesteld, wat helpt om de prestaties van je website te verbeteren.

W3 Total Cache

W3 Total Cache is een andere populaire cache-plugin voor WordPress. Om “defer” in te schakelen, kun je het volgende doen:

Log in op je WordPress dashboard en ga naar “Performance” > “General Settings”.
Scroll naar beneden naar “Minify Settings” en schakel “Enable” in.
Klik op “Save Settings & Purge Caches”.
Ga vervolgens naar “Performance” > “Minify”.
Scroll naar “JS” en selecteer “Defer” onder “Operation in Areas”.
Klik op “Save Settings & Purge Caches”.

Hiermee stel je de JavaScript-bestanden uit, waardoor de laadtijd van je website wordt verbeterd.

Door gebruik te maken van cache-plugins zoals WP Rocket of W3 Total Cache, kun je eenvoudig het “defer”-attribuut toevoegen aan je JavaScript-bestanden zonder dit handmatig te hoeven doen.

Defer versus async

Naast “defer” is er ook een attribuut genaamd “async” dat je kunt gebruiken om de laadtijd van scripts te optimaliseren. Het verschil tussen de twee is dat “async” de scripts onmiddellijk laadt terwijl de pagina wordt geladen, wat kan leiden tot onverwacht gedrag als de scripts van elkaar afhankelijk zijn. “Defer” daarentegen zorgt ervoor dat de scripts worden uitgevoerd in de volgorde waarin ze op de pagina staan, wat betrouwbaarder is als de scripts afhankelijk van elkaar zijn.

Het gebruik van “defer” bij het laden van JavaScript-bestanden is een eenvoudige manier om de prestaties van je WordPress website of je WooCommerce webshop te verbeteren. Door het uitstellen van het laden van scripts, kunnen je bezoekers sneller de inhoud van je website zien en wordt hun ervaring verbeterd.

Het toevoegen van een CSS class aan een menu-item in een WordPress website kan handig zijn voor het opmaken en stylen van specifieke menu-items. Bijvoorbeeld, je kunt de laatste menu-item omvormen tot een call-to-action (CTA) knop om het beter te laten opvallen.

Waarom Custom CSS toevoegen?

CSS classes geven je de flexibiliteit om individuele menu-items aan te passen zonder dat dit invloed heeft op andere delen van het menu. Dit is vooral nuttig wanneer je een bepaald item wilt onderscheiden, zoals een CTA-knop die gebruikers aanzet tot actie. Een duidelijke, aantrekkelijke CTA-knop kan de aandacht van je bezoekers trekken en de betrokkenheid verhogen.

CSS class toevoegen aan een menu item in WordPress

Ga naar het menu: Log in op je WordPress-dashboard en ga naar “Weergave” > “Menu’s”.
Menu-instellingen: Klik op het menu waaraan je de CSS class wilt toevoegen.
Scherminstellingen: Bovenaan de pagina vind je de “Schermopties“. Klik hierop en zorg ervoor dat de optie “CSS classes” is aangevinkt. Hierdoor wordt een veld voor CSS classes zichtbaar bij de menu-items.
CSS class toevoegen: Scroll naar het menu-item waaraan je de CSS class wilt toevoegen en klik erop om de instellingen uit te vouwen. Je ziet nu een veld genaamd “CSS classes (optioneel)”. Voeg hier de gewenste class toe, bijvoorbeeld “cta-knop”.
Menu opslaan: Klik op “Menu opslaan” om je wijzigingen toe te passen.

CSS class stijlen

Nu je de CSS class hebt toegevoegd, kun je deze stylen. Voeg jouw eigen CSS-code toe aan je WordPress thema of aan de extra CSS-sectie in de Customizer:

Schema, of gestructureerde gegevens, via de Rank Math WordPress plugin is een krachtige SEO-functie die helpt bij het verbeteren van de manier waarop zoekmachines je website begrijpen en weergeven in de zoekresultaten.

Rank Math Schema markup

Schema markup is een vorm van microdata die toegevoegd wordt aan de HTML van je website, waardoor zoekmachines de inhoud van je pagina’s beter kunnen interpreteren en indexeren. Denk bijvoorbeeld aan de beoordelingen die getoond worden in Google of de prijs van de producten uit jouw WooCommerce webshop die direct in de zoekresultaten zichtbaar zijn. Dit zijn allemaal onderdelen die met Schema toegevoegd worden, op de pagina staat code die uitgelezen en geïnterpreteerd wordt door Google.

Schema markup helpt zoekmachines om de informatie op je WordPress pagina’s beter te begrijpen en weer te geven in de zoekresultaten. Rank Math maakt dit proces eenvoudig door vooraf gedefinieerde schema’s aan te bieden die je kunt toepassen op je inhoud.

Schema markup in Rank Math

Een van de belangrijkste functies van Rank Math Schema markup is het verbeteren van hoe je pagina’s worden weergegeven in de zoekresultaten. Door schema markup toe te voegen, kun je bijvoorbeeld sterbeoordelingen, evenementen, recepten en andere rijke informatie aan je resultaten toevoegen. Dit kan je zoekresultaten visueel aantrekkelijker maken en de kans vergroten dat gebruikers erop klikken.

Rank Math Schema markup helpt zoekmachines om de context van je inhoud beter te begrijpen. Als je bijvoorbeeld een productreview schrijft, kun je een “Review” schema toepassen om duidelijk te maken dat de pagina een review is. Dit helpt niet alleen bij de weergave van sterbeoordelingen, maar helpt ook zoekmachines om relevante zoekopdrachten aan je pagina te koppelen.

Rich Snippets met Rank Math

Rank Math maakt het toevoegen van schema markup eenvoudig, zelfs voor mensen die minder bekend zijn met technische aspecten van SEO. De WordPress plug-in biedt een intuïtieve gebruikersinterface waarmee je eenvoudig schema’s kunt toevoegen, aanpassen en beheren. Hierdoor hoef je geen uitgebreide technische kennis te hebben om te profiteren van de voordelen van schema markup.

Door gebruik te maken van de Schema-functionaliteiten in Rank Math, kun je jouw SEO-inspanningen aanzienlijk verbeteren en ervoor zorgen dat je content effectiever wordt weergegeven en geïndexeerd door zoekmachines. Dit kan leiden tot betere zichtbaarheid, hogere rankings en uiteindelijk meer verkeer naar je website.

Als je meer wilt weten dan verwijzen we je graag naar de kennisbank van Rank Math zelf, zij hebben een compleet artikel over Schema markup geschreven.