Recent heeft Studio nen-ontwerp opnieuw een klant geholpen met het geautomatiseerd importeren van vacatures die zijn aangemaakt via Visma EasyCruit. De vacatures worden geïmporteerd in een WordPress website. Dat klink niet zo spannend, maar we worden niet voor niets ingeschakeld: het is geen appeltje-eitje als je er iets méér mee wilt…
De setup
Voor het importeren van de vacature-informatie wordt een xml-lijst opgehaald van de server van easycruit.com. De importeer-actie wordt uitgevoerd door de aangeschafte plugin All Import. Deze plugin maakt het iets makkelijker voor ‘gewone gebruikers’ om vacature-data op te halen, in te stellen welke data moet worden opgeslagen en aan te geven wat wel/ niet automatisch moet worden geüpdate. De importeer-actie wordt dagelijks geautomatiseerd uitgevoerd. We hebben extra code geschreven om per vacature een extra opvraag te doen bij de EasyCruit-server om de vacaturetekst op te halen. De tekst wordt in de database opgeslagen als post van het type ‘vacature’ (custom-post-type).
De vacatures staan dan op de website, maar vaak is het wenselijk om een selectie te kunnen tonen. Deze klant wilde bijvoorbeeld kunnen zoeken en filteren binnen het vacature-overzicht op hun eigen website. Om dit mogelijk te maken moet informatie uit de xml geschikt gemaakt of omgezet worden voor een WordPress-omgeving. Om het filteren mogelijk te maken moet de detail-informatie worden opgeslagen als term bij een taxonomy, vergelijkbaar met de aanvinkbare opties bij Berichten zoals Categorie en Tag. De meer informatieve en statische data wordt opgeslagen als post-meta, dat is hetzelfde als custom-fields bij een post.
Het probleem
Het probleem dat vooral opgelost moest worden is het extraheren van de detail-informatie uit de xml. In de xml van EasyCruit is het zo opgeslagen dat het technisch lastig is om deze informatie er direct uit te halen. Hierdoor is het voor een plugin als All Import niet mogelijk om deze data aan te wijzen. De oplossing die wij gemaakt hebben filtert de detail-informatie uit de xml en voegt het vervolgens als nieuw element toe aan de vacature-xml. Nu met duidelijke namen als element-naam, kommagescheiden indien nodig. Hierdoor is de data daarna wel aan te spreken met All Import.
Rommel in de website
Om te voorkomen dat er extra ‘rommel’ in de website komt te staan, hebben we het zo ingesteld dat iets alleen kan worden toegekend als het al bestaat. Er worden dus geen nieuwe termen/categorieën aangemaakt als bij de invoer in EasyCruit een fout is gemaakt bij de invoer. Dus bijvoorbeeld: ‘full-time’ ipv ‘fulltime’. Om te voorkomen dat er allerlei varianten ontstaan van dezelfde term kunnen extra filters worden aangemaakt om naar de juiste term te verwijzen.
Als bij het invoeren van een vacature in EasyCruit voor kopjes of andere elementen kleuren of lettertypes zijn toegekend, kan dat gaan conflicteren met de opmaak en styling van de website. Ook hier hebben we filters voor aangemaakt om deze ongewenste styling te verwijderen.
Zoeken en weergeven
Nu heeft elke vacature de informatie op de juiste plek. Elke vacature is opgeslagen als post van het type ‘vacature’. Belangrijke gegevens zijn hieraan gekoppeld als taxonomy van het type aanstelling, functiegroep, soort werkweek en regio. Hierdoor kunnen we gebruik maken van de standaard systematiek voor ‘archives’ (overzichtspagina’s) in WordPress, zodat elke taxonomy een eigen url heeft om vacatures van dit type te tonen.
domeinnaam.nl/vacatures/functiegroep/management
Als potentiële sollicitant wil je natuurlijk meer specifiek kunnen zoeken. Je wilt een opdracht met zoekwoorden kunnen combineren met bijvoorbeeld het type aanstelling en/of een functiegroep. Dit doe je door de opgevraagde url voor ‘alle vacatures’ uit te breiden met een aantal GET-variabelen. Dus bijvoorbeeld:
domeinnaam.nl/vacatures/?s=zorg&aanstelling=onbepaalde-tijd&functiegroep=management&post_type=vacature
Dit zegt eigenlijk: geef mij alle vacatures [post_type=vacature] met een aanstelling van onbepaalde tijd [aanstelling=onbepaalde-tijd] in de functiegroep ‘management’ [functiegroep=management] die het zoekwoord ‘zorg’ bevat. Natuurlijk kun je dit onmogelijk intypen als bezoeker van een website, dus hebben we een zoekformulier gemaakt die dit voor je doet. Afhankelijk van de velden die je invult, stuurt het formulier je naar de goede url.
Samenwerking in Avada
Deze opdracht was een samenwerking met Ontwerpgroep Lale uit Amersfoort. Zij maken stijlvolle websites met het Avada-thema. Dit thema heeft voor beheerders en redacteuren uitgebreide mogelijkheden om het naar wens op te maken.
Om de informatie juist op te kunnen vragen, hebben we een ‘shortcode’ toegevoegd waarmee elk type vacature-data is op te vragen voor weergave op de website.
[vacature_data key="type_werkweek" label="Werkweek" spacer=" / " ]
[vacature_data key="deadline" label="Reageren vóór" date_format="d-m-Y" date_adjust="-1day"]
Code language: PHP (php)Zo worden de termen van een taxonomy getoond met een instelbaar scheidingsteken en als er een ‘label’ is meegegeven wordt er een extra label-element voor de tekst geplaatst. Ook het datumveld voor de sollicitatie-deadline heeft via de shortcode extra opties om de informatie op de juiste wijze te tonen. Op die manier kan alle informatie worden opgevraagd zonder afhankelijk te zijn van het Avada-thema.
User experience
Omdat we bij Studio nen-ontwerp de focus hebben op de gebruikerservaring van de bezoeker, hebben we ook hier extra tijd besteed aan een ontbrekende functionaliteit in het zoekformulier in Avada. In Avada is het namelijk niet mogelijk om de instellingen van het zoekformulier te ‘onthouden’. Dit geldt voor de velden van het type select/dropdown, waar een keuze uit een lijst gemaakt moet worden.
Als je zoekt op functiegroep ‘management’ wil je ook dat deze geselecteerd staat na de zoekopdracht. Als er dan teveel resultaten zijn, kun je direct verder filteren. Het wekt irritatie op als je steeds opnieuw de gewenste functiegroep moet selecteren. We hebben een aanpassing gedaan in de manier waarop Avada zijn data verwerkt, waardoor de voorinvulling nu wél werkt.
Om de user experience te optimaliseren, zorgen we er ook voor dat het uiterlijk van het veld verandert als er een voorinvulling voor dat veld beschikbaar is. Dan wordt de tekstkleur rood op basis van een toegevoegde class ’taxonomy-in-search’ aan het element.
<?php
add_filter( 'shortcode_atts_fusion_form_select' , 'nen_fusion_shortcode_args' , 10 , 4 );
function nen_fusion_shortcode_args( $args )
{
if( isset($args['options'] ) )
{
$options = json_decode( fusion_decode_if_needed( $args['options'] ) ) ;
$taxonomies = nen_get_taxonomy_list();
$qv = get_query_var( $args['name'] );
if( $qv && array_key_exists( $args['name'] , $taxonomies ) && $options )
{
$term = get_term_by( 'slug', $qv , $args['name'] );
if( $term )
{
$found = false;
foreach( $options as $key => $option )
{
if( $term->slug === $option[2] )
{
$options[$key][0] = 1; /* set as selected */
$found = true;
}
}
$args['options'] = json_encode( $options );
if( $found ) $args['class'] = ( $args['class'] ? $args['class'] .' ' : '' ) . 'taxonomy-in-search' ; /* add class to identify */
}
}
}
return $args;
}Code language: PHP (php)