11 september 2019
Bijgewerkt: 18 januari 2021

Dynamische pagina's zonder specifieke WordPress plugins

Een website bestaat vaak uit pagina’s die om een verschillende layout vragen maar tegelijkertijd eenvoudig gevuld en aangepast moeten kunnen worden door de webmaster. Zo moet idealiter bijvoorbeeld een evenementspagina eenvoudig kunnen worden toegevoegd op de website door simpelweg een aantal velden in te vullen. Eigenlijk zoals je een formulier invult. Dàt is nu weer een stuk eenvoudiger geworden in WordPress met Oxygen, dankzij het "repeater element" in Oxygen en de plugin ACF.

Gebruiksgemak voor webmaster

Een webmaster wil zich niet bekommeren over de layout van bijvoorbeeld de nieuwspagina. Het invoeren van een titel, koptekst, tekst, datum en eventuele afbeeldingen moet voor hem of haar even eenvoudig zijn als het invullen van een formulier. Daarvoor is nu in een WordPress site, mits gebouwd met Oxygen slechts 1 algemene plugin nodig en dat is ACF, Advanced Custom Fields.

Ik heb geen andere WordPress oplossing gevonden die mij persoonlijk net zo goed leek in termen van uitvoerbaarheid, aantal regels code en flexibiliteit voor de webbouwer en gebruiksvriendelijkheid voor de webmaster.

Naast de bestaande 6 methoden om custom layouts te maken, die verderop in deze post aan bod komen is er nu dus een manier bijgekomen die eigenlijk alle nadelen van de andere methoden oplost; het repeater element in Oxygen.

Dynamische pagina's met Oxygen

Ik laat je eerst 4 praktijkvoorbeelden zien die ik gemaakt heb met Oxygen en ACF. Daarna geef ik een opsomming met alle voordelen van deze methode. In de praktijk voorbeelden ga ik je laten zien dat het allemaal erg geavanceerd is maar tegelijkertijd toch super gebruiksvriendelijk werkt, voor zowel webbouwer als voor de webmaster.

Voorbeelden van wat je er allemaal mee kunt bouwen

Hieronder geef ik 4 voorbeelden van layouts die zijn gemaakt met Oxygen en content bevat die is ingevoerd in (ACF) custom fields: 

  • Nieuwspagina
  • Profielpagina
  • Doelgroep onderwerp pagina
  • Portfolio overzichtspagina

Je kunt je voorstellen dat deze 5 pagina's er idealiter anders uitzien en andere informatie bevatten, en andere informatie betekent andere 'custom fields'.

Praktijk voorbeeld 1: Nieuwspagina

Laten we beginnen met hoe een nieuwspagina er op de frontend van een website uit kan zien. Daarna laat ik je de omgeving voor de WordPress ontwikkelaar zien en waar de webmaster overigens geen toegang toe heeft.

Hier zie je dezelfde nieuwspagina maar nu zie je 'm zoals de webbouwer de pagina ziet als deze ontwikkeld wordt en uiteraard kan de pagina ook weer eenvoudig worden aangepast/uitgebreid. Deze pagina is tevens de plek waar de custom fields zoals bijvoorbeeld 'datum' worden voorzien van de gewenste styling zoals lettertype en -grootte. Dit template gebruik ik ook voor Onderwerp pagina's, vandaar staan er meer velden in die je er niet zou verwachten.  
Dit is de nieuwspagina zoals die te zien is voor de webmaster, in de backend van de website. De eenvoud van dit scherm dus zoals gezegd denken aan een formulier dat even ingevuld moet worden. Geen overload aan velden die je nog wel eens tegenkomt in andere oplossingen.

​De layout van de pagina is zoals je hierboven zag al door de webbouwer vastgelegd dus daar hoef je je niet meer druk over te maken; als webmaster richt je je uitsluitend op het invullen van de velden. De foto die je hier upload wordt automatisch bovenin de pagina gezet, achter de titel.

Praktijk voorbeeld 2: Profielpagina

Een pagina voor het publiceren van informatie over een medewerker zal andere info moeten bevatten dan een nieuwspagina en wellicht is een andere styling gewenst. De profiel pagina die ik op maat gemaakt heb voor BekkenfysiotherapieTwente ziet er bijvoorbeeld zo uit:

Omgeving voor de WordPress ontwikkelaar, niet toegankelijk voor de webmaster
De pagina voor de webmaster is van een verbluffende eenvoud.

Praktijk voorbeeld 3: Layout voor Onderwerp pagina

Voor de layout van een Onderwerp pagina is ervoor gekozen voor een deel dezelfde opzet te gebruiken als voor de Nieuws pagina, om de onderhoudskosten laat te houden koos ik ervoor hetzelfde tempate te gebruiken waarbij ik dan wel bepaalde elementen alleen laat ziein wanneer het template te zien is voor een nieuwsitem, de datum bijvoorbeeld. Ook laat ik elementen alleen zien wanneer het gaat om een Onderwerp pagina, in dat geval moeten er soms Veelgesteldevragen ingevoerd en getoond kunnen worden. Ik maak daarvoor gebruik van de Conditions feature in Oxygen, meer hierover op https://oxygenbuilder.com/documentation/other/conditions/.

Bij het praktijk voorbeeld 'Nieuwspagina' heb ik je al het eerste deel van het template laten zien, nu laat ik je zien hoe het onderste deel in elkaar steekt. Op het rode Call-to-action vlak wordt de informatie geplaatst die de webmaster invoert. Als de webmaster kiest voor het toevoegen van een emailadres in plaats van een telefoonnummer wordt de knop gebruikt waar een 'mailto' link in zit, en niet de knop waar een 'tel' link in zit.

Praktijk voorbeeld 4: Portfolio

Hieronder een afbeelding waarin ik laat zien wat de structuur is van die pagina, welke elementen ik ervoor gebruikt heb.

In de Repeater element maak ik voor bepaalde elementen gebruik van conditions. Dat is nodig omdat niet alle items in de portfolio websites zijn, als het Google Ads items betreft is er slechts 1 afbeelding en moet dus het element Afbeelding gebruikt worden en niet het element Slider.
Dit is de pagina waar de webmaster enkel een aantal velden moet invullen van een WordPress 'post'.

ACF velden voor dynamische pagina's

Dit zijn de velden die aangemaakt kunnen worden (in ACF) en daarna gebruikt kunnen worden in Oxygen om de meest uiteenlopende dynamische pagina's te kunnen maken zoals ik in de voorbeelden hierboven liet zien:

  • Range
  • Text
  • Text Area
  • Button Group
  • Checkbox
  • Radio Button
  • Select
  • True / False
  • File
  • Gallery
  • Image
  • oEmbed
  • Wysiwyg Editor
  • Color Picker
  • Date Picker
  • Date Time Picker
  • Google Map
  • Time Picker
  • Accordion
  • Flexible Content
  • Group
  • Repeater
  • Tab
  • Clone
  • Link
  • Page Link
  • Post Object
  • Relationship
  • Taxonomy
  • User

Voordelen van Oxygen Builder voor dynamische pagina's

  • Relatief eenvoudig in gebruik voor een WordPress ontwikkelaar met kennis van html en css.
  • Erg eenvoudig in gebruik voor webmasters.
  • Updaten van het repeater element hoeft niet apart te gebeuren, dat gaat namelijk automatisch wanneer Oxygen geupdate wordt.
  • Aangemaakte items zijn voor de website bezoeker te filteren op allerlei velden, handig in bijvoorbeeld een catalogus of nieuwsoverzichtspagina. Wel is daarvoor een aanvullende plugin nodig, namelijk facetwp.
  • Er hoeft geen Php code geschreven te worden, dit maakt je een stuk onafhankelijker van je webbouwer (of degene die php code schrijft voor hem).
  • Niet alleen velden van het type 'text' zijn mogelijk maar ook allerlei andere.
  • Consistentie in content en layout. Het kan niet meer gebeuren dat de ene webmaster andere informatie invoert of styling toepast dan de andere webmaster.
  • Geen kosten voor aanschaf extra plugins. Alleen aan het daadwerkelijk bouwen van de toepassingen (bijvoorbeeld een ‘nieuwsoverzicht') kosten verbonden.
  • Geen aparte plugins dus geen conflicten met andere plugins.
  • Als het Oxygen repeater element is toegepast voor verschillende pagina's, dan zal de omgeving voor de webmaster dus telkens hetzelfde ingericht zijn, dus als een webmaster bijvoorbeeld een nieuwsitem kan toevoegen kan hij ook een profiel van een personeelslid toevoegen.
  • Zoals alles in Oxygen kan ook de indeling van de content app per beeldscherm worden bepaald (de responsiveness is dus uitstekend te noemen).

Dynamische pagina's zonder Oxygen

Je hoeft natuurlijk geen Oxygen Builder te gebruiken om toch pagina's zoals ik hierboven laat zien te maken, je hoeft er zelfs geen custom fields voor te gebruiken.. Wel heb ik de afgelopen jaren ervaren, en/of gelezen, dat er een aantal nadelen aan kleven. Per methode noem ik die, zonder de pretentie te hebben daarmee een uitvoerige review te schrijven laat staan een complete vergelijking te maken tussen Oxygen en betreffende methode.

Layout zónder custom fields, 3 opties:

  • Een plugin, voor bijvoorbeeld evenementen.
  • Een Page builder 
  • Een standaard Post (WordPress)

Layout mèt custom fields: 

  • Custom fields in WordPress zelf ('build-in-function')
  • Custom fields functie in Divi builder

Layout zónder custom fields

Plugins gebruiken

De meest voor de handliggende optie, vooral wanneer er veel pagina's zijn, is om voor alle layouts een plugin aan te schaffen en te implementeren. Bijvoorbeeld een plugin voor nieuws, eentje voor persoonlijke profielpagina's en een voor een portfolio. Soms zijn er ook plugins waar verschillende pagina's mee gemaakt kunnen worden zoals ZOO van Yootheme.


Nadelen

  • Vrij kostbaar in zowel aanschaf als implementatie.
  • Plugins conflicteren soms met elkaar.
  • Stijle leercurve want webmaster moet met alle plugins leren werken; de webmaster moet tenslotte zowel nieuwsitems, evenement als persoonlijk e profielen kunnen toevoegen.
  • Een update van de plugin moet afzonderlijk van de updates van de gebruikte page builder en het CMS worden uitgevoerd, omdat de plugin er geen deel van uitmaakt.

Een page builder pagina gebruiken

Voor alle typen pagina’s wordt een goed gestylde dummy versie gemaakt in bijvoorbeeld een van deze page builders: Divi, Elementor (WordPress).  Dat item kan vervolgens door de webmaster gekopieërd en aanpast worden voor elk nieuw item. Bijvoorbeeld: Voor een nieuwe cursus kopieer je een bestaande cursus pagina en ga je die aanpassen. 


Nadelen
  • Soms zal een webmaster al dan niet opzettelijk toch de layout aanpassen, en dat kan ongewenste gevolgen hebben voor andere pagina.
  • De content is niet filterbaar, dus bijvoorbeeld kan een overzicht van evenementen niet gefilterd worden op ‘Locatie’.

Een post maken en die hergebruiken voor elk nieuw item

Voor alle typen pagina’s maak je een Post (WordPress) en die hergebruik je voor elk nieuw item. Het voorbeeld van hierboven geldt hier ook: Als je een nieuw item wilt toevoegen bijvoorbeeld een nieuwe cursus kopieer je een bestaande cursus pagina (post of artikel dus) en ga je die aanpassen. 


Nadelen
  • Consistentie in content is in het geding; de ene keer vermeld de webmaster bij een training voor wie de training bedoeld is de andere keer vergeet hij dit.
  • Ook is de consistentie van layout in het geding, aangezien de ene webmaster de trainingslocatie vetgedrukt maakt en een andere webmaster dat niet doet.
  • De content is niet filterbaar, dus bijvoorbeeld kan een overzicht van evenementen niet gefilterd worden op ‘Locatie’.

Layout mèt custom fields

Custom fields in WordPress zelf ('build-in-function') gebruiken

Met de build-in-function 'custom fields' kunnen er in WordPress ook velden worden toegevoegd.

Nadelen
  • Php code moet geschreven worden, dit maakt je een stuk afhankelijker van je webbouwer (of degene die php code schrijft voor hem).
  • Alleen velden van het type 'text' zijn mogelijk.

Custom fields in WordPress page builder 'Divi builder'

Wat kan met Oxygen sinds 2018 ook al met de page builder 'Divi builder' van Elegant themes

Nadelen

WordPress custom fields plugin gebruiken (zonder Oxygen)

Er zijn naast ACF een aantal andere custom fields plugin geschreven voor WordPress. De bekendste zijn Toolset, Meta box en Pods. 

Nadelen 
  • Steile leercurve voor de webbouwer want geen onderdeel van geinstalleerde plugin (Oxygen).
  • Een update van de plugin moet afzonderlijk van de updates van de gebruikte page builder en het CMS worden uitgevoerd, omdat de plugin er geen deel van uitmaakt.
  • Kosten van plugin. Toolset kosten, voor de ontwikkelaar, zijn $ 299,- per jaar en voor Meta box $ 199,- per jaar. Pods is gratis.

Voordelen 

  • Vlakke leercurve voor de webmaster want de custom fields bevinden zich, net als bij de opzet in Oxygen, in de welbekende WordPress "Posts" en "Pages", dus in feite in de bestaande WordPress omgeving en niet in een nieuw deel daarvan.

Conclusie

Oxygen is een geweldige tool waarmee je heel veel soorten dynamische pagina’s, ‘content apps’, kunt bouwen. De content is daarbij ook nog eens filterbaar voor de website bezoeker. Ook de webmaster ervaart het gemak; hij/zij vult een soort van formulier in om content toe te voegen, eenvoudiger wordt het niet.

Oxygen lijkt mij in veel gevallen een uitstekend alternatief voor het gebruik van plugins, custom fields oplossingen en zéker voor het gebruik van standaard 'Posts' (WordPress) zonder custom fields. Dit omdat er aan deze methoden om een dynamische website te bouwen een aantal nadelen kleven. Zoals o.a een stijle leercurve (want ‘Wéér een ander systeem’), hogere kosten, mogelijke conflicten met andere plugins of een gebrek aan consistentie in layout en/of content.

Geschreven door Paul Borkent

Als zzp'er ontwikkel ik websites en Google Ads campagnes voor verschillende branches zoals zakelijke dienstverlening, metaal, zorg, wetenschap. Dat doe ik voor zowel B2B als B2C.
Ik verdiep me regelmatig in de actuele stand van de techniek, marketing en design om de ambities van mijn klanten te kunnen blijven bijbenen.

© 2004-2020 Webdegelijk
chevron-leftchevron-right