Hoe maak je een WordPress Staging Site met hPanel, een plug-in en een subdomein?

WordPress websites hebben een groot voordeel: je kunt een staging omgeving opzetten om wijzigingen en updates te testen voordat ze live gaan. Met behulp van een kopie van je website kun je veilig experimenteren met verschillende ontwerpen, plug-ins en inhoud zonder de gebruikerservaring te verstoren.

In deze WordPress tutorial bespreken we drie manieren om een staging omgeving te maken: met Hostinger’s ingebouwde staging tool, een staging plug-in en een subdomein website kloon. We geven ook tips over het gebruik en verwijderen van de staging omgeving nadat je je website hebt bijgewerkt.

Voor wie nieuw is met testomgevingen, leggen we aan het einde van het artikel uit hoe ze de prestaties en gebruikerservaring van je huidige website verbeteren.

Een WordPress staging omgeving opzetten

Welke methode je ook kiest, onthoud dat het publiceren van de staging inhoud de bestanden en databases van je originele website vervangt. Het is een goed idee om altijd een back-up van je volledige WordPress website te maken, voordat je staging wijzigingen doorvoert om mogelijk gegevensverlies te voorkomen.

Hostinger gebruikers kunnen back-ups maken en beheren in hPanel via Bestanden → Back-ups. Als je webhost geen back-up functie biedt, kun je ook back-up plug-ins gebruiken om je gegevens te beschermen.

Hoe maak je een WordPress staging omgeving met behulp van Hostinger’s Staging Tool?

WordPress Business- en cloud hosting gebruikers bij Hostinger kunnen staging websites maken via hPanel, het dashboard van hun hosting account. Deze methode is ideaal voor beginners, omdat er geen extra tools nodig zijn.

1. De staging website opzetten

Laten we beginnen met het maken van een testomgeving op Hostinger’s hPanel:

1. Navigeer naar WordPress → Staging vanuit het configuratiescherm van je hosting.

2. Selecteer op het tabblad Staging de knop Staging maken.

3. Voer de subdomeinnaam voor de staging website in en klik op Aanmaken.

4. Het kopiëren kan tot 15 minuten duren, afhankelijk van de grootte van je live omgeving. Klik op de knop Sluiten om het bevestigingsbericht weg te klikken.
5. Ga naar beneden naar de lijst met staging omgevingen en klik je op Beheer staging naast de nieuw gemaakte omgeving.

6. Zorg ervoor dat je in het staging dashboard het Staging Admin Panel selecteert om toegang te krijgen tot het WordPress admin gedeelte en begin met het maken van de wijzigingen.

2. Het doorvoeren van de wijzigingen op de productielocatie

Nadat je alle nodige wijzigingen hebt aangebracht, volg je deze stappen om ze door te voeren op de live website:

1. Klik in de lijst met staging websites op het pictogram met de drie puntjes naast de staging website en kies Publiceren.

2. Lees de disclaimer en klik op Publiceren om te bevestigen. Het kan tot ongeveer 15 minuten duren voordat het proces is voltooid.

3. Onze WordPress staging tool maakt automatisch een back-up van je hele WordPress website. Klik op het pictogram met de drie puntjes en klik op Terugkeren om, indien nodig, terug te gaan naar de versie vóór de staging.

Een WordPress Staging omgeving maken met de WP Staging plug-in

Als hostingproviders geen staging functie bieden, kun je eenvoudig een WordPress staging website maken met een plug-in. Er zijn veel staging plug-ins beschikbaar die het werk als website eigenaar een stuk makkelijker maken.

In het volgende gedeelte gebruiken we de gratis versie van WP Staging, een van de populairste WordPress plug-ins voor het stroomlijnen van staging en back-ups. Het pushen van wijzigingen naar de live website is echter een Pro-functie. Als je die wilt, kun je de betaalde versie (het premium plan) van WP Staging aanschaffen vanaf $8,08/maand.

Na het installeren en activeren van de plug-in, volg je deze stappen om een staging site te maken:

1. Ga naar het tabblad WP Staging in je WordPress-dashboard en klik op de knop Staging Site maken.

2. Voer de naam van de staging site in om een aangepaste URL te maken. In dit geval zou de URL van de staging site bijvoorbeeld https://domein.tld/staging kunnen zijn.

3. De WordPress staging plug-in werkt als een duplicator en kopieert automatisch de gegevens van je live website naar de staging omgeving. Vouw de Database Tabellen en Bestanden uit om specifieke items te selecteren voor duplicatie, wat het staging proces eenvoudiger maakt. Als je dat niet wilt, kun je ook de standaardinstellingen gebruiken.

4. Selecteer Start Cloning en wacht een paar minuten totdat het proces is voltooid.
5. Zodra het kopieerproces succesvol is, ontvang je een bevestigingsbericht met de URL van de staging omgeving. Klik op Sluiten om het bericht te sluiten.

6. Ga terug naar WP Staging → Staging Sites en selecteer Acties → Openen om toegang te krijgen tot de staging omgeving met je beheerdersgegevens.

Hoe maak je handmatig een WordPress Staging omgeving met behulp van een subdomein?

De handmatige methode vereist meer technische expertise en tijd dan het gebruik van een staging tool. Het biedt echter volledige controle over de staging, waardoor je aangepaste codes of complexe website setups kunt testen binnen een op maat gemaakte omgeving die de live website weerspiegelt.

Deze handleiding laat zien hoe je handmatig een WordPress staging website kunt maken met Hostinger Bestandsbeheer.

1. Het subdomein aanmaken

Het opzetten van een WordPress staging website in een subdomein zal de veiligheid meer waarborgen, omdat het gescheiden is van de productie website. De implementatie? Zo doe je dat:

1. Ga naar Domeinen → Subdomeinen in het hPanel dashboard.

2. Voer de naam van het subdomein in. Deze stap maakt een nieuwe map in de public_html map. Je kunt ook de optie Aangepaste map voor subdomein aanvinken om een nieuwe subdomeinmap met een aangepaste naam te maken. Klik op Creëren.

3. Het nieuwe subdomein zal verschijnen in de Lijst van huidige subdomeinen.

2. Website bestanden kopiëren

De volgende stap is om het nieuwe subdomein te vullen met de bestanden van je WordPress website. Je kunt de bestanden van de live website kopiëren met de bestandsbeheerder van je hostingprovider of met een FTP client zoals FileZilla.

Volg deze stappen om de live website bestanden te dupliceren met Hostinger Bestandsbeheer:

1. Ga naar Bestanden → Bestandsbeheer in hPanel en kies Toegang tot bestanden van [je live website].

2. Dubbelklik op public_html, de hoofdmap, om deze te openen.
3. Kopieer alle mappen en bestanden naar de subdomeinmap. De makkelijkste manier is door Ctrl + A te gebruiken op Windows, of Command + A op Mac, de subdomeinmap uit de selectie te halen en vervolgens op het pictogram Bestand kopiëren in de bovenste werkbalk te klikken.

3. De database kopiëren

Nadat je de WordPress bestanden hebt gekopieerd, moet je hetzelfde doen met de database.

Hier is hoe je je WordPress database dupliceert met phpMyAdmin, een veelgebruikte tool voor het beheren van MySQL databases:

1. Ga naar WordPress → Overzicht vanuit het hPanel. Open het tabblad Dashboard en controleer welke database je centrale website gebruikt.

2. Ga in hPanel naar Databases → Beheer en maak een nieuwe database aan voor je staging omgeving. Zodra dit is gelukt, zie je de database verschijnen in de Lijst met huidige MySQL databases en gebruikers.

3. Ga naar Databases → phpMyAdmin en klik op Enter phpMyAdmin naast de database van je live website.

4. Wanneer hPanel je doorstuurt naar phpMyAdmin, ga je naar het tabblad Exporteren en klik je op Go. Met de standaardinstellingen wordt de database in SQL formaat gedownload naar je computer.

5. Ga terug naar phpMyAdmin in hPanel. Selecteer deze keer Enter phpMyAdmin naast je staging database.
6. Ga in phpMyAdmin naar het tabblad Importeren en selecteer het gedownloade SQL bestand. Laat de standaardinstellingen zoals ze zijn en klik op Go.

7. Als de import is gelukt, krijg je een bevestigingsbericht te zien en verschijnen de databasetabellen in de zijbalk.

4. Het wp-config.php bestand van het subdomein configureren

Nu je een aparte database hebt voor testen, moet je deze koppelen aan je staging website in het subdomein. Dit doe je door het wp-config.php bestand aan te passen. Dit bestand is een essentieel onderdeel van je WordPress installatie en slaat de databasegegevens op.

Volg deze stappen om een nieuwe databaseverbinding in wp-config.php in te stellen:

1. Open in Bestandsbeheer public_html → staging → wp-config.php.

2. Scroll naar beneden totdat je de regel Database-instellingen – Je kunt deze informatie krijgen van je webhost vindt. Voeg de volgende code erboven toe:

define('WP_HOME','http://staging.domain.tld');

define('WP_SITEURL','http://staging.domain.tld');

Wanneer je dit hebt gedaan, vergeet niet om de placeholder staging.domain.tld te wijzigen in je staging subdomein.

3. Verander de waarden van DB_NAME, DB_USER en DB_PASSWORD zodat ze overeenkomen met de databasegegevens en inloggegevens van je staging omgeving. Klik daarna op Opslaan. 

Je kunt nu de staging omgeving gebruiken.

5. Wijzigingen op de productie site implementeren

Deze stap houdt in dat je de database en bestanden van de staging website naar de live omgeving overzet. Omdat je alleen in een lege database kunt importeren, moet je eerst de database van de live website leegmaken.

Maak een back-up van de originele database met de exportfunctie van phpMyAdmin en volg daarna deze stappen:

1. Exporteer de database van je staging website via Databases → phpMyAdmin.
2. Open de database van je live website in phpMyAdmin.
3. Ga naar het tabblad Structuur, vink onder de lijst met tabellen het vakje Alles aanvinken aan en kies Drop in het dropdown menu ernaast. Klik op Go om alle tabellen uit de database te verwijderen.

4. Importeer het databasebestand van de staging website naar de live website.

Kopieer voor je website bestanden allesbehalve wp-config.php van de staging map naar de public_html map met Bestandsbeheer.

Een staging website verwijderen

Veel WordPress gebruikers vinden het fijn om altijd een staging website klaar te hebben. Toch kan het verwijderen van een staging website na een update serverbronnen besparen en het beheer van je website makkelijker maken, omdat je je dan volledig op de live omgeving kunt richten.

Hier is een handleiding voor het verwijderen van een staging website, afhankelijk van hoe je deze hebt aangemaakt:

Een staging websitesite verwijderen in Hostinger’s Staging Tool

1. Ga in hPanel naar de lijst met staging websites en zoek de website die je wilt verwijderen.
2. Klik op het pictogram met de drie puntjes en kies Verwijderen.

3. Lees de disclaimer en selecteer Verwijderen om te bevestigen.

Een staging website verwijderen in de WP Staging plug-in

1. Ga in het WordPress admin dashboard naar WP Staging → Staging Websites en zoek de website die je niet meer gebruikt voor testen.
2. Klik op Acties → Verwijderen naast de staging website die je wilt verwijderen.
3. Ga in het WordPress admin dashboard naar WP Staging → Staging Websites en zoek de website die je niet meer gebruikt voor testen.

Klik op Acties → Verwijderen naast de staging website die je wilt verwijderen.

3. Selecteer alle staging database tabellen en bestanden die je wilt verwijderen en klik daarna op Verwijderen.

Handmatige een staging website in het subdomein verwijderen

1. Verwijder de staging map uit de public_html map via Bestandsbeheer.

2. Ga naar de Lijst van huidige MySQL-databases en gebruikers in hPanel via Databases → Beheer. Klik op het pictogram met de drie puntjes naast je staging database en kies Verwijderen. Lees de disclaimer en klik op Delete om te bevestigen.

3. Ga naar de lijst met huidige subdomeinen via Domeinen → Subdomeinen. Klik op het pictogram Verwijderen naast het staging subdomein dat je niet langer gebruikt. Lees de disclaimer en klik op Verwijderen om te bevestigen.

Handige tips voor het werken met een WordPress staging website

We delen de beste werkwijzen voor een soepel en veilig webontwikkelingsproces:

• Beperk de toegang tot je staging website. Sta alleen je IP-adres en dat van relevante teamleden toe om de staging website te beschermen tegen externe bedreigingen. Je kunt ook alle toegang blokkeren, behalve die van jou, door het command deny from all toe te voegen aan je .htaccess bestand.
• Gebruik aparte databases voor productie- en staging websites. Deze werkwijze voorkomt dat staging tests en wijzigingen invloed hebben op je live website en voorkomt per ongeluk overschrijven van gegevens of eventuele problemen tussen de twee omgevingen.
• Wis de cache voordat je aanpassingen implementeert. Omdat caching soms een verouderde versie van je website laat zien, zorgt het verwijderen ervan ervoor dat de website opnieuw wordt geladen om recente veranderingen zichtbaar te maken.
• Synchroniseer je staging en live WordPress websites regelmatig. Het uitvoeren van tests en ontwikkelingen op de huidige versie van je live website zorgt voor nauwkeurige resultaten.

WordPress staging vs lokale ontwikkelomgevingen

Staging websites en lokale ontwikkelomgevingen spelen verschillende rollen bij de ontwikkeling en het onderhoud van websites, dus het is belangrijk om de juiste te kiezen die past bij je behoeften.

In dit artikel richten we ons op staging omgevingen, die je live website dupliceren voor het veilig testen van updates in een omgeving die de live website goed nabootst. Ze zijn ideaal voor de laatste controles voordat je aanpassingen implementeert, zodat je zeker weet dat alles werkt zonder fouten of storingen.

Lokale WordPress omgevingen draaien daarentegen offline op je computer. Ze zijn het beste voor de vroege ontwikkelingsfasen, uitgebreid codeerwerk en het testen van belangrijke veranderingen zonder serverkosten of internetverbinding.

Als je een WordPress ontwikkelaar wilt worden, kan een lokale staging omgeving dienen als je oefenruimte om in de praktijk te leren. Hiermee kun je websites bouwen en testen onder verschillende omstandigheden, altijd en overal, zonder internetverbinding – wat een kosteneffectieve manier is om je vaardigheden te verbeteren.

Bekijk onze tutorial over het lokaal installeren van WordPress voor gedetailleerde methoden en stappen.

Redenen om een WordPress staging site te gebruiken

Je weet dat een WordPress staging website ontwikkeling en testen mogelijk maakt zonder de live website te beïnvloeden. Als je nog niet overtuigd bent, laten we het dan nog eens over alle voordelen hebben.

WordPress core updates

Het implementeren van WordPress core updates is cruciaal voor beveiliging, prestaties en toegang tot nieuwe functies. Deze updates kunnen alleen soms leiden tot website storingen, vooral als er compatibiliteitsproblemen zijn met verouderde plug-ins of thema’s.

Met een staging website kun je eventuele problemen of conflicten identificeren en oplossen voordat ze invloed hebben op de server van je live website. Het helpt storingen te voorkomen en de betrouwbaarheid van je website te garanderen tijdens grote updates.

Als je je WordPress versie wilt controleren, ga dan naar WordPress → Beveiliging in het hPanel. De locatie van deze informatie verschilt per webhost.

Aanpassen van WordPress ontwerp en functionaliteit

Het integreren van aangepaste code in core bestanden, thema’s of plug-ins is belangrijk voor het opschalen van een WordPress website. Als je deze wijzigingen direct op een live website uitvoert, loop je het risico op fouten of functionaliteit problemen.

Een staging website biedt een veilige omgeving om deze aanpassingen te testen en te verfijnen zonder de live website te beïnvloeden. Zo behoud je de stabiliteit van je website, terwijl je vrijuit kunt experimenteren met nieuwe functies.

Testen van plug-ins en thema’s

Door plug-ins en nieuwe thema’s te testen op een staging website, kun je veilig de impact ervan op je live website beoordelen zonder de stabiliteit in gevaar te brengen. Dit proces helpt bij het identificeren van compatibiliteitsproblemen, prestatiedalingen of visuele inconsistenties voordat ze live gaan.

Daarnaast kunnen ontwikkelaars staging websites gebruiken om nieuwe plug-ins of thema’s grondig te testen en te verfijnen, zodat fouten opgelost kunnen worden voordat ze live gaan.

Conclusie

Door een staging WordPress website te maken, kun je nieuwe functies en ontwerpen veilig testen. Deze functie bevordert innovatie en praktisch leren, maar verbetert ook je veiligheid door fouten en storingen op de live website te voorkomen.

We bespreken drie effectieve methodes voor het opzetten van je eigen WordPress staging website:

• Met Hostinger’s staging tool maak je het jezelf gemakkelijk – het is de snelste en eenvoudigste optie, want je kunt in slechts een paar klikken alles instellen, zonder dat je extra functies hoeft te installeren.
• Een WordPress plug-in gebruiken – ideaal voor gebruikers zonder staging tool op hun hosting controle panel. Verschillende staging plug-ins bieden een gratis versie met verschillende functies.
• Handmatig in een subdomein – kost meer tijd om in te stellen, maar biedt meer flexibiliteit en controle over de staging website.

We hopen dat deze tutorial je heeft geholpen om te leren hoe je een WordPress staging website kunt opzetten voor testdoeleinden. Als je nog vragen hebt, kijk dan even in de veelgestelde vragen sectie of laat hieronder een reactie achter. Veel succes!

WordPress Staging FAQ’s