Website ontwikkeling met WordPress

Toen we in 2013 met PLint-sites begonnen, maakten we alles met WordPress. Of het nu om een simpele website of een complexe applicatie ging, WordPress was ons startpunt. Frameworks zoals Laravel of Vue bestonden nog niet of waren nog niet ver genoeg ontwikkeld om te gebruiken voor een serieuze webshop of webapplicatie. 

In de jaren die volgden, zijn we wel gaan experimenteren met dergelijke tools en frameworks. Eerst voor demo projecten of websites en tools die we zelf gebruikten. Voor de backend probeerden we Laravel. Dat beviel zo goed dat we het nu voor bijna ieder project gebruiken. Voor de frontend hebben we wat langer moeten zoeken. We hebben verschillende opties geprobeerd zoals Backbone en React, maar uiteindelijk zijn we bij Vue uitgekomen. 

Tegenwoordig gebruiken we WordPress niet veel meer, maar omdat het nog steeds één van de meest gebruikte CMS systemen wereldwijd is, willen we wel graag onze ervaringen delen. Dit artikel is echter niet bedoeld om alle aspecten en details rondom website ontwikkeling met WordPress te beschrijven. Hiervoor kan je het beste de WordPress documentatie raadplegen.

WordPress

Achtergrond

Allereerst is het goed om je te realiseren dat er twee versies van WordPress zijn: een gehoste versie en een open source variant. De gratis gehoste versie van WordPress vind je op WordPress.com, maar voor webdevelopers is met name de open source tak op WordPress.org interessant. In dit artikel zullen we het dan ook enkel hebben over open source WordPress. 

Het grote voordeel van open source is dat het omarmd is door een grote community. Dit betekent dat mogelijke bugs in nieuwe versies snel gevonden en gerapporteerd worden en dat het platform daardoor continu verbetert. Een aantal veel geroemde voordelen van WordPress op een rij:

  • Eenvoudig beheer van content. Dit maakt het beheren en up-to-date houden van de website mogelijk zonder een regel te hoeven programmeren.
  • Scheiding van inhoud en layout. De uitstraling van je WordPress website, zoals de lettertypes, de layout en de kleuren staan los van de pagina’s, blogberichten en overige inhoud. Dat betekent dat een nieuwe look-and-feel eenvoudig doorgevoerd kan worden indien dat gewenst is.
  • Volwassen platform. WordPress is ontstaan als een platform voor blogs. Hoewel WordPress nog steeds veel gebruikt wordt om te bloggen, kan je er ook een webshop of ingewikkelde applicaties mee ontwikkelen.

Voordat je kunt beginnen met het toevoegen van content aan je WordPress website moet je het installeren, een thema kiezen en wellicht wat plugins installeren. Hieronder zetten we dit voor je op een rij.

Installatie

Voor het installeren van een online WordPress website heb je allereerst een domeinnaam nodig en ruimte op een server waar de bestanden en de database kunnen staan. Dit regel je doorgaans via een hostingmaatschappij. Eenmaal geregeld is het installeren van WordPress heel eenvoudig. Hiervoor volg je de stappen zoals deze beschreven zijn in de WordPress documentatie

Thema’s

Het uiterlijk van je WordPress website wordt bepaald door een thema. Een thema bestaat uit een reeks pagina templates en een CSS bestand dat bepaald hoe je website eruit ziet en welke features er out-of-the-box beschikbaar zijn. Standaard worden er een aantal mooie thema’s voorgeïnstalleerd, maar je kunt ook zelf een thema zoeken dat past bij je wensen. Houd bij het kiezen van een thema ook rekening met je wensen met betrekking tot functionaliteit. Sommige thema’s zijn veel uitgebreider dan andere. Wil je je website bijvoorbeeld uitbreiden tot webshop, dan is het belangrijk dat je een thema kiest met support voor WooCommerce (of een andere webshop plugin). Als je een website maakt waarop je portfolio een prominente plaats krijgt, kies dan voor een speciaal portfolio thema met grote afbeeldingen of full-screen achtergrond sliders.

Thema’s worden online aangeboden in allerlei varianten, zowel gratis als betaald. Er zijn voldoende gratis thema’s te vinden, maar het aantal features binnen die thema’s is vaak beperkt. Voor een eenvoudige website met een aantal vaste pagina’s en een blog zijn de meeste thema’s wel geschikt, maar als je op zoek bent naar een rijk uitgerust thema dan kom je al snel terecht bij betaalde thema’s. Themeforest is een handige website met een grote keuze aan thema’s, zowel gratis als betaald. Een waarschuwing vooraf: probeer goed te bedenken wat jij met het thema wilt gaan doen, want de demo pagina’s van thema aanbieders zijn door het gebruik van mooie foto’s vaak erg verleidelijk. Als je een mooi thema op het oog hebt, bekijk de demo dan zowel op je mobiel als op een computer, zodat je zeker weet dat het responsive design in orde is.

Wanneer je een thema gevonden hebt en dat wilt aanpassen dan is het verstandig om een child theme aan te maken. Een child theme voorkomt dat je je aanpassingen kwijt bent op het moment dat je een update van het thema installeert.

Plugins

Je zult gauw genoeg merken dat de standaard mogelijkheden van WordPress redelijk beperkt zijn. Een contactformulier is bijvoorbeeld niet standaard toegevoegd. Extra functionaliteit kun je toevoegen door plugins te installeren. Inmiddels zijn er zo’n 60.000 officiële plugins beschikbaar voor WordPress en daar zit direct een gevaar: vind maar eens de plugin die precies doet wat jij voor ogen hebt. Daarnaast zijn ook niet alle plugins even goed geprogrammeerd. Een goede raad is om enkel plugins te gebruiken die op de officiële plugin pagina van WordPress staan. Lees de beschrijving altijd goed door, lees de reviews, check of de plugin recent nog is geupdate en compatibel is met jouw WordPress versie en of deze vaak is gedownload.

Er zijn een aantal heel bekende plugins die veel gebruikt worden binnen WordPress. Een aantal zullen we hier bespreken. Een plugin waar we niet in detail op ingaan, maar die wel veel gebruikt wordt is WooCommerce. Hiermee transformeer je in no-time je website tot een webshop. In het backend kan je eenvoudig alle producten beheren en staan je orders overzichtelijk bij elkaar, zodat je deze snel af kunt handelen. In de frontend worden automatisch pagina’s toegevoegd voor de producten, het winkelmandje en het afrekenen. 

Ook de Yoast SEO plugin wordt in bijna iedere website geïnstalleerd. Je wilt tenslotte graag dat er bezoekers naar je website komen. Het WordPress systeem is uit zichzelf al aardig zoekmachine vriendelijk opgezet, maar dit kan sterk verbeterd worden door een aantal SEO technieken door te voeren. De veel geroemde WordPress SEO plugin van Yoast kun je gebruiken om je vindbaarheid een boost te geven. Deze plugin is zeer uitgebreid en kan dus door zowel beginnende als ervaren SEO-ers gebruikt worden om hun sites beter vindbaar te maken.

Backups

Het is van groot belang dat je regelmatig backups maakt van je website om te voorkomen dat je alles kwijt bent wanneer de server zou crashen of de site gehacked wordt. Tegenwoordig zijn er verschillende plugins beschikbaar die het backup proces voor je uit handen nemen. Zorg er wel voor dat je een plugin gebruikt die een backup maakt van zowel je bestanden als de database. Wij gebruiken de UpdraftPlus backup plugin om het maken van backups te automatiseren. Je stelt zelf het schema in om bijvoorbeeld elk uur, tweemaal daags of wekelijks backups te maken. Je kunt ook bepalen hoeveel backups er worden bewaard. Daarnaast kun je de backups zeer eenvoudig naar een cloud dienst naar keuze (bijvoorbeeld Google Drive of Dropbox) laten wegschrijven. Bovendien zijn backups met een klik terug te zetten.

WordPress updaten

Wanneer je de beheeromgeving van je WordPress website opent, verschijnt er soms een melding: Nieuwe WordPress versie beschikbaar. Met erachter een knop om dit direct uit te laten voeren. Voor kleine updates gaat dit geautomatiseerd, enkel grote updates moet je handmatig starten. Het is belangrijk om je site up-to-date te houden, want elke WordPress update bevat in min of meerdere mate opgeloste beveiligings bugs. Ook de WordPress Codex adviseert om altijd te zorgen dat je met de laatste versie werkt. 

Zo’n automatische update laat een scriptje draaien. Hebje je wel eens afgevraagd wat er gebeurt als dat script vastloopt? Meestal gebeurt dat niet, maar het zal net jouw blog zijn… Zorg dus dat je voor je update altijd een back-up maakt van je WordPress database. 

Naast het WordPress platform zelf, komen er ook voor de plugins en thema’s regelmatig updates beschikbaar. Het is verstandig om ook deze updates te installeren, maar voor je dit doet, zal je de changelog moeten bekijken. Hierin staan de wijzigingen beschreven, zodat je weet waar je aan toe bent. Daarnaast moet je checken of de laatste versie van de plugin compatibel is met je huidige WordPress versie. Tegenwoordig kun je ook plugins en thema’s automatisch laten updaten door auto-updates aan te zetten. Dit kun je per plugin en/of thema instellen zodat je nooit voor een verrassing komt te staan.

WordPress veiligheid

Bij website ontwikkeling denk je natuurlijk aan mooie foto’s en pakkende teksten, maar ook de veiligheid mag niet uit het oog verloren worden. Hackers zijn overal en omdat WordPress wereldwijd het meest gebruikte CMS is, zijn WordPress sites een geliefd doelwit. Dit is echter niet iets om bang van te worden, maar wel om de juiste maatregelen te nemen. De beste oplossing is het installeren van een beveiligingsplugin die zorgt voor een extra beschermingslaag voor je website. 

Zelf maken we graag gebruik van de iThemes Security plugin. Deze plugin staat goed aangeschreven en is makkelijk in gebruik, al moet je wel even de tijd nemen om alles goed te configureren.

Na het installeren van de plugin zie je in het menu een nieuw item Security en kom je in het dashboard van de plug-in. Hier krijg je direct een pop-up die je helpt met de eerste stappen:

iThemes security opzetten

Na het maken van een backup klik je op ‘allow file updates’ om ervoor te zorgen dat de plugin bij de config en htaccess bestanden kan. Daarna klik je op de ‘one-click secure’ button om de basisinstellingen goed te hebben staan. Vervolgens kom je in het dashboard en daarin zie je de status van de beveiliging van je site.

De plug-in checkt jouw website op een groot aantal punten die met de uitleg verder aardig voor zich spreken. Onze ervaring is dat het het beste is om deze plugin in een vroeg stadium van de website ontwikkeling in te schakelen en te configureren.

Een WordPress site in meerdere talen

Als jouw website ook voor mensen buiten Nederland interessant is, is het verstandig om de website in meerdere talen aan te bieden. Let er wel op dat je vertalingen in orde zijn (lees: gebruik geen automatisch vertaal service zoals Google translate).

Voor het meertalig maken van je website is de WPML plugin een handig hulpmiddel. Hoewel dit een betaalde plugin is, is het zeer de moeite waard. 

Installeren van de WPML plugin

Het installeren van de plugin gaat zoals je gewend bent (via nieuwe plugin > uploaden) en na het activeren koppel je de plugin met je WPML account. Hiervoor klik je “Register WPML” aan en volg je de aanwijzingen op het scherm: in je WPML account moet je de site toevoegen en dit levert je een “site key” op die je vervolgens binnen WordPress in moet vullen.

WPML plugin configureren

Nu kun je de rest van de WPML add-ons eenvoudig toevoegen door de juiste checkboxen aan te vinken en op “Download” te klikken. Dit speciale installatie proces wordt op de site van WPML uitgebreid uitgelegd. 

Configureren van de plugin

Na de installatie komt het configureren. In je WordPress menu is een nieuw icoon toegevoegd. Dit klapt uit in een overweldigend dropdown menu. Maar laten we bij het begin beginnen met de talen. Hier kun je achtereenvolgens

– een taal toevoegen.

– de URL structuur instellen; ik heb voor deze blog die ook in het Engels beschikbaar is (nadat we hem hebben vertaald ;-)) gekozen voor deze URL structuur: blog.plint-sites.nl is de Nederlandse versie en blog.plint-sites.nl/en is de Engelse versie.

– de taalwisselaar instellen. Dit is een dropdown menu dat je op verschillende plekken in je thema (aangenomen dat je thema compatibel is met WPML) kunt toevoegen zodat je eenvoudig van de ene naar de andere taal kunt springen. Je kunt de dropdown ook zelf opmaken (met of zonder vlaggetjes etc.).

– Vervolgens kun je kiezen hoe berichten weergegeven moeten worden. Het is natuurlijk mogelijk dat je niet alle berichten wilt vertalen en dan kun je kiezen of je deze niet vertaalde berichten in een andere taal wel of niet wilt tonen. Op onze blog tonen we alleen de vertaalde berichten.

– Dan kun je de extra talen verbergen. Dit is handig wanneer je veel content hebt die nog vertaald moet worden. Achter de schermen kun je dan eenvoudig doorwerken aan de vertalingen en als het af is kun je met een klik de extra taal zichtbaar laten worden op de site. 

Vertalen van pagina’s en berichten

Het vertalen van pagina’s en berichten is redelijk rechttoe-rechtaan. Op de overzichtspagina van je berichten in het WordPress backend zie je nu een blauw plusje staan als het bericht nog niet is vertaald, of een potloodje als het bericht wel is vertaald (om te kunnen bewerken). Klikken op een van beide opent de WordPress editor in de extra taal. Wanneer je begint met vertalen kun je op de knop “Inhoud kopiëren van Nederlands” klikken om de originele tekst te kunnen zien.

Synchroniseren van je menu

Na het vertalen van je pagina’s en berichten zijn deze nog niet standaard zichtbaar in het menu. Je moet het Nederlandse menu nog synchroniseren naar de extra taal. Dit kan via “Weergave > Menu’s” of via “WPML > Synch van WP-menu’s”. Beide menu managers spreken redelijk voor zich. En ook hier geldt weer: als je er niet uitkomt is het forum van WPML je beste vriend!

Lokaal ontwikkelen

Wanneer je een website ontwikkelt, is het een goede gewoonte om lokaal te ontwikkelen en het resultaat online te zetten wanneer je klaar bent. Dit is ook het geval wanneer je nieuwe features toe wilt voegen aan een bestaande website. Tegenwoordig zijn er versiebeheer systemen beschikbaar die je hierbij helpen, maar voor een WordPress website zijn er wat extra zaken waar je rekening mee moet houden.

Bij een WordPress website wordt een deel van de configuratie opgeslagen in de database en deze zit meestal niet in versie beheer. Wanneer je een WordPress website van een lokale ontwikkelomgeving verplaatst naar een online productieomgeving, moet je daarom handmatig enkele aanpassingen maken:

  • Het wp-config.php bestand bevat de database credentials. Deze moet je aanpassen naar de gegevens van de productieomgeving. 
  • In de wp_options tabel van je database pas je de records met option_name =  site_url en option_name = home aan. Zorg dat de option_values linken naar de live versie. Mocht je de iThemes securities plugin gebruiken, dan is de prefix waarschijnlijk niet langer wp_. In plaats daarvan zoek je de ***_options tabel.

Nu zou je website goed moeten functioneren op de productieomgeving. De laatste stap is ervoor te zorgen dat de interne links correct zijn. Wanneer je je berichten en pagina’s lokaal geschreven hebt, wijzen deze nog steeds naar je lokale omgeving. Hiervoor ga je naar het settings menu van het admin panel en klik je op ‘opslaan’ (zonder aanpassingen te maken). Hetzelfde doe je voor de permalinks.

Mocht dit geen effect hebben, dan kan je een query op direct op de database uitvoeren. Het gaat dan om de volgende query:

UPDATE wp_posts SET post_content = REPLACE(post_content, ‘localhost/test/’, ‘www.your-domain.com/’)

waarbij je de paden aanpast aan je eigen situatie. Voor je dit doet, is het verstandig om een backup van je database te maken. 

Mocht je dergelijke aanpassingen liever niet handmatig willen maken, dan kan de WP Migrate DB Pro plugin deze aanpassingen voor je doen. 

Samenvatting

Hoewel wij WordPress niet langer gebruiken voor de ontwikkeling van webshops en webapplicaties, blijft het wel een heel mooi platform. Het wordt ook nog steeds veel gebruikt: ruim 60% van de websites met een CMS is op WordPress gebaseerd. Wanneer je een WordPress website wilt maken, kies dan ook voor een hostingpartij die zich gespecialiseerd heeft in WordPress. Begin de ontwikkeling met het kiezen van een mooi thema en voeg daarna de inhoud toe. Mocht er nog functionaliteit ontbreken, dan kan je dit via een plugin toevoegen. Vergeet daarnaast ook de backups, updates en beveiliging niet.


Mijn Twitter profiel Mijn Facebook profiel
Leonie Derendorp Webdeveloper and co-owner of PLint-sites in Sittard, The Netherlands. I love to create complex webapplications using Laravel! Laatste bericht
Handling cron jobs in Laravel

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *