Custom post types maken

Aangezien de webmaster vaak degene zal zijn die profielen toevoegd, aanpast, en verwijderd is het handig dat er een apart menu item voor is. Als je dat niet doet zouden de profielen onder Berichten (Posts) komen te staan Ik noem het menu item 'Mijn teamleden'. Het aanmaken van custom post types doe je met Custom Post Types UI, maar er zijn meerdere plugin om uit te kiezen. Sinds 2020 gebruik ik Metabox, die plugin geeft naast het kunnen aanmaken van custom fields ook de mogelijkheid om custom post types te maken, daardoor is voor mij de plugin Custom Post Types UI overbodig geworden.   

Custom velden aanmaken

De velden die je nodig gaat zijn, zoals 'Titel' of 'Naam' zitten niet standaar in WordPress. De plugin die ik gebruik voor het maken van nieuwe velden is ACF, dat staat voor Advanced Custom Fields, maar je kunt ook kiezen voor andere plugins zoals Metabox. 

Nadat je in ACF de field groep ‘Teamleden’ hebt aangemaakt voeg je de benodigde velden toe.

Het toevoegen van een profiel

Je kunt nu beginnen met het toevoegen van de profielen, dat zal er ongeveer zo uitzien. 

De profielen op de website zetten

Uiteindelijk wil je dat alle medewerkers een eigen pagina krijgen met daarop dus de ingevoerde gegevens. Maar daarnaast moet er ook een overzichts pagina komen, die kun je het beste maken met de zogenaamde 'Repeater', dat is een element in Oxygen. 

In de repeater geef je eerst aan welke items er in de repeater terecht moet komen. Berichten van het type ‘team’ kies je dus.

Alle teamleden die ingevoerd zijn worden dus nu getoond op de pagina. Dt gebeurd echter pas als je hebt aangegeven welke informatie geladen moet worden.
Stel je wilt in ieder geval de featured image laten zien. Daarvoor plaats je binnen die repeater de featured image door in de structuur lint aan de rechterkant van je beeldscherm de Repeater te selecteren en vervolgens links bovenin op de blauwe knop ‘+ Add’ te klikken.
Omdat het geen afbeelding moet zijn uit de media bibliotheek klik je op 'Data' en selecteer je ‘Featured image’.

Layout aanpassen

Hover-state

Een hover-state is altijd goed om toe te voegen, dat zorgt voor interactie tussen de site en de bezoeker. Ik koos voor het naar boven bewegen van de afbeelding. Degenen die bekend zijn met CSS weten dat je dat kunt doen met de 'Translate' selector. Om het naar boven bewegen van de afbeelding geleidelijk te laten verlopen, zodat het niet zo schokkerig wordt, voeg je ook een Transition selector toe, 0,4 sec is meestal prima.  

Kolommen

Het aantal kolommen, dus het aantal mensen naast elkaar, kun je niet rechtstreeks instellen, is er nergens een vakje waarin je kunt kiezen voor bijvoorbeeld '4'.
Het aantal kolommen in een repeater wordt bepaald aan de hand van de breedte van de div in de repeater. Voor het maken van 4 kolommen kies je een breedte die net onder de 25% ligt, omdat je vaak ook tussenruimte wilt hebben.
Dit kun je per beeldscherm breedte instellen. Bij de kleinste afmeting (alles onder 480 px) kies ik doorgaans voor 100%, zodat op mobiel alle personen onder elkaar komen te staan.

Andere effecten die ik vaak toegepast zie worden nasst translate zijn 'Scale', om te vergroten/verkleinen, ‘Opacity’, waarmee je de helderheid (letterlijk doorzichtigheid) laat toe- of afnemen wanneer er met de cursor overheen bewogen wordt. Of een combinatie van verschillende selectors.