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.

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:

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 zien 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/.

Praktijk voorbeeld 4: Portfolio

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

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

• Eenvoud is ver te zoeken, getuige de divi handleiding voor het maken van een dynamische content app.  In de comments schreef SupraTiti een eigen handleiding maar ook die laat zien hoe tijdrovend het allemaal is, voor zowel webbouwer als webmaster.
• Geen filter om de items te filteren zoals in een catalogus nodig is.

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. Sinds 2020 gebruik ik voor nieuwe sites geen ACF meer maar Metabox. 

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 $ 149,- per jaar (maar voor mijn klanten is het gratis). 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.