Hoe maak je een staging-omgeving voor een WordPress-site

Naarmate WordPress-beginners vooruitgang boeken in hun carrière, groeit hun site ook. Bij het uitvoeren van stabiele en professionele websites is het niet de beste optie om alles live te bewerken. Verschillende van onze gebruikers vroegen ons om een ​​zelfstudie waarin het proces van het maken van een staging-omgeving wordt uitgelegd. In dit artikel laten we u zien hoe u een staging-omgeving voor uw WordPress-site kunt maken.

Notitie: Dit artikel is meer geschikt voor gebruikers die willen overstappen van WordPress-ontwikkeling op beginnersniveau naar een beetje meer geavanceerde ontwikkeling. Dit artikel helpt je bij het coderen van koeien en leert de beste werkwijze. Dit is wat je aan het einde van dit artikel gaat leren.

• Een staging-site maken
• Git en BitBucket gebruiken
• Veranderingen van lokale server naar BitBucket duwen
• Het implementeren van wijzigingen van BitBucket naar Staging-site

Wat is een Staging-omgeving?

Om aan een WordPress-site te werken, raden we onze gebruikers aan om WordPress lokaal op hun Windows- of Mac-computers te installeren. Als u eenmaal tevreden en tevreden bent met uw website, kunt u deze uploaden van localhost naar live server.

Er is één probleem met deze aanpak. Wat als iets dat werkte op uw localhost niet werkt op de live server? Dit zou fouten veroorzaken die een probleem kunnen vormen voor gevestigde sites omdat dit van invloed kan zijn op rankings van zoekmachines, verkoop, eerste indruk op gebruikers, enz.

In plaats van uw wijzigingen in de live site te uploaden, kunt u ze uploaden naar een tijdelijke site op dezelfde server. Een staging-site is een afzonderlijk ontwikkelgebied op uw site (meestal een subdomein) met beperkte toegang. Hier kunt u uw wijzigingen testen of gebruiken voor al uw ontwikkeling. Nadat u uw site grondig hebt getest, kunt u deze uploaden naar uw live site.

Als u een beginner bent en niet wilt weten wat het gecompliceerde proces is dat in het onderstaande artikel wordt beschreven, raden we u aan een beheerde WordPress-hostingprovider zoals WPEngine te selecteren die ingebouwde staging-functionaliteit biedt. Onze vrienden op SiteGround bieden ook de stageringsfunctionaliteit in hun grow-geek-plan, dat veel betaalbaarder is.

Opstellingsomgeving instellen met cPanel

Het eerste wat u hoeft te doen is om een ​​subdomein te maken op uw hoofddomein. Een subdomein stelt u in staat om uw website in een aparte map te draaien, zonder uw hoofddatabase, bestanden of uploads te beïnvloeden.

Log hiertoe in op uw cPanel (andere configuratieschermen zullen vergelijkbaar zijn, zoeken naar domeinen of subdomeinen), Onder de domeinen secties, moet u op Subdomeinen klikken.

Voer in het volgende scherm de naam in die u voor uw subdomein wilt gebruiken (meestal regie of dev) en kies vervolgens uw hoofddomein in het vervolgkeuzemenu.

In cPanel moet dit automatisch het Document root tekstvak met een locatie op basis van de naam van uw subdomein. Je kunt dit veranderen als je wilt, maar meestal is de standaard in orde (public_html / staging).

Nu hoeft u alleen maar te klikken creëren als je klaar bent. Dit moet bevestigen en het subdomein in de onderstaande tabel weergeven.

U kunt controleren of uw subdomein is ingesteld door het in uw webbrowser te bezoeken. Het zou iets gelijkaardigs moeten tonen als dit:

Nu moet u een afzonderlijk FTP-account maken voor uw staging-omgeving. Een speciaal FTP-account heeft alleen toegang tot uw staging-map om onbedoelde wijzigingen in uw liveomgeving te voorkomen.

Ga in cPanel naar de FTP-account sectie. Vul de velden in de FTP-account toevoegen sectie.

De directory moet overeenkomen met de map die u hebt opgegeven bij het maken van uw subdomein. Klik Maak een FTP-account om uw nieuwe account aan te maken. Dit account heeft alleen toegang tot de map die u hebt opgegeven en niet de volledige server.

Gegevens kopiëren van Live Site naar Staging-omgeving

Nu u uw subdomein hebt ingesteld, is de volgende stap om de gegevens van uw live site naar uw staging-site te kopiëren. Hiermee kunt u wijzigingen in uw staging-omgeving testen met dezelfde gegevens zonder uw live-site te beïnvloeden.

De eenvoudigste manier om dit te doen is door phpMyAdmin. Inloggen phpMyAdmin via cPanel, en selecteer uw huidige live database. Nadat u uw live database hebt geselecteerd, klikt u op de Activiteiten tab in de menubalk.

Hier moet je naar zoeken Database kopiëren naar doos. Voer in het tekstvak de naam in van uw tijdelijke database (als u die nog niet hebt gemaakt, controleert u dit CREËER DATABASE vóór het kopiëren is aangevinkt en geef het een naam zoals example_staging). U moet zowel de structuur als de gegevens kopiëren en ervoor zorgen dat u de overige instellingen als standaard gebruikt. Klik Gaan om de kopie uit te voeren. Vergeet niet dat voor grotere databases dit enige tijd kan duren.

Nadat uw database is gekopieerd, moet u deze selecteren in de zijbalk aan de linkerkant. phpMyAdmin opent nu uw nieuw gekopieerde database. U moet klikken op SQL tab in de menubalk van phpMyAdmin.

Nu zullen we alle referenties van onze live site vervangen door de staging-site om ervoor te zorgen dat alles goed werkt wanneer we deze database gebruiken voor enscenering. Om dat te doen, moet u de volgende SQL-query's uitvoeren.

 UPDATE wp_options SET option_value = REPLACE (option_value, 'ORIGINAL_URL', 'NEW_URL'); UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'ORIGINAL_URL', 'NEW_URL'); UPDATE wp_posts SET guid = REPLACE (guid, 'ORIGINAL_URL', 'NEW_URL'); UPDATE wp_posts SET post_content = REPLACE (post_content, 'ORIGINAL_URL', 'NEW_URL'); 

Voer de bovenstaande query's in het SQL-queryvak in en vervang de volgende waarden:

• ORIGINAL_URL - uw originele site-URL, bijvoorbeeld http://example.com. U kunt dit vinden in uw WordPress Admin onder Instellingen> Algemeen> WordPress Adres (URL)
• NEW_URL - voer uw nieuwe URL in, deze is die van uw eerder gemaakte staging-site (zorg ervoor dat u http: // - bijv. Http://staging.example.com) opneemt
• wp_ - Als uw website een aangepast voorvoegsel heeft in databasetabellen, zorg er dan voor dat u wp_ hiermee vervangt.

Klik Gaan om de query's uit te voeren. Er verschijnt een bevestigingsbericht wanneer dit is voltooid.

Na het kopiëren van uw database, moet u uw WordPress-bestanden, plug-ins, thema's en uploads kopiëren. Download eerst een nieuw exemplaar van WordPress van WordPress.org. Upload de inhoud van WordPress naar uw staging-site. Notitie, voer de WordPress-installatie nog niet uit.

Nadat u WordPress hebt geüpload, is het volgende dat u moet kopiëren mediabestanden, plug-ins en thema's. De volgende mappen moeten worden gekopieerd:

• / Wp-content / uploads
• / Wp-content / themes
• wp-content / plugins

Als ze klein zijn, kun je ze van je live site downloaden via je FTP-client en ze uploaden naar je tijdelijke map. Voor grotere mappen kan dit echter vaak tijdrovend zijn. Met cPanel's bestandsbeheer kunt u mappen rechtstreeks op de server kopiëren, waardoor het proces veel sneller verloopt.

Log in op uw cPanel-dashboard en klik op de Bestandsbeheer onder het gedeelte Bestanden.

cPanel start de bestandsbeheerder. Je moet naar je live site's navigeren wp-content directory (meestal / public_html / wp-content) waar u uw mappen met thema's, plug-ins en uploads zou kunnen zien.

Voor elke map moet u rechtsklikken en selecteren Kopiëren. Dit opent een dialoogvenster, kies de locatie waar u de map wilt kopiëren. We willen het kopiëren naar de directory die we hebben gemaakt voor het staging-subdomein. Het is ook de map waarin u WordPress in de vorige stap hebt geüpload. / Public_html / staging / wp-content /

Hiermee wordt elke map naar uw enscenering gekopieerd wp-content directory.

U moet dit herhalen voor elk van de bovenstaande mappen (plug-ins, thema's en uploads).

Notitie: In sommige WordPress-hostingomgevingen is het misschien niet mogelijk om een ​​bestandsbeheerder te gebruiken. In dat geval moet u deze mappen handmatig downloaden naar uw computer en ze vervolgens uploaden naar de staging-site of SSH gebruiken.

Nadat u deze mappen hebt gekopieerd, bent u klaar om uw staging-installatie van te verbinden WordPress naar de database die u eerder hebt gekopieerd.

Toegang tot uw staging-site, via het subdomein dat we eerder hebben gemaakt. Als uw staging-map geen a bevat wp-config.php het dossier, WordPress zal proberen om er een aan te maken die vraagt ​​naar de details van uw databaseverbinding. Als het wel een wp-config.php-bestand heeft, zorg er dan voor dat u het bewerkt om uw nieuwe staging-databaseverbindingsdetails te gebruiken.

Een keer WordPress heeft verbinding gemaakt met uw staging-database, het zou moeten detecteren dat WordPress is geïnstalleerd en u vragen om in te loggen. Uw inloggegevens zijn hetzelfde als op uw huidige live-site.

Alle wijzigingen die u in uw staging-omgeving aanbrengt, zijn nu onafhankelijk van uw liveomgeving. Dit betekent dat u de vrijheid heeft om instellingen te wijzigen, nieuwe plug-ins te installeren, themabestanden te bewerken en meer zonder de ervaring voor uw klanten te beïnvloeden.

Configureren en problemen oplossen met uw stagingomgeving

Nadat u bent ingelogd op uw enscenering WordPress installatie, er zijn een aantal instellingen die moeten worden geconfigureerd voordat u doorgaat.

Zorg ervoor dat uw domein correct is

Kijk naar de URL van uw beheerdersscherm. Als dit uw subdomein is, heeft het de nieuwe configuratie gedetecteerd. Als dat niet het geval is, hebben de SQL-query's die eerder zijn uitgevoerd, de URL van uw site binnen de staging-database niet gewijzigd. Zoek naar de SITEURL en huis optie_namen in de tabel wp_options.

Zorg ervoor dat uw media gekopieerd zijn

Ga naar de media-sectie van je WordPress-beheer en controleer of je afbeeldingen / video's / etc. zijn in plaats. Als dat het geval is, is de uploaddirectory correct gekopieerd. Als dat niet het geval is, zorg er dan voor dat de uploaddirectory op de juiste plaats staat (normaliter / public_html / staging / wp-content / uploads).

Schakel XML-sitemaps uit in WordPress SEO

Als u WP SEO gebruikt, moet u ervoor zorgen dat de optie XML Sitemaps is uitgeschakeld. Dit helpt voorkomen dat zoekmachines uw stagingomgeving indexeren.

Beperkte sitetoegang

Om te voorkomen dat gebruikers per ongeluk uw staging-site bezoeken, moet u Beperkte sitetoegang installeren en activeren. Ga na de installatie naar Instellingen> Lezen om de plug-in te configureren.

Je wilt ook gaan in de Instellingen »Lezen sectie en zorg ervoor dat indexering van deze site door zoekmachines wordt uitgeschakeld. U wilt ervoor zorgen dat u dit doet om dubbele inhoud te voorkomen.

U kunt de hele map ook met een wachtwoord beveiligen met htpassword. De methode die in de zelfstudie wordt getoond is voor / wp-admin / maar u kunt het voor om het even welke installatiemap wijzigen.

Update Permalinks

Bezoek Instellingen> Permalinks en klik op Opslaan om ervoor te zorgen dat uw permalink-structuur up-to-date is. Als u 404-fouten op uw staging-site krijgt, is dit vaak de oorzaak.

Veranderingen van Staging vanuit GitHub of BitBucket pushen

De meeste professionele ontwikkelaars gebruiken graag een versiebeheersysteem zoals SVN of Git om hun ontwikkelingsvoortgang bij te houden. Als u een versiecontrolesysteem gebruikt, kunt u teruggaan in de tijd als er iets misgaat omdat al uw codegeschiedenis op een centrale locatie is opgeslagen. Het maakt samenwerking ook eenvoudiger omdat alle wijzigingen op een centrale locatie worden opgeslagen, ontwikkelaars hebben toegang tot alle wijzigingen die in een project zijn aangebracht.

GitHub of BitBucket, welke u moet gebruiken

Beide, GitHub en BitBucket zijn projecthostingservices en beide stellen u in staat om Git voor uw projecten te gebruiken. GitHub is populairder bij open source projectontwikkelaars en heeft een grotere gemeenschap van ontwikkelaars. Als het project waaraan u werkt een open source WordPress-plug-in of een thema is, kunt u dit op GitHub hosten. Uw project zal publiekelijk zichtbaar zijn en andere gebruikers zullen uw broncode kunnen zien. Om een ​​privé repository te creëren op GitHub zou je moeten upgraden naar hun betaalde abonnement.

Aan de andere kant kunt u met BitBucket privé-repositories gratis maken. Als u werkt op de site van een klant of uw eigen persoonlijke site, dan wilt u waarschijnlijk uw werk privé houden. BitBucket maakt het gemakkelijker voor u om dit te doen.

Aan de slag met BitBucket

Stap 1. Git installeren

Het eerste wat u hoeft te doen is Git op Windows (of Mac) downloaden en installeren.

Stap 2. Uw eerste repository maken

Nu je Git hebt geïnstalleerd, is de volgende stap om je aan te melden voor een gratis BitBucket-account. Nadat u zich hebt aangemeld, gaat u naar het BitBucket-dashboard waar u op moet klikken Maak een nieuwe repository knop.

Voer een naam en beschrijving voor uw repository in die u helpt uw ​​project te identificeren. Om uw repository privé te maken, vinkt u het selectievakje naast aan Toegangsniveau. Zorg er ten slotte voor dat Git wordt gecontroleerd als je repository type. U kunt de rest van de opties ongewijzigd laten en klikken op de knop Repository maken om door te gaan. BitBucket zal nu een lege repository voor u maken.

Omdat je gaat werken aan je lokale WordPress-installatie, klik je op Ik heb een bestaand project om op te pushen.

Stap 3. Voeg een lokale map toe aan Git

U bent helemaal klaar om uw lokale WordPress-project naar BitBucket te pushen. Start Git Bash op je computer. Ja, het is een commandoregel-tool en je zult commando's moeten typen, maar maak je geen zorgen, het is supereenvoudig.

Als u de commandoregel niet wilt gebruiken, dan kunt u GUI-interfaces zoals Github voor Windows (die ook werkt voor Bitbucket) en / of TortoiseGit gebruiken.

Eerst moet je je lokale WordPress-projectmap toevoegen als een repository in Git. Vergeet niet dat u niet uw hele WordPress-map aan het project hoeft toe te voegen. Als u aan een thema werkt, kunt u die themamap alleen als een Git-repository toevoegen.

Ga in Git Bash eerst naar je projectdirectory door het pad naar je projectdirectory in te typen en het vervolgens aan Git toe te voegen:

 cd / C / xampp / htdocs / wordpress / wp-content / themes / myawesometheme git init 

Nu je je project aan Git hebt toegevoegd, is de volgende stap om alle bestanden erin toe te voegen.

 git add . 

Na het toevoegen van al uw bestanden, is de volgende stap om uw eerste commit te maken.

 git commit -m "Alle projectbestanden toevoegen als de eerste commit" 

Stap 4. Wijzigingen synchroniseren met uw Bitbucket-repository.

Nu is de laatste stap om uw lokale bestanden te synchroniseren met uw BitBucket-repository. Typ deze regel in Git Bash om uw lokale repository aan te sluiten op uw BitBucket-repository.

 git remote add origin https: //[email protected]/bitbucketusername /repositoryname.git 

Duw al uw bestanden naar de BitBucket-repository.

 git push -u origin --all # pusht de repo en zijn refs voor de eerste keer 

Gefeliciteerd, je hebt met succes je lokale WordPress-bestanden gesynchroniseerd met je BitBucket-repository. Laten we nu enkele wijzigingen aanbrengen in bestanden in uw lokale repository. Als je klaar bent met het aanbrengen van wijzigingen, moet je die wijzigingen in Git vastleggen.

 git add. git commit -m "Nieuwe functies toegevoegd" git push -u origin --all 

Het implementeren van wijzigingen van BitBucket naar Staging-site

Nu u hebt geleerd hoe u Git met BitBucket kunt gebruiken, is het tijd om wijzigingen door te voeren van uw BitBucket-repository naar uw staging-site. Op deze manier kunt u lokaal aan uw site werken en uw wijzigingen op uw staging-site testen zonder uw live site te beïnvloeden.

Om dit te doen, raden we aan om Ftploy te gebruiken. Met het standaard gratis account kunt u één project instellen. Het bewaakt wijzigingen aangebracht aan uw BitBucket-repository en implementeert ze vervolgens naar uw webserver. Eerst moet u zich aanmelden voor een account op Ftploy. Hierna moet u uw servergegevens toevoegen.

Selecteer om een ​​nieuwe server te configureren Servers »Nieuwe server uit de navigatie bovenaan.

Vul de juiste velden in met de instellingen die u hebt gemaakt toen u uw tijdelijke FTP-account eerder configureerde.

Klik Test verbinding om te zorgen dat FTPloy verbinding kan maken met uw server en klik vervolgens op Server opslaan.

Als u een project wilt maken, selecteert u Projecten »Nieuw project uit het navigatiemenu, waar nodig GitHub of BitBucket selecteren.

Als u eerder uw server hebt gedefinieerd, kunt u deze in het vervolgkeuzemenu selecteren (voer anders de details in de betreffende velden in). Voer in het veld Serverpad het pad naar uw themadirectory in (dit verandert afhankelijk van de structuur van uw repo, maar / wp-content / theme / your-theme is geschikt als uw repo alleen uw thema bevat).

Wanneer u een wijziging in die BitBucket-repository pusht, pakt FTPloy de gewijzigde bestanden op en stuurt deze naar uw geselecteerde server.

Veranderingen in Live pushen

Als u FTPloy gebruikt om uw wijzigingen van een repository naar uw staging-server te implementeren, kunt u een soortgelijk proces voor uw live-server instellen. Als er echter onjuiste of foute code naar uw repository werd gepusht, zou dat automatisch naar uw live-site gaan.

Het wordt aanbevolen om een ​​geautomatiseerd implementatiesysteem zoals FTPloy voor een staging-server uit te voeren en vervolgens handmatig over de vereiste bestanden naar uw live-site te kopiëren als u tevreden bent met de wijzigingen en ze grondig hebt getest in uw nieuwe staging-omgeving..

We hopen dat dit artikel u heeft geholpen om te leren hoe u een staging-omgeving voor uw WordPress-sites kunt maken. Raadpleeg voor het oplossen van problemen onze gids met de meest voorkomende WordPress-fouten en hoe u deze kunt oplossen. Voor feedback en vragen kun je hieronder een reactie achterlaten.