Ingebouwde berichttype voor vacatures

Vanaf versie 2.0 is een ‘Vacatures’ berichttype ingebouwd in de plugin, net als de bijhorende taxonomieën. Dit is de eenvoudigste manier om jouw vacatures op een website te publiceren! Bij de instellingen van de plugin kun je aangeven welk berichttype je wilt gebruiken voor je vacatures. Je kunt dus ook een eigen berichttype gebruiken.

Een ‘taxonomie’ is een ‘categorie’ type, waarmee je je vacatures kunt onderverdelen. Denk bijvoorbeeld aan ‘Locaties’ of ‘Werkgebieden’ of ‘Werkniveaus’. Veel van deze EasyCruit categorieën soorten kun je optioneel synchroniseren naar WordPress taxonomieën voor als je deze nodig hebt.

Integratie met Yoast SEO

Maak je gebruik van de plugin Yoast SEO, dan voegt de EasyCruit plugin nu de schema.org/JobPosting data toe aan de gestructureerde data opmaak van Yoast. Gestructureerde data via de Schema.org standaard zorgt er voor dat computers, zoals zoekmachines van Google en Bing, beter begrijpen waar een pagina/bericht over gaat. Zo kan Google bijvoorbeeld vacatures apart uitlichten en deze opnemen in haar Google Jobs zoekmachine.

Gutenberg blok voor EasyCruit vacature omschrijving

De plugin is nu voorzien van een Gutenberg blok voor de WordPress blok-editor. Hiermee kun je de beschrijving van een vacature nu plaatsen op iedere gewenste plek binnen een vacature. Daarbij houden we rekening met de mogelijkheid om de tekst op de website te kunnen aanpassen. Daarna wordt deze tekst namelijk niet meer meegenomen in de synchronisatie met EasyCruit. Zo heb je altijd de teksten op je website die je wilt.

Update nu naar Pronamic Visma EasyCruit 2.0 plugin voor WordPress

Wil je gebruik maken van de beste integratie voor EasyCruit met WordPress. Schaf de plugin aan via pronamic.shop en start met het aanbieden van vacatures op jouw website vanuit de EasyCruit recruitmentsoftware! Heb je de plugin reeds aangeschaft, dan kan je de nieuwste versie downloaden in jouw Pronamic account.

Als je internationale klanten hebt is het verstandig om een buitenlandse of internationale betaalmethode aan te bieden, bijvoorbeeld PayPal of creditcard. Doordat de internationale markt echter steeds verder groeit, is het aanbieden van meerdere betaalmethoden niet meer voldoende. Om het aantal verkopen in de webshop te verhogen, dien je je klanten de mogelijkheid te geven om af te rekenen in de eigen valuta. Dit geeft ze een gevoel van vertrouwen waardoor de kans groter is dat ze daadwerkelijk een bestelling plaatsen. Het kunnen afrekenen in meerdere valuta’s, dan bijvoorbeeld alleen de euro, noemen we Multicurrency.

Bekijk ook onze oplossing om PayPal te koppelen aan o.a. WooCommerce.

Hoe werkt Multicurrency?

Wanneer je een webshop hebt of als je op een andere manier betalingen mogelijk maakt op je website, dan worden deze betalingen waarschijnlijk gedaan in euro’s. Met behulp van Multicurrency kan je er voor zorgen dat deze betalingen ook in bijvoorbeeld ponden of dollars gedaan worden. Hiervoor kijkt de betalingsprovider naar de actuele wisselkoersen op het moment dat een betaling opgestart wordt door de klant. Deze wisselkoers wordt vastgehouden tot het moment dat de betaling verwerkt is. Doordat wisselkoersen continu veranderen, is het ontzettend lastig om vast te stellen welke wisselkoers toegepast moet worden op een betaling. Zodra de betaling verwerkt is, ontvang je in het dashboard van de betalingsprovider een overzicht met daarin het bedrag dat jij ontvangt in euro’s en het bedrag in de ‘vreemde’ valuta.

Het is het op dit moment alleen mogelijk om Multicurrency in te zetten als je Mollie gebruikt als betalingsprovider. Het kunnen aanbieden van meerdere valuta’s is opgenomen in de V2 API van Mollie. Momenteel worden er meer dan 25 verschillende valuta’s ondersteund. Bekijk de documentatie van Mollie voor een overzicht van de valuta’s en welke betaalmethode je per valuta kunt gebruiken.

Gebruik maken van meerdere valuta

Je kunt op twee manieren gebruik maken van Multicurrency op je website. Zo kun je klanten laten betalen in één vaste valuta, bijvoorbeeld in dollars. Dit kan meestal ingesteld worden binnen de algemene instellingen van de plugin die je gebruikt. Wanneer je bijvoorbeeld gebruik maakt van een WordPress multisite constructie, kun je de valuta op de Engelse website instellen op ponden en voor de Nederlandse website kun je dan kiezen voor euro’s.

Naast het aanbieden van één vaste valuta, kun je de klant ook zelf laten kiezen in welke valuta hij wil afrekenen. De valuta stel je standaard in op bijvoorbeeld de euro en met behulp van een extra plugin geef je je klanten de optie om te betalingen in dollars of ponden te doen, aan de hand van een zogeheten ‘currency switcher’. Voorbeelden van plugins hiervoor zijn ‘Multi Currency Selector’ voor Gravity Forms en ‘Multi Currency for WooCommerce’ voor WooCommerce.

Tot voor de invoering van deze nieuwe wetgeving was het relatief eenvoudig om een online betaling te doen. Wanneer je bijvoorbeeld ging betalen met creditcard was het voldoende om de gegevens van je creditcard in te voeren en kon je afrekenen. Met het ingaan van de Strong Customer Authentication is dit veranderd en moet je gebruik maken van een tweede authenticatiemiddel. Het alleen invoeren van de creditcard gegevens is dus niet meer voldoende. De SCA heeft verplicht dat in ieder geval twee van de volgende drie manieren geverifieerd moet worden bij een betaling:

• Iets dat je weet, bijvoorbeeld een wachtwoord of pincode.
• Iets dat je hebt, bijvoorbeeld een telefoon.
• Iets dat je bent, bijvoorbeeld een vingerafdruk of gezichtsherkenning.

Een goed voorbeeld van wanneer je voldoet aan de SCA is een betaling met je mobiel. De mobiel is het eerste authenticatiemiddel (iets dat je hebt) en aan de hand van een pincode (iets dat je weet) of je vingerafdruk (iets dat je bent) kun je het tweede authenticatiemiddel toepassen. 

Belangrijk om te weten is dat al veel betaalmethoden gebruik maken van een twee factor authenticatie en zo dus voldoen aan de Strong Customer Authentication. Ook de overgrote meerderheid van de betaalmethodes, via de verschillende betalingsproviders, die door de Pronamic Pay plugin ondersteunt worden voldoen al aan deze regelgeving. Zo maakt Rabobank gebruik van de Rabo Scanner als tweede authenticatiemiddel en kun je bij de betaalmethode iDEAL QR je mobiel als tweede middel inzetten.

Er zijn uitzonderingen

Als gevolg van de invoering van de Strong Customer Authentication moet je als gebruiker een extra stap doorlopen alvorens je de betaling kunt verrichten. Om te voorkomen dat betalingen hierdoor voortijdig beëindigd worden heeft SCA een aantal uitzonderingen gemaakt. Een tweede authenticatiemiddel is bijvoorbeeld niet vereist wanneer het totaal af te rekenen bedrag onder de € 30 ligt. Wanneer er echter meer dan vijf betalingen worden gedaan en het totaalbedrag daardoor boven de € 100 uitkomt, dien je wel te voldoen aan de SCA. Ook voor terugkerende betalingen van hetzelfde bedrag, aan dezelfde organisatie, is het geen verplichting om te voldoen aan de nieuwe wetgeving. Voor je abonnement op Netflix is dus geen tweede verificatiemiddel nodig.

Google Maps <iframe>

De eenvoudigste methode om een Google Maps kaart op je website te zetten is via een <iframe>. Via https://www.google.nl/maps kun je naar de gewenste kaartweergave navigeren en via menu kiezen voor “Kaart delen of insluiten”. Vervolgens kun je kiezen voor “Een kaart insluiten” en krijg je de <iframe> code te zien. Voor eenvoudige kaarten die gericht zijn op 1 locatie is dit vaak een prima oplossing.

Google My Maps

Via Google My Maps kun je zelf Google Maps kaarten maken en voorzien van verschillende lagen met markeringen, lijnen en routebeschrijving. Deze kaarten kun je vervolgens delen, maar ook via een <iframe> insluiten binnen je website. Je kunt de kaart ook delen met andere Google Accounts zodat andere personen ook wijzigingen kunnen doorvoeren. Zo kun je bijvoorbeeld als website ontwikkelaar een kaart helemaal klaar zetten voor je klant en je klant later toegang geven. Maar ook is het vaak handig dat binnen één organisatie meerdere personen de mogelijkheid hebben om dergelijke kaarten te beheren.

OpenStreetMap

OpenStreetMap heeft net als Google de mogelijk om kaarten via een <iframe> in te sluiten binnen je website. Binnen OpenStreetMap heb je ook de mogelijkheid om kaartweergave te exporteren naar een afbeelding. Je hebt dan geen interactieve kaart, maar je bent niet afhankelijk van de OpenStreetMaps service. Voor een interactieve maatwerk kaart kun je gebruik maken van OpenLayers of Leaflet. En voor geocoderen of decoderen kun je gebruik maken van Nominatim.

Leaflet

Leaflet is een opensource JavaScript-bibliotheek voor mobielvriendelijke interactieve kaarten. Het leuke van Leaflet is dat het overweg kan met verschillende kaartservers (ook wel tile-servers). Een kaart wordt vaak opgebouwd met behulp van allerlei kleine afbeeldingen, ook wel tegels (Engels ’tiles’) genoemd. Binnen Leaflet kun je opgeven vanaf welke ’tile-server’ deze kaart afbeeldingen opgehaald moet worden. Je kunt bijvoorbeeld gebruik maken van OpenStreetMap, MapBox, OpenMapTiles, CARTO, etc. Op de wiki van OpenStreetMap en GitHub pagina van Leaflet staan overzichten van verschillende tile-servers. Via de Leaflet JavaScript-bibliotheek kun je de kaart verder voorzien van verschillende lagen, markeringen, lijnen, etc. Er zijn ook veel plugins beschikbaar, o.a. voor bijvoorbeeld geocoderen.

Conclusie

Er zijn genoeg mogelijkheden om Google Maps gratis te blijven gebruiken. Mochten de gratis Google Maps opties niet toereikend zijn dan kun je altijd nog gebruik maken van Leaflet en gratis (of gelimiteerde) tile-servers. Mocht je vragen hebben over het gebruik van Google Maps of andere kaartoplossingen binnen WordPress neem dan gerust contact met ons op.

Kleurnamen in je variabelen

Misschien wel de meest voordehandliggende oplossing, het gebruik van kleurnamen in je variabelen. Denk hierbij aan $red-color, $blue-color en $green-color. In de basis een prima oplossing. Het is echter ook direct de minst schaalbare oplossing.

Wat als de rode kleur in een later stadium toch oranje moet worden? De variabele naam $red-color is dan onhandig gekozen. Het zou betekenen dat je de gerelateerde declaraties in alle Sass-bestanden moet aanpassen. Om het ontwikkelproces te versnellen werken we met een eigen starter thema. Dat zou betekenen dat we bij elk project de variabelen namen en declaraties in de Sass-bestanden moeten aanpassen. Onhandig en inefficiënt.

Een betere naamgeving…

Oké, geen kleurnamen in je variabelen. Maar wat dan wel? Een beschrijvende variabele naam zou een goede oplossing kunnen zijn. Dat betekent dat je specifieke kleurvariabelen maakt voor elementen en secties in je thema. Denk hierbij aan:

• $input-border-color;
• $body-text-color;
• $header-background-color;
• $footer-background-color;

Een mooie oplossing. Bij grote projecten resulteert dit echter gauw in een overload aan variabelen. Dit komt de beheersbaarheid en schaalbaarheid niet te goede. De kracht van variabelen gaat verloren. Gezien deze naamgeving wel erg handig is, gebruiken we het wel in onze thema’s. Daarover later meer.

Voor onze basiskleuren gebruiken we echter een andere naamgeving. Een naamgeving die niet zozeer beschrijft voor welke element de variabele bedoeld is maar wel generiek ingezet kan worden. Voorheen gebruikten we variabelen namen als $primary-color, $secondary-color en $alternative-color.

In de praktijk levert dit echter ook problemen op. Wat als je meer dan 6 verschillende kleuren hebt. Hoe noem je die dan? Het resultaat is al gauw een inconsistente naamgeving.

Keep it simple

Juist, we houden het simpel, een variabele naam waarbij elke extra kleur een opeenvolgend nummer krijgt. Voor zwart en wit maken we een uitzondering aangezien die kleuren altijd hetzelfde zullen zijn. De HEX-codes voor die kleuren zullen nooit wijzigen (#fff voor wit en #000 voor zwart).

• $base-color
• $black-color
• $white-color
• $brand-color
• $brand-color-2
• $brand-color-3
• $brand-color-4
• Etc.

Het grote voordeel van deze naamgeving is dat we voor elk project exact dezelfde naamgeving gebruiken. Daarnaast hoef je nooit meer na te denken over welke naam je een variabele geeft. Bij het vaker toepassen van deze naamgeving merk je al snel dat het front-end werk sneller gaat.

Kleurtinten en transparatie

Voor de kleurtinten en transparante kleuren gebruiken we ook een generieke naamgeving:

• $brand-alpha-20
• $brand-alpha-60
• $brand-alpha-80
• $brand-2-alpha-20
• $brand-2-alpha-60
• $brand-2-alpha-80

De naamgeving is vrij eenduidig. De basis kleur inclusief een suffix met de mate van transparantie (procentueel). Voor alternatieve tinten van een basiskleur hanteren we de volgende notatie:

• $black-color-100
• $black-color-300
• $black-color-600
• $black-color-900

In dit geval bepaald de suffix hoe donker of licht een steunkleur is. Hoe lager het getal hoe lichter de kleur. Je kan dit vergelijken met hoe het font-weight attribuut werkt. Daarnaast wordt deze notatie ook veel gebruikt bij material design. Het grote voordeel van deze naamgeving is dat het direct iets zegt over hoe donker of licht een kleur is. Als je uit gaan van deze naamgeving $light-black-color, $lighter-black-color is het bijvoorbeeld lastig inschatten hoe licht $lighter-black-color is. Als er een nieuwe kleurtint bij komt kan je die ook eenvoudig tussen het bestaande kleurenpallet plaatsen, bijv: $black-color-200.

Semantische naamgeving

Ik noemde eerder al even dat een semantische naamgeving voordelen biedt. Het is pas echt krachtig als je het combineert met de eerder genoemde naamgeving. Dat resulteert in een constructie waarbij je eerst de kleuren definieert en dit vervolgens aan specifieke elementen koppelt. Zoals:

$black-color: #000;
$black-color-100: #f9f9f9f;

$section-background-color: $black-color-100;

Van design naar ontwikkeling

Onze designs maken we in Sketch. Hierbij maken we ook gebruik van ontwerpsjablonen. Dit bespaart kostbare tijd. In dit sjabloon zitten exact dezelfde kleurvariabelen verwerkt als in de WordPress template. Deze kleurvariabelen zijn verwerkt in Layer Styles (sinds Sketch 52). Dit maakt het mogelijk om met één druk op de knop de kleuren in alle pagina templates aan te passen. Het basis kleurenpallet ziet er als volgt uit:

De vertaalslag naar techniek is hierdoor een peuleschil. Een ontwikkelaar ziet in één oogopslag welke kleuren gebruikt worden en welke variabelen daar bij horen. Nog niet overtuigd van deze naamgeving?

De voordelen nogmaals op een rijtje:

• Werk razendsnel vanuit een basis template.
• Kopieer al je variabelen in één keer naar een child thema zonder wijzigingen te hoeven doen.
• Denk nooit meer na over de naamgeving van je variabelen.
• 100% schaalbaar.
• Wijzig eenvoudig je variabele namen zonder dat dit invloed heeft op de declaraties in de Sass-bestanden.
• Zie in een oogopslag welke kleuren in het thema gebruikt worden.
• Maak een super snelle vertaalslag van design naar ontwikkeling.

Beheer van variabele producten binnen WooCommerce

Met de variabele attributen van WooCommerce kun je eenvoudig producteigenschappen toekennen. Hierbij kun je denken aan een kleur of maat. Aan elk attribuut, of combinatie van attributen, kun je vervolgens een prijs toekennen. Een handige functie om productvariaties op te zetten. Maar wat als een product honderden of misschien zelfs duizenden variaties kent? Je wilt als beheerder niet alle variaties handmatig invoegen en beheren. WooCommerce zelf heeft hier geen oplossing voor.

Een klant van ons die al enige tijd WooCommerce gebruikt vroeg ons hier in mee te denken. Hoe zijn een groot aantal productvariaties op een eenvoudige manier te beheren? We gingen op onderzoek uit maar konden geen extensie of plugin vinden die een oplossing bood. Wel kwamen we veel soortgelijke vragen tegen van WooCommerce gebruikers.

Na overleg met de klant hebben we ervoor gekozen hier zelf een extensie voor te schrijven. Met als resultaat de WooCommerce CSV bulk variaties plugin.

WooCommerce CSV bulk variaties

De plugin maakt het mogelijk om een CSV-bestand te koppelen aan een willekeurig variabel product. De regels binnen dit CSV-bestand worden vervolgens uitgelezen en als variatie aan de bezoeker gepresenteerd. 

Opmaak van het CSV-bestand

Elke kolom in het CSV-bestand zal als variabel attribuut op de website getoond worden. Elke rij is een combinatie van opties die uiteindelijk zal leiden tot de totaalprijs.

Voorbeeld van variatietabel

Hieronder een voorbeeld van hoe het CSV-bestand opgemaakt kan worden. De plugin maakt op basis van dit voorbeeld een uitschuifkeuzelijst voor merk en model. De derde prijskolom zal, in combinatie met voorgaande selecties, als productprijs gehanteerd worden.

Gelijke waarden binnen een kolom worden automatisch onder één optie geplaatst. Naar bovenstaand voorbeeld krijgt de bezoeker als eerste optie dus maar twee keuzevarianten, Audi of BMW.

Op basis van de eerste keuze van de bezoeker zullen de opties in de tweede uitschuifkeuzelijst automatisch bijgewerkt worden. Geen onnodige opties, de bezoeker krijgt alleen relevante keuzes.

Plugin in actie

Wil je de plugin in actie zien? Dat kan, onze klant DS Covers heeft inmiddels de plugin in gebruik genomen. Bekijk bijvoorbeeld de indoor autohoes Luxx. Hier zie je de vele productvariaties die vanuit het gekoppelde CSV-bestand ingeladen worden.

Ben je geïnteresseerd in deze door ons ontwikkelde WooCommerce extensie, neem dan contact met ons op. Wij beantwoorden graag jouw vragen en helpen je indien nodig met de installatie en configuratie.

Google heeft aangegeven de tarieven voor G Suite te verhogen. Deze wijziging wordt wereldwijd doorgevoerd met enkele uitzonderingen per regio/land. De exacte prijs die voor de Benelux zal gelden is nog niet bekend. Waarschijnlijk wijzigt de prijs van een G Suite Basic jaarlicentie van € 40 naar € 52 excl. btw € 62,40 (€ 5,20 per maand).

Google geeft de volgende verklaring voor deze wijziging:

We hebben de oorspronkelijke versie van G Suite, waaronder Gmail en Google Agenda, meer dan tien jaar geleden geïntroduceerd. Sindsdien hebben we allerlei nieuwe G Suite-services toegevoegd, waaronder realtime samenwerking (Documenten, Spreadsheets, Presentaties) en flexibele opslag (Drive), krachtige videoconferencecalls (Hangouts Meet), veilig berichten verzenden binnen een team (Hangouts Chat) en zakelijke zoekmogelijkheden (Cloud Search). We hebben onze producten ook voorzien van geavanceerde artificial intelligence zodat u gemakkelijker kunt reageren op e-mails, insights uit gegevens kunt verzamelen en wordt beschermd tegen phishingaanvallen voordat ze plaatsvinden.

Vanaf 2 april 2019 verhogen we de catalogusprijzen van G Suite Basic en Business om gelijke tred te houden met de waarde die G Suite heeft voor klanten.

De wijziging zal voor jaarabonnementen ingaan op de eerstvolgende verlenging na 2 april 2019.

Ontwikkeling van G Suite sinds 2006

Sinds de introductie van G Suite in 2006 is de dienst steeds doorontwikkeld. In onderstaande infographic een helder overzicht van de ontwikkeling van het platform. Gmail, het populairste onderdeel van G Suite, kent ondertussen 1.5 biljoen actieve gebruikers.

ep_elasticpress_enabled

Alle queries met de s parameter maken automatisch gebruik van Elasticsearch. Evenals de post type archief pagina’s. Mocht je Elasticsearch voor een specifieke post type archief pagina willen uitschakelen is dat eenvoudig mogelijk met de ep_elasticpress_enabled filter.

add_filter( 'ep_elasticpress_enabled', 'yourtheme_disable_ep_query', 10, 2 );

function yourtheme_disable_ep_query( $enabled, $query ) {
	if ( $query->is_post_type_archive( 'your_post_type' ) ) {
		return false;
	}

	return $enabled;
}

ep_prepare_meta_allowed_protected_keys

Verborgen metavelden worden standaard niet geïndexeerd door ElasticPress. Verborgen metavelden zijn velden met een underscore voor de naam. Bijvoorbeeld _yourtheme_post_rating.

Mocht je de resultaten willen sorteren op basis van de waarde van een verborgen metaveld, is dat standaard niet mogelijk. Gelukkig geeft ElasticPress de mogelijkheid om verborgen metavelden toe te voegen aan de index met de ep_prepare_meta_allowed_protected_keys filter.

add_filter( 'ep_prepare_meta_allowed_protected_keys', 'yourtheme_ep_meta_fields', 10, 2 );

function yourtheme_ep_meta_fields( $protected_keys, $post ) {
	$protected_keys[] = '_yourtheme_post_rating';

	return $protected_keys;
}

ep_search_fields

ElasticPress zoekt standaard in de titel, samenvatting en content van een bericht. Je kan echter zelf bepalen in welke data gezocht mag worden. Het is bijvoorbeeld mogelijk het samenvattingsveld uit te sluiten en te zoeken in tags. De ep_search_fields filter is je vriend.

add_filter( 'ep_search_fields', 'yourtheme_ep_search_fields', 10, 2 );

function yourtheme_ep_search_fields( $search_fields, $args ) {
	unset( $search_fields['post_excerpt'] );

	$search_fields[] = 'terms.post_tag.name';

	return $search_fields;
}

ep_fuzziness_arg

Met zogenaamde fuzzy queries kunnen de zoekresultaten beïnvloed worden. Bij fuzzy search kunnen bijvoorbeeld spelfouten worden opgespoord om zo toch de juiste resultaten te tonen. Deze fuzzy queries kunnen echter ook resulteren in ongewenste resultaten. ElasticPress geeft de optie om fuzziness in te stellen met de ep_fuzziness_arg filter.

add_filter( 'ep_fuzziness_arg', 'yourtheme_disable_ep_fuzziness', 10, 3 );

function yourtheme_disable_ep_fuzziness( $fuzziness, $search_fields, $args ) {
	return 0;
}

ep_formatted_args

Bij een zoekopdracht met meerdere woorden vindt Elasticsearch alle berichten waarin deze woorden voorkomen. Je kan dit beïnvloeden door de query operator te wijzigen naar ‘and’ in plaats van ‘or’. Elasticsearch zal nu alleen berichten vinden die exact overeenkomen met de zoekopdracht.

add_filter( 'ep_formatted_args', 'yourtheme_set_es_search_args', 10, 2 );

function yourtheme_set_es_search_args( $ep_formatted_args, $args ) {
	$ep_formatted_args['query']['bool']['should'][0]['multi_match']['operator'] = 'and';
	$ep_formatted_args['query']['bool']['should'][1]['multi_match']['operator'] = 'and';
	$ep_formatted_args['query']['bool']['should'][2]['multi_match']['operator'] = 'and';

	return $ep_formatted_args;
}

Deze hooks en filters zouden je op weg moeten helpen om de Elasticsearch zoekresultaten te beïnvloeden. Ook interesse in een razendsnelle zoekfunctie? Neem contact met ons op.

Er bestaat ook een zogenaamde flexible content field waarmee je meerdere layouts kunt aanmaken. Een ideale techniek om een pagina als legoblokken op te bouwen. De pagina kan naar wens ingericht worden door het gebruik van blokken. Juist, soortgelijk aan hoe Gutenberg werkt.

Bij Gutenberg wordt alle content namelijk ook opgesplitst in verschillende contentblokken. Gutenberg bestaat uit een aantal voorgedefinieerde blokken. Denk hierbij aan een paragraaf, een koptekst, een afbeelding of een quote. Hoe vet zou het zijn als we de flexibiliteit van Gutenberg kunnen combineren met Advanced Custom Fields. Ik heb goed nieuws. Met de release van ACF 5.8 is dit mogelijk. 

Eigen Gutenberg blok maken met ACF

Het aanmaken van een custom Gutenberg blok is vrij complex. Het vergt heel wat code om wat gedaan te krijgen. De nieuwe versie van Advanced Custom Fields neemt al dat werk uit handen. Met de functie acf_register_block registreer je een nieuwe blok. Vervolgens koppel je via de UI een velden groep aan deze blok. Deze koppeling werkt exact hetzelfde als de koppeling aan een post type of taxonomy term. Een aandachtspunt is dat deze data niet in de wp_postmeta tabel worden opgeslagen maar direct in de post_content.

Het registreren van een ACF-blok gaat als volgt.

add_action( 'acf/init', 'yourtheme_acf_init' );

function yourtheme_acf_init() {
	if ( ! function_exists( 'acf_register_block') ) {
		return;
	}

	acf_register_block( array(
		'name'            => 'panel',
		'title'           => __( 'Panel', 'yourtheme' ),
		'description'     => __( 'Shows a panel.', 'yourtheme' ),
		'render_callback' => 'yourtheme_acf_blocks_callback',
		'category'        => 'formatting',
		'icon'            => 'admin-comments',
		'keywords'        => array( 'panel', 'block' ),
	) );
}

Een callback functie bepaalt vervolgens de output van het ACF-blok. We maken hierbij gebruik van een generieke callback functie die voor elke ACF-blok gebruikt kan worden.

Met de get_template_part functie bepalen we welke template gebruikt moet worden. Het voordeel van deze constructie is dat de template eenvoudig kan worden overschreven door een child thema.

function yourtheme_acf_blocks_callback( $block ) {
	$block_name = str_replace( 'acf/', '', $block['name'] );

	get_template_part( 'template-parts/blocks/content', $block_name );
}

We maken een nieuwe template genaamd content-panel.php en plaatsen deze in /template-parts/blocks/. De template bevat de code voor het tonen van de ACF data:

<?php

if ( ! function_exists( 'the_field' ) ) {
	return;
}

?>
<div class="panel panel--primary">
	<div class="panel__heading">
		<?php the_field( 'yourtheme_panel_heading' ); ?>
	</div>

	<div class="panel__content">
		<?php the_field( 'yourtheme_panel_content' ); ?>
	</div>
</div>

Op deze manier kan je alle type content ontsluiten en is het beheer ervan een peuleschil.

In het WordPress thema handboek voor ontwikkelaars staan al een aantal methodes beschreven voor het genereren van een POT-bestand. Ze noemen daar momenteel de WordPress i18n tools, Poedit en een Grunt taak. Het is tegenwoordig echter ook mogelijk om met behulp van WP-CLI een POT-bestand te genereren. Persoonlijk vind ik deze methode handiger werken en daarom deel ik deze graag. Het genereren van een POT-bestand kan met de wp i18n commando binnen WP-CLI en wel op de volgende manier:

# Creëer een POT-bestand voor de WordPress plugin/thema in de huidige map
$ wp i18n make-pot .

Voor ons WordPress starters thema Timmy ziet dit er als volgt uit:

Het mooie hiervan is dat WP-CLI ook waarschuwingen geeft in situaties die onduidelijk kunnen zijn voor bijvoorbeeld vertalers. In dit geval gebruiken we de tekst/vertaling %1$s till %2$s namelijk op 2 manieren. Een keer voor de datum en een keer voor de tijd, bijvoorbeeld: “1 september 2018 tot 1 oktober 2018” en “08:30 tot 17:00”. Dat zal hier geen probleem zijn en we kunnen de waarschuwing daarom negeren.

Het gegenereerde POT-bestand kan vervolgens weer gebruikt worden om .PO/.MO-vertaalbestanden te genereren. Hiervoor maken we vaak gebruik van Poedit.

In onze portfolio vind je veel voorbeelden van maatwerk WordPress websites die we hebben ontwikkeld. Alle WordPress thema’s die we ontwikkelen zijn volledig in het Engels geschreven. Via vertaalbestanden vertalen we deze vervolgens netjes naar het Nederlands. Dit heeft als voordeel dat onze WordPress thema’s ook altijd vertaald kunnen worden naar andere talen. Wil je ook een WordPress website laten ontwikkelen neem dan gerust contact met ons op.