24 december 2020
Bijgewerkt: 10 februari 2021

In WordPress profielpagina’s maken met Oxygen

Veel organisaties willen informatie over hun medewerkers op de website plaatsen. Achterliggende reden voor die organisaties is dat bezoekers die al geïnteresseerd zijn in het bedrijf vaak graag wat meer willen weten over het bedrijf dan alleen over de producten en/of diensten. Een goed vormgegeven profielpagina van medewerkers van een bedrijf kan de bezoeker te overtuigen contact op te nemen, een offerte aan te vragen of een afspraak te maken. Daarom zal er wat meer info dan alleen een foto en een korte tekst op moeten staan. Ook zo’n profielpagina kan uitstekend gebouw worden met Oxygen, aangevuld met Custom post types. In deze blog post vertel ik hoe.

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.  

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. 

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

Onderin de afbeelding zie je dat ik deze groep, dus met alle velden die erin zitten, heb toegewezen aan het post type die ik daarvoor al had aangemaakt, het post type 'Teamlid'.

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.

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-2021 Webdegelijk
chevron-leftchevron-right