Zo maak je een effectieve WordPress workflow voor developers

WordPress is een geweldig platform, maar kan soms ook een beetje ongeorganiseerd zijn – tenminste vanuit het oogpunt van code. Dit komt omdat de code veel bewerkingsrondes heeft doorgemaakt, en bij het uitrollen van updates zijn dingen soms niet zo efficiënt gecodeerd als ze zouden kunnen zijn.

Het is niet omdat de code soms wat rommelig is, dat je ontwikkelingsproces dat ook moet zijn. Hoewel snelle productieschema’s vaak als excuus wordt gebruikt voor rommelige code, kun je als webdeveloper meer verdienen door een goede workflow toe te passen.

In dit artikel behandelen we enkele tips om je te helpen WordPress sites op de juiste manier te ontwikkelen met de juiste tools bij de hand. We zullen ook een stap-voor-stap handleiding geven om je te helpen deze tips te volgen.

Door deze gids te volgen kun je enkele van de veel voorkomende problemen vermijden die zich voordoen bij het ontwikkelen van WordPress sites. En je zult ook een site kunnen maken die gemakkelijk te onderhouden en bij te werken is.

Laten we dus snel beginnen!

Kenmerken van hoogwaardige code

Voordat we ons verdiepen in onze volledige handleiding over het creëren van een WordPress ontwikkelingsworkflow, laten we even stilstaan bij de vraag waarom hoogwaardige code er eigenlijk toe doet. En dat doet het zeker.

Als je nadenkt over de code voor je site, zijn er een paar belangrijke kenmerken die je in gedachten moet houden. Deze kenmerken helpen om ervoor te zorgen dat je code strak, goed georganiseerd en gemakkelijk te begrijpen is.

Hier zijn enkele kenmerken van hoogwaardige code:

• Gestroomlijnd
• Gemakkelijk te volgen
• Modulair
• Goed van commentaar voorzien
• Kan gemakkelijk worden hergebruikt en onderhouden

Het lijkt misschien veel om deze kenmerken in gedachten te houden, maar maak je geen zorgen. We zullen in onze handleiding volledig behandelen hoe je ze kunt bereiken. Maar eerst moeten we bespreken waarom je ontwikkelingswerk überhaupt aan deze normen moet voldoen.

Waarom WordPress ontwikkeling hoogwaardige codeerpraktijken nodig heeft

Om een WordPress website goed te laten functioneren, moet de code waaruit de site bestaat van hoge kwaliteit zijn. Dit is vooral belangrijk voor WordPress websites omdat ze vaak complex zijn, met veel verschillende bewegende delen.

Er zijn vele redenen waarom codeerpraktijken belangrijk zijn voor de ontwikkeling van WordPress:

1. WordPress websites zijn complex.
2. Een enkele regel code kan een grote impact hebben.
3. Code moet goed geschreven en goed getest zijn.
4. Hoogwaardige code is gemakkelijker te onderhouden.
5. Kwaliteitscode kan de prestaties helpen verbeteren.

Deze punten in gedachten houden terwijl je je ontwikkelingsplanningsproces doorloopt, kan je helpen je oog op de prijs te houden, bij wijze van spreken.

Tips voor verbetering van de WordPress workflow

Nu we het hebben gehad over waarom het belangrijk is om goed geschreven code te hebben, laten we eens wat tips doornemen om je WordPress workflow voor elk afzonderlijk project te verbeteren. Elk van de volgende tips zal helpen ervoor te zorgen dat je WordPress code strak en geoptimaliseerd is, wat je prioriteit zou moeten zijn in 2023 en verder.

Maak gebruik van testomgevingen

Een testsite is een kopie van je live site die je kunt gebruiken om wijzigingen te testen voordat je ze op je live site doorvoert. Dit is een waardevolle tool omdat het je in staat stelt om te experimenteren met veranderingen zonder je live site te beïnvloeden.

Er zijn veel voordelen van het gebruik van een testsite:

1. Je kunt wijzigingen testen voordat je ze op je live site doorvoert.
2. Je kunt potentiële problemen voorkomen door te testen op een testsite.
3. Je kunt er zeker van zijn dat je wijzigingen werken zoals bedoeld.
4. Je kunt potentiële downtime op je live site voorkomen.
5. Je kunt het risico verkleinen dat je live site kapot gaat.

En als je de Premium testomgeving add-on voor Kinsta gebruikt, kun je bij elk van je WordPress sites automatisch een testomgeving aanmaken zonder dat je handmatige handelingen hoeft te verrichten. Een echte tijdsbesparing!

Doe aan versiebeheer

Versiebeheer is een systeem dat wijzigingen in bestanden in de loop van de tijd bijhoudt. Dit is waardevol voor de ontwikkeling van WordPress omdat het je in staat stelt wijzigingen bij te houden en indien nodig terug te keren naar eerdere versies.

Voor de meesten betekent dit het gebruik van Git, een populair versiebeheersysteem. Als je er niet bekend mee bent, Git is een gratis en open-source gedistribueerd versiebeheersysteem, ontworpen om alles van kleine tot zeer grote projecten snel en efficiënt af te handelen.

Het is vooral handig als je met een groot gedistribueerd team werkt. Het laatste waar je tegenaan wilt lopen is meerdere versies van je functions.php bestand, die allemaal een beetje anders heten, in je WordPress installatie omdat meerdere mensen tegelijk wijzigingen aan het aanbrengen waren.

Git vs. GitHub

Git is een versiebeheersysteem, een tool om de geschiedenis van je broncode te beheren. GitHub is een bedrijf dat hosting biedt voor softwareontwikkelingsprojecten die Git gebruiken.

Het zijn twee verschillende dingen, maar de meeste mensen gebruiken de term “Git” om naar zowel Git als GitHub te verwijzen.

Plan geautomatiseerde backups in

Een van de belangrijkste aspecten van de ontwikkeling van WordPress is het maken van backups. Backups zijn van vitaal belang omdat je daarmee je site kunt herstellen als er iets misgaat.

Er zijn veel manieren om backups te automatiseren, maar een van de gemakkelijkste manieren is het gebruik van een WordPress backupplugin. Er zijn veel goede backupplugins beschikbaar, maar wij raden aan om de Kinsta Geautomatiseerde externe backups add-on te gebruiken.

Deze add-on maakt dagelijks automatisch backups van je WordPress site en slaat die op een externe server op.

Maak gebruik van Linting

Linting is het proces van het controleren van code op fouten. Dit is waardevol voor WordPress ontwikkeling omdat het je kan helpen fouten in je code te vinden en op te lossen.

Veel code-editors doen dit automatisch, maar als je er zeker van wilt zijn dat de jouwe deze feature biedt, overweeg dan om een van de volgende code- en teksteditors te gebruiken:

• Sublime Text: Deze code editor heeft veel mogelijkheden, waaronder linting.
• Atom: Deze code editor heeft ook linting ingebouwd.
• Vim: Deze teksteditor biedt ook linting en vele andere features.
• Visual Studio Code: Deze code editor heeft standaard linting beschikbaar.
• PHPStorm: Dit is een betaalde ontwikkelomgeving die linting beschikbaar heeft.

Gebruik een codegenerator

Een codegenerator is een tool dat automatisch code voor je kan genereren. Dit is waardevol voor WordPress ontwikkeling omdat het je tijd kan besparen en je fouten kan helpen voorkomen.

Er zijn veel codegenerators beschikbaar, maar enkele van de populairste zijn:

• GenerateWP: Deze codegenerator kan code genereren voor aangepaste berichttypes, taxonomieën, metaboxen en meer.
• Hasty: Deze codegenerator kan code genereren voor aangepaste berichttypes, taxonomieën en velden.
• Nimbus Themes Code Generator: Deze codegenerator kan code genereren voor aangepaste berichttypes, taxonomieën en velden.

Gebruik WP-CLI

WP-CLI is een command-line interface voor WordPress. Dit is waardevol voor WordPress ontwikkeling omdat je hiermee je WordPress site kunt beheren vanaf de command-line.

Dit is vooral handig als je taken moet doen die repetitief zijn of veel stappen vereisen. Met WP-CLI kun je bijvoorbeeld WordPress installeren, berichten en pagina’s maken, plugins en thema’s installeren, en nog veel meer. Het is ook handig als je in meerdere sites tegelijk wijzigingen moet aanbrengen.

Gebruik een WordPress ontwikkelingsframework

Een WordPress ontwikkelingsframework is een tool dat je kan helpen je workflow te stroomlijnen. Dit is waardevol voor WordPress ontwikkeling omdat het je tijd kan besparen en je kan helpen fouten te voorkomen.

Er zijn veel WordPress ontwikkelingsframeworks beschikbaar, maar enkele van de populairste zijn:

• Genesis: Dit framework van StudioPress is ontworpen om je te helpen sneller WordPress sites te bouwen.
• Underscores: Dit framework van Automattic is ontworpen om je te helpen snel te beginnen met het ontwikkelen van WordPress thema’s.
• Foundation: Dit framework van Zurb is ontworpen om je te helpen responsieve WordPress sites te maken.
• Bootstrap: Dit framework van Twitter is een superhandige manier om responsieve ontwerpen voor WordPress websites te maken.

Gebruik taskrunners

Een taskrunner is een tool dat taken kan automatiseren. Dit is waardevol voor WordPress ontwikkeling omdat het je tijd kan besparen en fouten kan helpen voorkomen. Je kunt er ook meerdere taken tegelijk mee uitvoeren.

Er zijn veel taskrunners waar je uit kan kiezen, maar enkele van de populairste zijn:

• Gulp: Deze taskrunner kun je gebruiken om taken als CSS preprocessing, JavaScript linting en meer te automatiseren.
• Grunt: Grunt is een Javascript taskrunner die helpt om veel van je meer repetitieve taken te automatiseren.
• Webpack: Met deze taskrunner kun je taken automatiseren zoals het bundelen van JavaScript-bestanden en meer.

Raak nu vertrouwd met Vue.js of React

Hoewel je Vue.js of React misschien niet meteen gaat gebruiken, is het belangrijk om nu vertrouwd te raken met deze frameworks. Dit is waardevol voor WordPress ontwikkeling omdat ze steeds populairder worden en steeds meer gebruikt worden naarmate de tijd verstrijkt.

Vue.js is een JavaScript framework waarmee je reactieve gebruikersinterfaces kunt maken. React is een JavaScript library voor het bouwen van gebruikersinterfaces.

Zowel Vue.js als React zijn populaire keuzes voor WordPress ontwikkeling omdat ze snel, licht en gemakkelijk te gebruiken zijn en essentieel zijn om van WordPress een headless CMS te maken.

Waarom tijd besteden aan WordPress workflowplanning van vitaal belang is

WordPress websites zijn complex, en het is belangrijk om een goed geplande workflow te hebben voordat je aan een project begint. Door de tijd te nemen om je workflow te plannen, kun je tijd besparen en potentiële problemen in de toekomst vermijden.

Er zijn veel voordelen aan het plannen van je WordPress workflow:

• Je kunt tijd besparen door te weten wat er gedaan moet worden.
• Je kunt potentiële problemen vermijden door vooruit te plannen.
• Je kunt ervoor zorgen dat alle noodzakelijke taken worden uitgevoerd.
• Je kunt ervoor zorgen dat je workflow efficiënt en effectief is.
• Je kunt problemen voorkomen bij het overdragen van projecten aan medewerkers of klanten

Tijd besteden aan de planning van je WordPress workflow is van vitaal belang omdat het je tijd kan besparen en je kan helpen potentiële problemen te voorkomen. Door de tijd te nemen om je workflow te plannen, kun je ervoor zorgen dat alle noodzakelijke taken worden uitgevoerd en dat je workflow efficiënt en effectief is.

De ideale WordPress workflow voor ontwikkeling

Er zijn vele manieren om het opzetten van een WordPress workflow te benaderen, maar er zijn enkele essentiële stappen die in elk ontwikkelingsproces moeten worden opgenomen.

Stap 1: Een lokale ontwikkelomgeving opzetten

De eerste stap in elke WordPress workflow zou het opzetten van een lokale ontwikkelomgeving moeten zijn. Dit is belangrijk omdat je dan offline aan je WordPress site kunt werken, wat tijd kan besparen en fouten kan voorkomen.

Er zijn veel manieren om een lokale ontwikkelomgeving op te zetten, het hangt er maar vanaf welke opzet je het liefst gebruikt. Wij raden hiervoor DevKinsta aan.

We raden aan Kinsta’s testomgevingen en/of de Premium testomgeving add-on te gebruiken. Dit geeft je een complete WordPress ontwikkelomgeving met een push naar live met één klik.

Je kunt ook aan meerdere projecten tegelijk werken en wijzigingen samenvoegen voordat je live gaat. Het komt ook met ingebouwde A/B testen, plugin compatibiliteitstesten en resource-intensieve testen om er verder voor te zorgen dat je builds goed gestructureerd zijn.

Om aan de slag te gaan met de Premium testomgeving add-on hoef je deze alleen maar aan te schaffen via je Kinsta account. Om de testomgeving in te schakelen, ga je naar MyKinsta en klik je bovenaan het scherm op Omgeving > Nieuwe omgeving aanmaken.

Stap 2: Versiebeheer instellen

De tweede stap in elke WordPress workflow zou het instellen van versiebeheer moeten zijn. Dit is belangrijk omdat je daarmee wijzigingen in je code kunt bijhouden en zo nodig terug kunt gaan naar eerdere versies.

Hiervoor kun je een tool als Git gebruiken. Dat proces ziet er als volgt uit

1. Maak een repository aan op GitHub

Om een repository op GitHub aan te maken, kun je de volgende stappen gebruiken:

1. Log in op je GitHub account en klik op het + teken in de rechterbovenhoek.
2. Selecteer New repository in het dropdown menu.
3. Voer een naam in voor je repository en een beschrijving, en klik dan op Create repository.

2. Kloon de repository naar je lokale ontwikkelomgeving

In ons geval gebruiken we DevKinsta voor ons voorbeeld.

1. Op de GitHub pagina voor je repository klik je op de knop Clone or download.
2. Kopieer in het gedeelte Clone with HTTPs de URL voor je repository.
3. Open in je ontwikkelomgeving een terminal en ga naar de map waar je je repository wilt klonen.
4. Typ het volgende commando in, waarbij je de URL die je van Github hebt gekopieerd vervangt:

git clone https://github.com/JOUW_GEBRUIKERSNAAM/JOUW_REPOSITORY.git

Dit kloont je repository naar je lokale ontwikkelomgeving.

3. Bestanden toevoegen en wijzigingen vastleggen

1. Voeg de bestanden die je met Git wilt volgen toe aan de map van de repository op je computer.
2. Typ git add gevolgd door de naam van het bestand, of gebruik git add . om alle bestanden in de map toe te voegen.
3. Typ git commit -m gevolgd door een bericht dat de wijzigingen beschrijft die je hebt aangebracht.
4. Om je wijzigingen naar Github te pushen typ je git push.

Je kunt nu doorgaan met het maken van wijzigingen aan de bestanden op je computer en ze naar GitHub pushen. Als je de laatste versie van de bestanden van Github wilt ophalen, kun je het git pull commando gebruiken.

Als je GitHub niet gebruikt, kun je op vergelijkbare wijze ook Bitbucket gebruiken.

Stap 3: Lokaal ontwikkelen

Nadat je je lokale ontwikkelomgeving en versiebeheer hebt ingesteld, is het tijd om je WordPress site lokaal offline te gaan ontwikkelen.

Bij lokaal ontwikkelen kun je wijzigingen testen op je testsite voordat je ze live zet. Dit is belangrijk omdat je zo eventuele fouten of bugs kunt opvangen voordat ze je live site beïnvloeden.

Om wijzigingen van je lokale ontwikkelomgeving naar je testsite te pushen, kun je een tool als DevKinsta gebruiken. Deze tool maakt het gemakkelijk om met een paar klikken wijzigingen van je lokale ontwikkelomgeving naar je testsite te pushen.

Stap 4: Maak gebruik van WP-CLI

WP-CLI is een command-line interface voor WordPress waarmee je je WordPress site vanaf de terminal kunt beheren. Dit kan handig zijn voor taken als het aanmaken en beheren van gebruikers, het installeren en bijwerken van plugins, en nog veel meer.

Volg deze stappen om WP-CLI te installeren:

1. Download het WP-CLI phar bestand.
2. Verplaats het bestand naar een map in je PATH (bijvoorbeeld /usr/local/bin).
3. Hernoem het bestand naar wp.
4. Maak het bestand uitvoerbaar (bijvoorbeeld chmod +x /usr/local/bin/wp).
5. Test of WP-CLI is geïnstalleerd door wp –version uit te voeren.

Van daaruit kun je WP-CLI gebruiken om je WordPress site vanaf de commandoregel te beheren. Voor een volledige lijst van commando’s kun je onze diepgaande handleiding voor WP-CLI v2 bekijken.

Stap 5: Je workflow automatiseren met Gulp

Gulp is een taskrunner waarmee je taken kunt automatiseren zoals het minen van CSS en JavaScript bestanden, het compileren van Sass bestanden, en nog veel meer.

Om Gulp te gebruiken moet je het eerst globaal op je systeem installeren. Daarvoor heb je Node.js, npm en – natuurlijk – Gulp nodig. Voer het volgende commando uit in Node.js:

npm install gulp-cli -g

Zodra Gulp is geïnstalleerd, kun je een bestand gulpfile.js aanmaken in de root van je project. Dit bestand bevat de code voor je Gulp taken.

Het volgende gulpfile.js bestand bevat bijvoorbeeld een taak voor het minen van CSS bestanden:

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
gulp.task('minify-css', function() {
 return gulp.src('src/*.css')
 .pipe(cleanCSS({compatibility: 'ie8'}))
 .pipe(gulp.dest('dist'));
});

Om deze taak uit te voeren kun je het volgende commando gebruiken:

gulp minify-css

Stap 6: Linting gebruiken

Lintingtools zijn statische codeanalysetools die je helpen om fouten in je code te vinden. Voor onze doeleinden hier gebruiken we Atom.io met de volgende linting packages:

• atom-beautify
• atom-ternjs
• linter
• linter-eslint
• linter-php
• linter-sass-lint

Navigeer in je terminal naar de map die je wilt linten en voer het volgende commando uit:

find . -name "*.js" -o -name "*.scss" | xargs eslint --fix

Dit zal alle JavaScript en Sass bestanden in je project linten.

Als je een specifiek bestand wilt linten, kun je het volgende commando uitvoeren:

eslint --fix file-name.js

Vervang file-name.js door de naam van het bestand dat je wilt linten.

Stap 7: Een CSS preprocessor gebruiken

Een CSS preprocessor is een tool waarmee je CSS in een andere taal kunt schrijven en vervolgens kunt compileren tot CSS. De twee populairste CSS preprocessors zijn Sass en Less.

In deze tutorial gebruiken we Sass. Om Sass te gebruiken, moet je eerst de Sass commandoregeltool installeren. Voer daarvoor het volgende commando uit:

gem install sass

Als Sass eenmaal is geïnstalleerd, kun je het volgende commando gebruiken om een Sass bestand te compileren tot CSS:

sass input.scss output.css

Vervang input.scss door de naam van je Sass bestand en output.css door de naam van het CSS bestand dat je wilt maken.

Als je je Sass bestanden wilt bekijken op wijzigingen en ze automatisch wilt compileren tot CSS, kun je het volgende commando gebruiken:

sass --watch input.scss:output.css

Vervang input.scss door de naam van je Sass bestand en output.css door de naam van het CSS bestand dat je wilt maken.

Stap 8: Een deploymentplugin gebruiken

Een deploymentplugin is een tool waarmee je gemakkelijk je WordPress site kunt deployen van een lokale ontwikkelomgeving naar een live server.

Er zijn een aantal verschillende tools die je hiervoor kunt gebruiken, maar wij raden aan WP Pusher te gebruiken. WP Pusher is een gratis deploymentplugin die je met je WordPress site kunt gebruiken.

Om WP Pusher te installeren, download je eerst het ZIP bestand van de website van WP Pusher. Log dan in op je WordPress site en ga naar Plugins > Add New. Klik op de knop Upload Plugin en selecteer het ZIP bestand dat je zojuist hebt gedownload. Zodra de plugin geïnstalleerd en geactiveerd is, kun je naar Settings > WP Pusher gaan om hem te configureren.

Als WP Pusher eenmaal geconfigureerd is, kun je WordPress plugins en thema’s op je live server deployen zonder dat je ook maar iets met de FTP interface hoeft te doen of met je WordPress database hoeft te knoeien.

Stap 9: Gebruikmaken van de WordPress Rest API

De WordPress REST API is een krachtige tool waarmee je met je WordPress site kunt communiceren van buiten de WordPress admin interface.

De WordPress REST API kan gebruikt worden om custom oplossingen voor je WordPress site te bouwen. Je zou de WordPress REST API bijvoorbeeld kunnen gebruiken om een mobiele app voor je WordPress site te bouwen of om een aangepast dashboard te maken.

Om aan de slag te gaan met de WordPress REST API, moet je ermee interfacen via de WordPress Command Line Interface. We hebben onlangs een tutorial gepubliceerd over het instellen van de WordPress REST API die je door elke stap kan leiden.

Stap 10: Een stijlgids maken en volgen

Een stijlgids is een verzameling richtlijnen voor het coderen en ontwerpen van je WordPress site. Een stijlgids helpt ervoor te zorgen dat je code consistent is en goed leesbaar.

Er zijn een aantal verschillende stijlgidsen die je kunt gebruiken voor je WordPress project. Wij raden aan om de WordPress Coding Standards te gebruiken als uitgangspunt. Maar waarschijnlijk zul je in de loop der tijd talloze wijzigingen en toevoegingen maken.

Elke stijlgids die je maakt zal waarschijnlijk voortdurend veranderen. Maar het belangrijke punt is dat het een vastomlijnde verzameling van te nemen stappen en te volgen richtlijnen biedt voor alle ontwikkelaars in je team.

In wezen zou je stijlgids je WordPress workflow in geschreven vorm moeten zijn.

Stap 11: Je site live zetten

Als je alle bovenstaande stappen hebt doorlopen, is je WordPress site klaar om live gezet te worden. Als je een deploymentplugin zoals WP Pusher gebruikt, is dit proces zo eenvoudig als het pushen van je code naar je remote Git repository.

Je kunt dit ook rechtstreeks binnen Kinsta doen, door naar MyKinsta > Websites te gaan, je site te selecteren en dan te klikken op Environment actions. Van daaruit klik je op Push to Live.

Schakel vervolgens het vakje naast Files of Database in (om beide aan te vinken), typ de sitenaam in en klik dan op Push to Live.

Als je geen deploymentplugin of Git gebruikt, kun je gewoon je WordPress database exporteren uit je lokale ontwikkelomgeving en importeren in je live server. Je kunt dit doen door in je WordPress admin dashboard naar Tools > Export te gaan.

Selecteer vervolgens All content uit de exportopties en klik op de knop Download Export File. Zodra je je databasebestand hebt, kun je het importeren in je live server door in je WordPress admin dashboard naar Tools > Import te gaan. Selecteer het databasebestand dat je zojuist hebt geëxporteerd en klik op de knop Upload file and import.

Je kunt je WordPress bestanden ook handmatig overzetten van je lokale ontwikkelomgeving naar je live server met een FTP client zoals FileZilla. Maak gewoon verbinding met je live server met FTP en sleep dan je WordPress bestanden naar de public_html map.

Zodra je je WordPress site live hebt gezet, kun je de tijd nemen om alles uit te testen en je ervan te verzekeren dat alles werkt zoals het hoort.

Dit zou ook een goed moment zijn om ervoor te zorgen dat Kinsta APM goed werkt. Deze tool voor prestatiebewaking houdt de prestaties van je server in de gaten en zorgt ervoor dat je site zo snel mogelijk draait.

Samenvatting

Zoals je ziet komt er veel kijken bij het goed opzetten van een WordPress ontwikkelingsworkflow. Maar het volgen van deze stappen zal helpen om ervoor te zorgen dat je WordPress site goed georganiseerd is, gemakkelijk te beheren en soepel loopt.

En je kunt niet fout gaan door te vertrouwen op Kinsta producten zoals DevKinsta, Premium testomgeving add-on, en Kinsta APM. Deze tools zullen je WordPress ontwikkelingsworkflow nog gemakkelijker en efficiënter maken.

Heb je nog vragen over het creëren van een WordPress ontwikkelingsworkflow? Laat het ons weten in de reacties hieronder!