WooCommerce Brands uitleg

Met de WooCommerce Brands functionaliteit kun je eenvoudig merken toevoegen aan je WooCommerce producten zonder dat je een aparte plugin hoeft te installeren. Dit helpt bij het organiseren van je producten en maakt het voor klanten gemakkelijker om producten van hun favoriete merken te vinden.

In dit artikel leggen we uit hoe je merken instelt en gebruikt binnen WooCommerce.

Wat is WooCommerce Brands?

WooCommerce Brands is sinds 2025 een standaardfunctionaliteit in WooCommerce waarmee je producten kunt indelen op basis van merken. Dit voegt een extra taxonomie toe, vergelijkbaar met categorieën en tags, waardoor klanten producten per merk kunnen filteren en bekijken.

Waarom WooCommerce Brands gebruiken?

• Verbeterde gebruikservaring → Klanten kunnen snel producten van hun favoriete merken vinden.
• SEO-voordelen → Merkenpagina’s kunnen beter scoren in zoekmachines waardoor je beter gevonden wordt op een merknaam.
• Overzichtelijke shop → Je kunt merken op verschillende manieren tonen in je webshop.

Stap 1: Merken toevoegen in WooCommerce

Je kunt merken toevoegen via het WooCommerce dashboard:

1. Ga naar: `Producten > Merken`
2. Klik op “Nieuw merk toevoegen”
3. Vul de volgende velden in:
   1. Naam → De naam van het merk (bijv. Lamper).
   2. Slug → Dit is de URL voor de merkpagina (bijv. `/merk/bohostijl`).
   3. Beschrijving → Een korte omschrijving van het merk.
   4. Afbeelding → Upload het merklogo of een afbeelding die bij het merk past.
4. Klik op “Toevoegen” om het merk op te slaan.

Nu is het merk beschikbaar in WooCommerce en kan het worden gekoppeld aan producten.

Stap 2: Merken koppelen aan producten

Om een merk aan een product toe te wijzen:

1. Ga naar: `Producten > Alle producten`
2. Klik op een bestaand product of voeg een nieuw product toe.
3. In de rechterzijbalk vind je de sectie Merken.
4. Selecteer een bestaand merk of voeg een nieuw merk toe.
5. Klik op Bijwerken om de wijzigingen op te slaan.

Het merk wordt nu weergegeven op de productpagina.

Stap 3: Merkenpagina’s en filters instellen

1. Automatische merkenpagina’s
   WooCommerce maakt automatisch een overzichtspagina per merk. Je kunt deze pagina’s vinden onder:
   `https://jouwwebsite.nl/merk/naam-van-het-merk`
   Wil je een overzichtspagina met alle merken?
   Voeg dan de WooCommerce Brands shortcode toe aan een pagina: [product_brand]
2. Merken tonen in het menu
   Wil je merken in het hoofdmenu tonen?
   1. Ga naar Weergave > Menu’s.
   2. Voeg een aangepaste link toe met de URL van het merk.
   3. Sla het menu op.
3. Merkenfilter toevoegen
   Om klanten te laten filteren op merk:
   1. Ga naar Weergave > Widgets.
   2. Zoek de widget WooCommerce Product Brands Filter.
   3. Sleep deze naar een zijbalk of footer.

Klanten kunnen nu filteren op merk.

Met WooCommerce Brands kun je eenvoudig merken toevoegen en beheren binnen WooCommerce. Dit helpt bij het verbeteren van de navigatie, klantbeleving en SEO. Heb je nog vragen of wil je hulp bij het instellen? Neem contact op met Lamper Design!

Wat is Cache Warmer?

De Cache Warmer plugin van TMM Technology helpt bij het versnellen van je WordPress website door het vooraf laden van de cache. Dit betekent dat pagina’s al ingeladen zijn voordat een bezoeker ze opent, waardoor je website sneller reageert en de gebruikerservaring verbetert.

Voordelen van Cache Warmer

• Snellere laadtijden: Pagina’s worden vooraf geladen, wat zorgt voor een directe weergave bij bezoekers.
• Betere SEO-prestaties: Snellere websites scoren beter in zoekmachines zoals Google.
• Efficiënter cachebeheer: Zorgt ervoor dat je caching-plugin altijd up-to-date en effectief blijft.
• Volledige automatisering: Geen handmatige acties nodig; de plugin werkt continu op de achtergrond.

Belangrijkste functies

• Automatisch cache opbouwen na publicatie of wijziging van content.
• Ondersteuning voor sitemaps en berichten om efficiënt alle pagina’s te warmen.
• Instelbare snelheid en frequentie voor het benaderen van pagina’s.
• Mogelijkheid om bepaalde pagina’s uit te sluiten via regels of regex.
• Grafiek en statistieken in het WordPress-dashboard om prestaties bij te houden.

Cache Warmer

Installatie en gebruik

• Download en installeer de plugin vanuit de officiële WordPress plugin bibliotheek.
• Activeer de plugin en stel de opties in via het WordPress dashboard.
• Voeg sitemaps of specifieke pagina’s toe om vooraf geladen te worden.
• Pas instellingen aan zoals snelheid, time-outs en welke assets moeten worden opgewarmd.

Een plugin als Cache Warmer is vooral nuttig voor websites of webshops met caching, waar je snelle prestaties wilt garanderen, zelfs direct na een cache-vernieuwing. Dit helpt vooral bij SEO, gebruikservaring en het optimaliseren van laadtijden op minder actieve of internationale websites.

Heb je vragen over het gebruik van Cache Warmer of wil je advies over de beste caching-instellingen voor jouw website? Neem gerust contact met ons op!

Een snelle website is essentieel voor een goede gebruikerservaring en betere posities in zoekmachines zoals Google. Google PageSpeed Insights (PSI) is een gratis tool waarmee je de snelheid en prestaties van je website kunt testen en optimaliseren.

In dit artikel leggen we uit hoe je Google PageSpeed Insights gebruikt, wat de verschillende scores betekenen en hoe je jouw website sneller kunt maken.

Wat is Google PageSpeed Insights?

Google PageSpeed Insights is een tool van Google die de prestaties van je website meet op zowel desktop als mobiele apparaten. De tool analyseert je pagina en geeft aanbevelingen om de laadtijd te verbeteren.

Je kunt de tool hier vinden: Google PageSpeed Insights

Stap 1: Website-analyse uitvoeren

Het uitvoeren van een snelheidstest met PageSpeed Insights is eenvoudig:

1. Ga naar de PageSpeed Insights website.
2. Voer de URL van je website in en klik op “Analyseren”.
3. Wacht een paar seconden terwijl Google de resultaten genereert.

   

Stap 2: De resultaten begrijpen

Google PageSpeed Insights geeft een score tussen 0 en 100, verdeeld over mobiel en desktop:

De scores en de betekenis hiervan:

🟥 0 – 49 > Langzaam – Optimalisatie nodig
🟡 50 – 89 > Gemiddeld – Verbeteringen mogelijk
🟢 90 – 100 > Goed – Je website is snel

Daarnaast toont Google vier belangrijke meetpunten (Core Web Vitals) die van invloed zijn op de gebruikerservaring:

1. Largest Contentful Paint (LCP)

• Meet hoe lang het duurt voordat het grootste zichtbare element op de pagina is geladen.
• Streef naar een LCP van minder dan 2,5 seconden.

2. First Input Delay (FID)

• Meet hoe snel de website reageert op een interactie, zoals klikken op een knop.
• Een FID onder 100 ms is ideaal.

3. Cumulative Layout Shift (CLS)

• Meet visuele verschuivingen tijdens het laden van de pagina.
• Streef naar een CLS-score onder 0,1.

4. Total Blocking Time (TBT)

• Meet de totale tijd dat de website niet reageert tijdens het laden.
• Hoe lager, hoe beter.

Stap 3: Jouw website optimaliseren

Google PageSpeed Insights geeft aanbevelingen om de prestaties van je website te verbeteren. Hieronder bespreken we de meest voorkomende problemen en oplossingen.

1. Afbeeldingen optimaliseren

• Gebruik gecomprimeerde afbeeldingen (bijv. WebP in plaats van PNG/JPG).
• Schaal afbeeldingen naar de juiste afmetingen.
• Gebruik lazy loading zodat afbeeldingen pas laden wanneer ze in beeld komen.

2. Browsercaching inschakelen

• Zorg ervoor dat statische bestanden (zoals CSS, JavaScript en afbeeldingen) worden gecachet.
• Dit kan via een caching-plugin zoals WP Rocket of W3 Total Cache in WordPress.

3. JavaScript en CSS verkleinen

• Verklein en combineer CSS- en JavaScript-bestanden om het aantal verzoeken te verminderen.
• Gebruik defer of async voor JavaScript-bestanden zodat ze later laden.

4. Serverrespons verbeteren

• Gebruik een snelle hostingprovider zoals bijvoorbeeld Kinsta.
  – Maak gebruik van een Content Delivery Network (CDN) zoals Cloudflare of BunnyCDN.
  – Verminder het aantal plugins in WordPress.

5. Overbodige code verwijderen

• Verwijder ongebruikte CSS en JavaScript-bestanden.
• Schakel render-blocking scripts uit met WP Rocket of Autoptimize.

Stap 4: Test je website opnieuw

Na het doorvoeren van verbeteringen kun je opnieuw testen met Google PageSpeed Insights om te zien of je score is verbeterd. Het kan ook enkele dagen duren voordat Google de nieuwe laadsnelheid opmerkt.

Met Google PageSpeed Insights kun je jouw website optimaliseren voor snelheid en prestaties. Dit zorgt voor een betere gebruikerservaring en kan helpen bij hogere rankings in Google.

Wil je professionele hulp bij het verbeteren van je websitesnelheid? Neem contact op met Lamper Design!

Een cronjob is een geplande taak op Unix-achtige systemen die op specifieke tijden of intervallen wordt uitgevoerd. Het is essentieel om de timing van deze taken correct te configureren om ervoor te zorgen dat ze op de gewenste momenten worden uitgevoerd.

Cron Syntax

De timing van een cronjob wordt bepaald door een reeks van vijf velden in de crontab (cron-tabel), die elk een specifiek tijdsaspect vertegenwoordigen:

Minuut (0 – 59)
Uur (0 – 23)
Dag van de maand (1 – 31)
Maand (1 – 12)
Dag van de week (0 – 7, waarbij zowel 0 als 7 voor zondag staan)

Een typische crontab-regel ziet er als volgt uit:

30 2 * * 1 /pad/naar/uw/script.sh

In dit voorbeeld wordt het script /pad/naar/uw/script.sh elke maandag om 02:30 uur uitgevoerd.

Gebruik van Crontab.guru

Het interpreteren en valideren van cron-expressies kan complex zijn. Gelukkig biedt Crontab.guru een intuïtieve interface om cron-expressies te analyseren en te verifiëren.

Stappen om een cron-expressie te controleren:

• Navigeren naar Crontab.guru: Ga naar https://crontab.guru/.
• Voer de cron-expressie in: Typ of plak de betreffende cron-expressie in het invoerveld bovenaan de pagina.
• Resultaat bekijken: Direct onder het invoerveld geeft Crontab.guru een menselijke leesbare uitleg van de ingevoerde expressie.

Voorbeeld:
Als u de expressie 30 2 * * 1 invoert, zal Crontab.guru aangeven:

At 02:30 on Monday.

Dit bevestigt dat de taak elke maandag om 02:30 uur wordt uitgevoerd.

Wil je de Global Styles van je GeneratePress thema overzetten naar een andere website? In dit artikel leggen we je de twee benodigde stappen uit met behulp van de standaard WordPress export en import functie.

Stap 1: Exporteer de Global Styles uit WordPress

1. Ga naar de WordPress admin van de bronwebsite
   Log in op de website waarvan je de Global Styles wilt exporteren.

2. Navigeer naar de WordPress Export Tool
   Ga naar Gereedschap (Tools) > Exporteren.

3. Selecteer “Alle inhoud” of alleen “Stijlen”
   Kies “Alle inhoud” om alles te exporteren (inclusief berichten, pagina’s en Global Styles).
   Wil je alleen de Global Styles, selecteer dan de optie “Stijlen” (Styles), indien beschikbaar.

4. Download het .XML-bestand
   Klik op “Exportbestand downloaden”, en bewaar het .XML-bestand op je computer.

Stap 2: Importeer de Global Styles op de nieuwe website

1. Ga naar de WordPress admin van de doelwebsite
   Log in op de website waar je de Global Styles wilt importeren.

2. Navigeer naar de WordPress Import Tool
   Ga naar Gereedschap (Tools) > Importeren.

3. Kies “WordPress” en installeer de importeerfunctie
   Als dit nog niet is geïnstalleerd, klik op “Nu installeren” en vervolgens op “Importeur uitvoeren”.

4. Upload het .XML-bestand
   Klik op “Bestand kiezen”, selecteer het eerder gedownloade .XML-bestand en klik op “Bestand uploaden en importeren”.

5. Controleer de instellingen en importeer
   Zorg ervoor dat de juiste gebruiker is geselecteerd om de stijlen toe te wijzen.
   Vink de optie aan om media mee te importeren (optioneel).
   Klik op “Importeren starten”.

Stap 3: Controleer en pas de stijlen aan

1. Ga naar Weergave > Editor (Full Site Editor).
2. Controleer of de Global Styles correct zijn overgezet.
3. Pas eventueel handmatig stijlen aan via de GeneratePress instellingen.

Wil je weten hoe groot een afbeelding is die je op een WordPress website wilt vervangen? Dan geven wij je graag de uitleg hiervoor.

1. Open de Developer Tools in Chrome browser
   • Klik met de rechtermuisknop op de afbeelding en kies “Inspecteren” (of “Inspect” als je Chrome in het Engels gebruikt).
   • Of gebruik de sneltoets: F12 of Ctrl + Shift + I (Windows) / Cmd + Option + I (Mac).
2. Bekijk de afbeeldingseigenschappen
   • In het Elements-paneel zie je de HTML-code. De geselecteerde <img>-tag toont de afbeelding.
   • Beweeg met de muis over de <img>-tag, en een kleine tooltip verschijnt met de afmetingen in pixels.
3. Bekijk gedetailleerde informatie
   • Klik op het tabblad Computed (rechts in Developer Tools).
   • Scroll naar beneden en zoek “Natural Size” of “Rendered Size” om de originele en weergegeven afmetingen te zien.

Zo weet je precies hoe groot een afbeelding is en hoe deze wordt weergegeven op je site!

Pop-ups kunnen een effectieve manier zijn om de aandacht van je bezoekers te trekken. Met de gratis WordPress-plugin Boxzilla kun je eenvoudige pop-ups maken zonder dat je code hoeft te schrijven.

In dit artikel laten we je stap voor stap zien hoe je een pop-up instelt en aanpast. Als je meer opties wilt zoals een koppeling met WooCommerce of Google Analytics dan bieden ze hiervoor een aantal premium add-ons die je kunt kopen.

Stap 1: Installeer en activeer Boxzilla

Om te beginnen moet je de WordPress plugin Boxzilla installeren en activeren in je WordPress website:

1. Log in op je WordPress-dashboard.
2. Ga naar Plugins > Nieuwe plugin.
3. Zoek naar “Boxzilla“.
4. Klik op Nu installeren en vervolgens op Activeren.

Je vindt de instellingen van Boxzilla nu in het menu onder Boxzilla.

Stap 2: Maak een nieuwe pop-up

Zodra de plugin is geïnstalleerd, kun je een nieuwe pop-up maken:

1. Ga in het WordPress dashboard naar Boxzilla > Nieuwe Box.
2. Geef de pop-up een titel (dit is alleen zichtbaar in de back-end).
3. Voeg de inhoud toe die je in de pop-up wilt tonen. Dit kan tekst, een afbeelding of een formulier zijn.

Optioneel: Een inschrijfformulier toevoegen
Wil je een e-mailinschrijfformulier toevoegen? Gebruik dan een shortcode van bijvoorbeeld Mailchimp, Contact Form 7 of Gravity Forms.

Stap 3: Instellen wanneer de pop-up verschijnt

Bij het tabblad Weergave kun je bepalen hoe en wanneer de pop-up wordt weergegeven:

• Trigger op scrollpercentage → De pop-up verschijnt als de bezoeker een bepaald percentage van de pagina heeft gescrolld.
• Trigger op tijdsduur → De pop-up verschijnt na een aantal seconden.
• Trigger op exit intent → De pop-up wordt getoond wanneer een bezoeker de pagina dreigt te verlaten.
• Klik-trigger → De pop-up wordt alleen weergegeven als een bezoeker op een specifieke knop of link klikt.

Je kunt deze instellingen combineren om een effectieve pop-up te maken.

Stap 4: De stijl en positie aanpassen

Bij het tabblad Weergave-opties kun je de pop-up visueel aanpassen:

• Breedte en hoogte instellen (in pixels of procenten)
• Positie op de pagina (bijvoorbeeld midden, rechtsboven of linksonder)
• Achtergrondkleur en rand aanpassen om de pop-up aan te passen aan je website-design

Tip: Gebruik je een custom CSS-stijl? Voeg dan extra stijlen toe via Weergave > Customizer > Extra CSS.

Stap 5: De pop-up activeren en testen

Als je tevreden bent met je instellingen:

1. Klik op Publiceren om de pop-up live te zetten.
2. Test de pop-up door je website in een incognito venster te openen.
3. Pas de instellingen aan als dat nodig is.

Wil je de pop-up tijdelijk uitschakelen? Zet dan de status van de Box op Concept.

Wat is Full Site Editing?

Full Site Editing (FSE) is een grote verandering in WordPress. Sinds de introductie van versie WordPress 5.9 stelt FSE gebruikers in staat om niet alleen pagina’s en berichten te beheren, maar ook de volledige structuur en lay-out van hun website aan te passen. Dit bevat onder andere onderdelen zoals de header, footer, zijbalken en zelfs de templates voor specifieke inhoud als een webshop of foodblog, allemaal met behulp van de visuele Block Editor (Gutenberg).

Het doel van FSE is om WordPress websitebeheer toegankelijker en flexibeler te maken. Gebruikers hebben nu de mogelijkheid om de volledige look-and-feel van hun website te personaliseren zonder kennis van bijvoorbeeld PHP of CSS-code. Dit maakt FSE ideaal voor ondernemers, creatieve professionals en ontwikkelaars die efficiënt willen werken.

Kenmerken van Full Site Editing

1. Visuele Site Editor

De Site Editor (te vinden onder ‘Weergave > Editor’) vervangt de traditionele Customizer en stelt gebruikers in staat om direct aanpassingen te maken aan de gehele website. In deze editor kun je onder andere;

• Navigatiemenu’s configureren en aanpassen.
• Headers en footers ontwerpen met dynamische inhoud, zoals social media-icoontjes of contactinformatie.
• Elementen zoals recente berichten, zoekvelden en categorieën eenvoudig toevoegen.

Met de visuele benadering van Full Site Editing zie je real-time hoe je wijzigingen eruitzien op de website. Hieronder zie je hiervan een voorbeeld.

2. Block-gebaseerde thema’s

FSE werkt met block-gebaseerde thema’s, ook wel bekend als ‘Block Themes‘. Deze thema’s zijn ontworpen om volledig samen te werken met de WordPress Block Editor, wat betekent dat elk onderdeel van de website of webshop kan worden opgebouwd met blokken. Enkele populaire block-thema’s zijn ‘Twenty Twenty-Four’ en ‘Twenty Twenty-Five’. Als je iets meer wilt zou je gebruik kunnen maken van bijvoorbeeld het Kadence thema.

Het gebruik van block-thema’s biedt maximale flexibiliteit omdat je niet langer afhankelijk bent van vooraf bepaalde lay-outs of stijlen waar oudere thema’s vaak in vastlopen.

3. Templates en template parts

Met FSE in WordPress kun je zowel hele templates als gedeelde onderdelen, zoals headers en footers, beheren:

• Templates: Deze definieer je voor specifieke pagina’s of berichttypen, zoals de homepage, berichtenoverzicht of een specifieke categoriepagina voor artikelen of producten.
• Template Parts: Dit zijn herbruikbare onderdelen, zoals een header of footer, die op meerdere pagina’s consistent worden weergegeven.

Bijvoorbeeld, voor een website die gericht is op interieurrestyling, kan een unieke template worden gemaakt voor de portfolio-pagina, terwijl de rest van de site een meer algemene opmaak behoudt.

4. Globale stijlen

De Globale Stijlen functionaliteit maakt het mogelijk om consistentie te waarborgen in je gehele website. Je kunt in één keer;

• Kleuren instellen voor achtergronden, knoppen en tekst.
• Lettertypes en typografie aanpassen voor titels, paragrafen en links.
• Afstanden (zoals marges en padding) uniform toepassen.

Met deze instelling kun je de merkidentiteit van je website eenvoudig versterken, zonder elke pagina handmatig te hoeven aanpassen.

Waarom kiezen voor Full Site Editing?

De overstap naar FSE in WordPress biedt aanzienlijke voordelen:

1. Creatieve vrijheid: Geen beperkingen meer van een vast thema. Alles is aanpasbaar.
2. Efficiënt beheer: Door het gebruik van blokken en globale stijlen kun je snel en eenvoudig wijzigingen doorvoeren.
3. Lagere kosten: Minder afhankelijkheid van externe ontwikkelaars voor kleine aanpassingen.
4. Toekomstgericht: FSE is een kernonderdeel van de nieuwe WordPress-standaard en blijft relevant met toekomstige updates.

Uitdagingen en beperkingen

Hoewel FSE veel te bieden heeft, zijn er ook enkele overwegingen:

1. Compatibiliteit: Niet alle bestaande thema’s en plugins ondersteunen FSE. Alleen block-gebaseerde thema’s bieden volledige functionaliteit.
2. Leercurve: Gebruikers die gewend zijn aan de klassieke Customizer moeten wennen aan de nieuwe workflow.
3. Technische uitdagingen: Voor geavanceerde aanpassingen kan enige kennis van CSS of HTML nog steeds nuttig zijn.

Voor bedrijven of gebruikers die overstappen naar FSE is het belangrijk om een goede basis te leggen met een thema dat compatibel is, en om tijd te investeren in het leren van de nieuwe editor.

Hoe begin je met Full Site Editing?

1. Kies een block gebaseerd thema:
   Selecteer een block-thema dat FSE ondersteunt. De gratis WordPress thema’s zoals Twenty Twenty-Five bieden een goede start.
2. Ga aan de slag met de Site Editor:
   Ga naar ‘Weergave > Editor’ in je WordPress dashboard en maak kennis met de mogelijkheden. Begin bijvoorbeeld met het aanpassen van de header en footer.
3. Creëer en bewerk templates:
   Stel unieke templates in voor belangrijke pagina’s, zoals de homepage of archiefpagina’s.
4. Werk met globale stijlen:
   Pas kleuren, typografie en afstanden toe voor een consistente uitstraling.
5. Test je website:
   Controleer hoe de wijzigingen eruitzien op verschillende apparaten en schermformaten om de gebruikerservaring te optimaliseren.

Bij het ontwikkelen en testen van WordPress-websites is een staging omgeving essentieel om goed te kunnen ontwikkelen en bijvoorbeeld debuggen als je problemen hebt. Een staging omgeving biedt een veilige plek om wijzigingen door te voeren en nieuwe functionaliteiten te testen zonder de live website te verstoren.

Soms is het nodig of handig om bepaalde delen van de stagingomgeving door te verwijzen naar de live website, bijvoorbeeld mediabestanden die al op de live site staan. Ook kun je dit inzetten bij website die veel data hebben. Waarom zou je constant die data heen en weer verhuizen naar je staging omgeving als je dit kunt voorkomen met deze simpele redirect van de uploads folder?

Als je de onderstaande regel in je .htaccess bestand plaatst hoef je nooit meer de uploads folder naar je staging website over te zetten.

# Apache .htaccess
RedirectMatch 301 ^/wp-content/uploads/(.*) https://livewebsite.com/wp-content/uploads/$1

Als je gebruik maakt van hosting die NGINX gebruikt in plaats van Apache (zoals bijvoorbeeld Kinsta) dan kun je deze regels toevoegen in de NGINX configuratie:

# Nginx
location ~ ^/wp-content/uploads/(.*) {
rewrite ^/wp-content/uploads/(.*)$ https://livewebsite.com/wp-content/uploads/$1 redirect;
}

Bij beide opties moet je natuurlijk de juiste live locaties opgeven.

Wat doet deze redirect in een staging omgeving?

Deze regel zorgt ervoor dat alle mediabestanden (zoals afbeeldingen, PDF’s of video’s) op de staging omgeving niet lokaal worden geladen, maar direct van de live website komen. Dit kan handig zijn wanneer:

1. Mediabestanden niet worden gekopieerd naar de stagingomgeving om schijfruimte te besparen;
2. Je de staging omgeving wilt gebruiken zonder een exacte kopie van de uploads-map te hoeven maken
3. Je wijzigingen wilt testen zonder dubbele opslag van mediabestanden;

Als een gebruiker op de stagingomgeving naar een afbeelding verwijst, zoals /wp-content/uploads/image.jpg, wordt deze via een permanente 301 redirect doorverwezen naar http://livewebsite.com/wp-content/uploads/image.jpg.

Wil je weten of het werkt? In de bron zie je nog steeds de ‘normale’ staging url’s bij de images staan. Als je in de Chrome developer console kijkt zie je bij de images een 302 redirect bij de status staan. Als je dit ziet dan weet je dat jouw instellingen goed ingesteld staan.

Voordelen van een 301 redirect op de uploads folder

Een belangrijke reden om deze 301 redirect te gebruiken is efficiëntie. Het kost veel minder tijd en serverruimte, omdat je niet alle mediabestanden hoeft te dupliceren naar de staging omgeving. Bovendien is het eenvoudiger om een staging omgeving snel op te zetten als je alleen de noodzakelijke onderdelen (zoals WordPress thema’s, plugins en databases) kopieert.

Daarnaast zorgt de permanente redirect (301) ervoor dat zoekmachines en browsers begrijpen dat de stagingomgeving niet de primaire bron van deze bestanden is. Dit voorkomt verwarring over duplicate content mocht je per ongeluk vergeten om het vinkje in de instellingen aan te zetten waarmee je Google vraagt om de website niet te indexeren.

Nadelen van deze oplossing

Hoewel deze aanpak veel voordelen biedt, zijn er ook enkele punten om rekening mee te houden:

• Externe afhankelijkheid: Als de live website om wat voor reden dan ook offline is, kunnen de mediabestanden op de stagingomgeving niet worden geladen. Wat ons betreft geen probleem aangezien je prioriteit dan toch bij de live website ligt om die weer online te krijgen.
• Beveiliging: Zorg ervoor dat je stagingomgeving niet publiek toegankelijk is. Gebruik een wachtwoordbeveiliging of IP-whitelisting om te voorkomen dat zoekmachines of bezoekers onbedoeld toegang krijgen.

Om deze redirectregel toe te passen, voeg je de regel toe aan het .htaccess-bestand in de root van je staging omgeving. Zorg ervoor dat de staging omgeving goed gescheiden is van de live website om fouten of conflicten te voorkomen. Een typische situatie waarin je deze setup gebruikt, is bij het testen van aanpassingen in je thema of plugins. Als je bijvoorbeeld werkt aan een nieuwe lay-out of functionaliteit en je afbeeldingen vanuit de live website laadt, kun je volledig focussen op het testen zonder onnodige vertragingen.

Het gebruik van een RedirectMatch 301 op een staging omgeving is een slimme en efficiënte manier om mediabestanden van de live site te gebruiken. Het maakt je staging lichter en sneller, terwijl je toch toegang hebt tot alle nodige mediabestanden. Door deze aanpak goed te implementeren, kun je tijd besparen en tegelijkertijd consistentie garanderen tussen je staging- en liveomgeving.

Mocht je twijfelen over hoe je deze redirect moet instellen of wil je hulp bij het optimaliseren van je stagingomgeving? Neem gerust contact met ons op. Wij helpen je graag verder!