CMS Webontwikkeling met WordPress en DIVI, Plugin Programmering

Introductie tot WordPress

Content Management Systemen (CMS) vergemakkelijken de creatie en het beheer van websites aanzienlijk. Zonder programmeerkennis kunnen bedrijven en particulieren content beheren, het design aanpassen en websites interactief maken. De bekendste CMS'en zijn WordPress, Joomla, Drupal, Contao en TYPO3, waarbij WordPress inmiddels ongeveer 43% van alle websites wereldwijd aandrijft en daarmee verreweg het meest gebruikte systeem is.

Zelf ben ik begonnen met Joomla, daarna Contao gebruikt en ben ik om goede redenen overgestapt op WordPress. Bij mijn klanten zie ik in de professionele sector nog vaak TYPO3-sites, die echter vanwege TypoScript meer inwerktijd vereisen en daarom niet voor alle gebruikers en met name webontwikkelaars een snelle start bieden. Het is dan ook moeilijker om iemand te vinden die uitbreidingen of het onderhoud overneemt.

Zolang de systemen stabiel draaien en voldoen aan alle technische vereisten (actuele PHP-versie, beveiligingsupdates, AVG, prestaties), is er geen reden voor een complete herontwikkeling. Over het algemeen draaien websites meestal zo'n 4-6 jaar voordat ze fundamenteel opnieuw worden ontworpen.

Hosting bij all-inkl.com en dergelijke

WordPress heeft in principe niet veel nodig. PHP en MySQL/MariaDB zijn voldoende, en zo zijn WordPress-sites bij vrijwel alle providers draaibaar. Toch verwacht men tegenwoordig iets meer – bijvoorbeeld:

• een ontwikkel-/staging-domein
• comfortabel e-mailbeheer
• LetsEncrypt-certificaten voor HTTPS incl. automatische verlenging
• FTP/SFTP-toegangen of web-bestandsbeheerder
• automatische back-ups en eenvoudig herstel
• snelle, gratis ondersteuning
• voldoende werkgeheugen en actuele PHP-versies (bijv. 8.1/8.2+)
• de mogelijkheid om eigen DNS-instellingen te maken
• een snelle verhuizing en het verstrekken van Auth-codes met één druk op de knop
• een eenvoudige installatiewizard voor WordPress e.a.

Een al jarenlang geprefereerde provider is hier all-inkl.com (Affiliate Link), die overtuigt met zeer schappelijke pakketprijzen en uitstekende ondersteuning. Wie alleen CMS-systemen wil hosten, is hiermee uitstekend geholpen.

Wie daarnaast MongoDB, Node.js of Express nodig heeft, moet ofwel een eigen server/VPS huren of naar providers gaan die deze functies aanbieden. 99% van alle klassieke websites heeft dit echter nog steeds niet nodig. Door AI-ondersteunde tools ontstaan echter steeds meer individuele toepassingen – zoals web-apps, API's of automatiseringen. Ook nuonu.com is zo'n toepassing, die WordPress uitbreidt met eigen plugins en zo zeer individuele functies biedt.

Waarom WordPress en DIVI?

WordPress biedt een gebruiksvriendelijke interface, een enorme keuze aan uitbreidingen (plugins) en thema's, evenals een zeer sterke community. Of het nu gaat om een blog, bedrijfspagina, landingspagina of online winkel – met WordPress kunnen vrijwel alle soorten websites worden gerealiseerd. De installatie en basisconfiguratie zijn snel voltooid, en dankzij page builders zoals DIVI kunnen ook leken professionele lay-outs creëren.

Voordelen van DIVI als Page Builder

DIVI onderscheidt zich van veel andere page builders doordat het als compleet thema + builder kan worden gebruikt en er geen extra thema nodig is. Dit betekent:

• Compleet design uit één hand – geen extra thema-afhankelijkheden.
• Flexibele ontwerpmogelijkheden met een visuele drag-and-drop-editor.
• Client-side bewerkingsmogelijkheden direct op de pagina (frontend-editing).
• Uitstekende responsieve aanpassing voor desktop, tablet en mobiele apparaten.
• Voorgeconfigureerde lay-outs & modules, die het creëren van nieuwe pagina's aanzienlijk versnellen.

Nieuw: DIVI 5 – Prestaties & Toekomstbestendigheid

DIVI 5 is meer dan een normale update: de builder is intern volledig opnieuw opgebouwd en op een modern, aanzienlijk slanker fundament geplaatst. Dit zorgt voor merkbaar snellere laadtijden, minder code-ballast en een betere basis voor toekomstige functies.

• Nieuw, slank kernsysteem – de builder is van de grond af opnieuw ontwikkeld en werkt efficiënter met resources.
• Snellere laadtijden & responsieve editor – vooral complexe pagina's met veel modules profiteren van de nieuwe architectuur.
• Minder shortcodes, schonere code – dit vergemakkelijkt langdurig onderhoud, migratie en heeft een positief effect op SEO.
• Nieuwe designfuncties zoals designvariabelen, uitgebreide eenheden, geneste rijen en individueel instelbare breakpoints voor nog preciezere responsieve lay-outs.
• Betere handling van grote projecten – DIVI 5 is ontworpen voor uitgebreide websites met veel templates, globale elementen en bibliotheeklay-outs.

Huidige status bij ons: De website nuonu.com draait al op de DIVI 5 Beta. Alle klantenprojecten die vandaag met DIVI 4 worden geïmplementeerd, kunnen na de definitieve release van DIVI 5 geleidelijk en gecontroleerd worden gemigreerd – idealiter eerst op een staging-omgeving. Zo blijven bestaande sites stabiel, maar kunnen ze de prestatie- en comfortvoordelen van de nieuwe versie benutten zodra dit zinvol en veilig is.

De algemene opbouw van moderne websites

Hedendaagse websites zijn duidelijk gestructureerd, opvallend en moeten vooral responsief zijn. De volgende aspecten zijn hierbij cruciaal:

• Kleuren & lettertypen moeten consistent passen bij de huisstijl.
• Logo & afstanden moeten harmonieus in de lay-out worden geïntegreerd.
• Individuele header & menu voor intuïtieve navigatie.
• Gestructureerde footer, die juridische links, social media profielen en contactmogelijkheden bevat.
• Startpagina definiëren, zodat de hoofdpagina via „Instellingen > Lezen“ wordt ingesteld.

Wettelijke vereisten: Impressum, Gegevensbescherming & Cookie Consent

Elke website heeft een impressum en een privacyverklaring nodig. Bovendien is een functionele cookie-consent tool vereist om te voldoen aan de AVG en TTDSG. Een voorbeeld hiervan is Reel Cookie Consent, dat getest en uitgebreid kan worden met eigen scripts om bijvoorbeeld Matomo AVG-conform te integreren.

Matomo in subdomein-gebruik

Matomo kan zowel op het hoofddomein als op een subdomein worden gebruikt. De voordelen van het gebruik van een subdomein zijn:

• Betere gegevenscontrole & beveiliging – de gegevens blijven volledig op de eigen server.
• Privacyvriendelijke configuratie, aangezien de gegevens niet aan derden worden doorgegeven.
• Eigen opt-out mogelijkheden voor gebruikers, om te voldoen aan de AVG-vereisten.

Verplichte plugins voor een WordPress-website

Voor een professionele en functionele WordPress-site zijn bepaalde plugins vanuit ons oogpunt vrijwel onmisbaar (afhankelijk van het project kan de lijst natuurlijk variëren):

• RankMath – SEO-plugin met Schema-ondersteuning, redirects en veel on-page hulpmiddelen
• Happy Files – Bestandsbeheer met mappen voor media, berichten, pagina's en nog veel meer.
• Reel Cookie Consent – Cookiebeheer (of alternatieven zoals Real Cookie Banner, Borlabs Cookie of Complianz)
• DIVI Supreme – uitgebreide modules en effecten voor DIVI
• WP Armour – Bescherming tegen formulier-spam
• AIOS (All in One Security) – uitgebreide beveiligingsplugin voor login-, bestandssysteem- en firewall-verharding

Beveiligingsconfiguratie in WordPress

Na de installatie moeten de beveiligingsinstellingen onmiddellijk worden geoptimaliseerd:

• AIOS & WP Armour activeren voor bescherming tegen brute-force-aanvallen, spam en eenvoudige bot-aanvallen.
• Standaard admin-gebruikersnaam wijzigen, om gerichte aanvallen te bemoeilijken.
• Twee-factor-authenticatie voor meer veiligheid (optioneel, maar aanbevolen).
• Regelmatige back-ups instellen (bijv. met Duplicator, UpdraftPlus of BackWPup) en herstel testen.

Aanpassing van de WordPress-media-instellingen

Standaard slaat WordPress media op in maandelijks onderverdeelde mappen. Dit is zinvol voor blogs, maar vaak onpraktisch voor bedrijfswebsites. Daarom is het aan te raden om onder „Instellingen > Media“ de automatische mappenstructuur uit te schakelen en de mediabibliotheek in plaats daarvan te organiseren met een tool zoals Happy Files.

Ontwerpfase na de basisinstallatie

Na de basisinstallatie begint de eigenlijke vormgeving:

• Kleuren, lettertypen & afstanden vastleggen – in DIVI globaal als designbasis (of in DIVI 5 aanvullend via designvariabelen).
• Individuele header & menu maken, om de navigatie intuïtief te maken.
• Footer aanpassen, die impressum, privacybeleid, social media links en contactmogelijkheden bevat.
• Telefoonnummers met tel: en e-mailadressen met mailto: klikbaar maken.
• Startpagina maken en vervolgens onder „Instellingen > Lezen“ als hoofdpagina instellen.

Met deze structuur krijgen klanten een duidelijke leidraad om hun website modern, juridisch veilig en functioneel op te bouwen. Mochten verdere aanpassingen nodig zijn, dan kunnen de genoemde plugins en tools individueel worden geconfigureerd.

Gezamenlijk ontwikkelingsproces

Wij vinden het belangrijk om de klant – indien gewenst – zo vroeg mogelijk bij de ontwikkeling te betrekken. Dit betreft de beslissing en goedkeuring van het uiterlijk, maar ook het aanmaken van pagina's, menu's, het onderhoud van SEO-gegevens, media-uploads en nog veel meer. Hoe meer de klant zelf kan doen, hoe beter – en hoe gemakkelijker het latere zelfstandige onderhoud zal zijn.

Logo en Favicon

Vaak zijn er verouderde of nog geen eigen ontwerpen beschikbaar. In dit geval maken wij ook logo's en favicons als vectorbestand en transparante PNG. Dankzij Midjourney en Illustrator kunnen we op verzoek een selectie van 2D- en 3D-logo's leveren. We zorgen ook voor de naamgeving, inclusief controle en registratie van vrije domeinen of hun verhuizing.

Social Media Links

DIVI wordt geleverd met een eigen module met reeds kant-en-klare, juridisch veilige logo's van veel social media providers. Ook in het dashboard onder DIVI > Thema-opties kunnen globale links worden opgeslagen. Headers met logo, menu en een aangepaste footer zie je ook op deze pagina.

SEO-contentcreatie

Vanaf nu beginnen we pagina voor pagina aan te maken – waarbij RankMath direct in overweging moet worden genomen. Titel, beschrijving, og:image, h1, h2, h3 … SEO-vriendelijke en goed leesbare koppen en teksten met zinvolle accenten, evenals expressief, goed geoptimaliseerd beeldmateriaal. SEO first betekent: de inhoud wordt niet alleen op maat gemaakt voor bezoekers, maar ook voor zoekmachines en sociale media. Wat er in overweging moet worden genomen en welke tools je daarvoor nodig hebt, vind je in de leidraad van onze SEO-strategie.

Finalisering van alle inhoud en SEO-gegevens

Het aanmaken kan per pagina verschillend lang duren. Sommige pagina's vereisen aanvullende configuraties, zoals formulieren en hun veilige verzending via SSL of speciale tracking-/consent-instellingen. Gemiddeld moet per pagina rekening worden gehouden met ongeveer een uur of meer. Pas wanneer alle pagina's klaar zijn en de laatste link is getest, is de pagina klaar voor een live test.

Testfase met prestatieoptimalisaties

Een voltooide pagina is altijd een belevenis – maar deze moet nu uitgebreid worden getest. Wij controleren:

• alle interne en externe links,
• alle RankMath-aanbevelingen,
• weergave in sociale netwerken (bijv. met de Facebook-debugger / URL-debuggers),
• laadtijden met snelheidstests (bijv. PageSpeed Insights, GTmetrix, WebPageTest).

Pas wanneer alle fouten zijn verholpen en de pagina overtuigt in prestatietests, wordt deze definitief live gezet.

Sitemapgeneratie en registratie in de Google Search Console

De laatste stap van de creatie is de registratie in de Google Search Console. De door RankMath of WordPress gegenereerde sitemap wordt ingediend, zodat Google alle relevante inhoud gestructureerd kan vastleggen.

Korte- en langetermijnbewaking

Na enkele dagen zou de pagina in de zoekresultaten moeten verschijnen. Met site:domain.de of direct in de Google Search Console controleren we of echt alle belangrijke inhoud is vermeld. Uiterlijk nu zouden eventuele fouten moeten opvallen en gecorrigeerd moeten worden.

Vanaf nu kunnen we bovendien regelmatig onze Matomo-subdomein bezoeken en het succes van de pagina live evalueren. Afhankelijk van de interesse van de bezoekers kunnen de inhoud worden uitgebreid, zoektermen worden aangescherpt en nieuwe landingspagina's worden gemaakt. Zo blijft de website niet statisch, maar ontwikkelt deze zich verder met de doelen van het bedrijf.

Google Bedrijfsinvoer

Wie zich bezighoudt met websitecreatie en -optimalisatie, moet ook een kijkje nemen in Google Business, Maps, Afbeeldingen, Video's, Nieuws etc... Wij zijn dienstverleners en ook verantwoordelijk voor welke gegevens een bezoeker te zien krijgt. Vaak zijn het precies deze gegevens die een bezoeker überhaupt op de website attent maken of een telefoontje uitlokken.