Openingstijden is meer dan een tekstblok op je website!
Eén stukje informatie waar je op je website eigenlijk niet buiten kunt is het blokje waarin je openingstijden aangeeft. Niet alleen wanneer je een fysieke winkel heb, maar ook wanneer je hoofdzakelijk online werkt, is het handig wanneer je bezoekers weten of ze je kunnen bezoeken of bellen op dat tijdstip.
Op veel, zo niet de meeste, websites van ZZP-ers en kleine ondernemingen worden de openingstijden weergegeven als een gewoon tekstblok. En dat is natuurlijk heel duidelijk. Maar denk je er ook aan om dat aan te passen, wanneer je even niet bereikbaar bent?
Seizoensgebonden openingstijden
In gebieden met veel toerisme gebeurt het nogal eens dat een winkel of een restaurant seizonsgebonden openingstijden heeft. ’s Zomers zijn de locaties wat vaker en wat langer geopend dan buiten het seizoen. En dat is logisch natuurlijk. Maar wordt dat ook op de website aangegeven? En hoe?
In gesprek met een klant die behoefte had aan ‘openingstijden die zich op de dag zelf aanpasten’ lukte het mij prima om aan de behoefte van de klant te voldoen door een widget met de openingstijden conditioneel te tonen en verbergen. Met Elementor is dat geen enkel probleem. Maar het was ook een eenvoudige situatie, de klant wilde de lente en zomermaanden (voor hem, van 1 april tot 1 oktober) andere tijden laten zien dan tussen 1 oktober en 1 april.
Het zette me aan het denken. Want wat nu, wanneer je een plugin zou hebben, die dynamisch volgens een vooraf ingesteld schema de openingstijden van specifiek deze week zou tonen?
De WXP Openingstijden plugin
En uit deze vraag is de plugin WXP Opening Times geboren. En ik neem deze plugin heel serieus, want hij is onlangs ter evaluatie aangeboden voor de WordPress Repository. Dus over enige tijd kan je hem gratis direct in WordPress installeren. Maar tot die tijd kan je hem ook gewoon hier via deze site downloaden.
Het idee achter de plugin is heel eenvoudig. Je kan per weekdag de openingstijden voor je instelling invullen, en de plugin laat dit netjes op de website zien. Dit ‘laten zien’ kan op dit moment via een Elementor widget, een shortcode of een Gutenberg Block.
Op zich niet revolutionair. Wat wel interessant is, is dat je ‘regels’ aan kan maken, die afwijkingen aan die agenda bepalen. Maar laten we dat eerst eens stap voor stap bekijken.
Gebruiksvriendelijkheid centraal
Omdat -ondanks de uitgebreide mogelijkheden- de basisfunctionaliteit van deze plugin vrij eenvoudig is, besloot ik het beheer voor de plugin uit te voeren als een zogenaamde ‘SPA’. een ‘Single Page Application’. Alle functionaliteit wordt direct geladen en daardoor is de beheersinterface lekker snel.
De taal in de eerste voorbeelden is Engels, maar de plugin zelf beschikt over een Nederlandse, Duitse en Franse vertaling. Omdat ik de plugin ook via de repository aan wil bieden is de ‘basistaal’ Engels.
Meerdere openingschema’s
Het valt misschien niet direct op, maar je kunt met deze plugin meerdere schema’s voor openingstijden aanmaken. Mits ze je wel op dezelfde site gebruikt natuurlijk. Maar waarom zou je dat willen? Terwijl ik druk was met het ontwerp van de plugin kwam ik gelijk een praktijkvoorbeeld tegen, waar een dergelijke functie van toepassing zou kunnen zijn. Op de site van een restaurant stond netjes dat het restaurant van tijd x tot y geopend was, de keuken van x tot z, en afhaal bestellingen tot maximaal tijdstip a doorgegeven konden worden.
Doordenkend over hoe dit in een plugin verwerkt kan worden, kwam ik al snel uit om een groot aantal mogelijke toepassingen:
- Een maatschap van artsen, advocaten, of coaches waar ieder lid van de maatschap zijn eigen dagen en dagdelen heeft, waarop zij of hij bereikbaar is.
- Een website van een bedrijf met meerdere vestigingen.
- Een website van een horeca instelling die andere tijden hanteert voor het restaurant en eventueel bezorgen en afhalen
Hoe dan ook, wanneer je een plugin nodig hebt voor bijhouden van openingstijden met meerdere schema’s kan je ook met deze plugin uit de voeten.
Lunch, siësta en andere tussentijdse sluitingen
De apotheek waar ik mijn medicijnen haal is tussen de middag gesloten. En wanneer ik op vakantie ben in landen waar het tussen de middag toch behoorlijk heet kan worden, heb ik meer dan eens gezien, dat tijdens de heetste uurtjes de winkels ook gesloten zijn. Logisch natuurlijk, je moet wel een zonnesteek hebben opgelopen om op die hete momenten over straat te willen gaan. Alleen een toerist maakt die fout.
Om ook de ‘sluitingstijd tussen de middag’ in te kunnen voeren (wat toch een minimum vereiste is om het ook te tonen op de site) kan je bij iedere dag de tijden in verschillende tijdsblokken invoeren. Dat is ook het idee achter de ‘+’ die je achter een tijdsblok ziet staan. Wil ik een tweede tijdsblok op een dag invoeren, dan zet ik de tijd eerst op de tijd dat de vestiging sluit (voor bijvoorbeeld de lunchpauze) en klik dan op de tijd dat de vestiging weer open gaat.
En mocht het niet duidelijk zijn, met de ‘X’ achter een tijdsblok kan je het blok weer uit de regel verwijderen.
Seizoenssluiting
Misschien gaat jouw bedrijf ’s winters dicht. Of hanteer je ’s winters andere openingstijden. Verkoop je ski-benodigdheden, dan ga je mogelijk ’s winters juist langer open. Wanneer je voor een langere periode afwijkende openingstijden wilt hanteren, is dat heel goed mogelijk. Laten we daarvoor eens naar de knop ‘Set exceptions’ (‘Uitzonderingen instellen’) kijken.
En zoals je ziet in onderstaande afbeelding, ook de Nederlandse vertaling voor de plugin is actief.
Klik ik op de knop ‘uitzonderingen instellen’ komt er een nieuwe sectie op de pagina:
En hier vind je een tweetal ‘soorten’ uitzonderingen. Een periode gebaseerde uitzondering, en een feestdag gebaseerde uitzondering. Laten we eerst naar de periodes kijken.
Hierboven is er een regel ingegeven, dat in de periode van 1 oktober 2026 tot 1 april 2027 de winkel van 9 tot 17 uur geopend is op maandagen, dinsdagen en woensdagen. De andere dagen van de week blijven de openingstijden hetzelfde. Op deze manier kan je eenvoudig openingstijden die afwijken voor een specifiek seizoen invoeren, waardoor de bezoeker altijd de juiste openingstijden te zien krijgt.
Let op! Wanneer je gebruik maakt van een caching die hele pagina’s cachet, krijgt de bezoeker zolang de cache niet verlopen is de oude informatie te zien. Het is geen goed idee om een meerdaagse caching periode in te stellen wanneer je gebruik maakt van deze plugin. In een toekomstige versie wordt dit opgelost.
Feestdagen
Er wordt heel wat afgefeest in deze wereld (gelukkig). Het is goed de belangrijke momenten te herdenken. Het is dus vrijwel onmogelijk om alle feestdagen op de nemen in deze plugin. En daar heb ik dus op voorhand rekening mee gehouden door de plugin van een ‘hook’ te voorzien, waarmee add-ons ‘extra feestdagen’ toe kunnen voegen. De plugin zelf geeft een aantal westers-seculiere en de meeste Christelijke feestdagen aan.
Het probleem met feestdagen is dat er vaak een berekening achter de datum zelf zit en met name bij niet-Westerse feestdagen een andere dan de Gregoriaanse kalender. Vandaar is er in de plugin gekozen om het toevoegen van feestdagen via een add-on te doen, in plaats van een tabel.
Eén add-on wordt ook via WP Digital Marketing beschikbaar gesteld, een add-on met de Joodse en Islamitische feestdagen. Voor feestdagen uit andere culturen verwijs ik programmeurs graag naar deze add-on, om inzicht te krijgen hoe een kalender met afwijkende feestdagen geïmplementeerd kan worden.
Met feestdagen zijn er twee mogelijkheden: Je wilt sluiten, of je wilt juist langer open zijn. Een mooi voorbeeld is Oudejaarsavond. Sommige cafés gaan vroeger dicht, andere blijven juist langer open, om samen oud-en-nieuw te vieren.
Aan de kant van de website
Zoals al aangegeven, je kan het overzicht met openingstijden op drie manieren zichtbaar maken op je website: Via een Elementor widget, via een Gutenberg block of via een shortcode. De widget en het block wijzen zichzelf, via de instelmogelijkheden.
Hieronder tref je de documentatie over de shortcode uit de ‘readme’ documentatie aan.
`[wxp_opening_times]`
Attributes:
* `schedule` - id of the schedule, shown in the admin (default: the first schedule).
* `template` - `default` (week table) or `compact` (one line), or a template from your theme.
* `show_status` - `yes` or `no`: the Open/Closed badge (default yes).
* `show_title` - `yes` or `no`: the schedule name as a heading (default no); `heading_level` sets the level (2-6, default 3).
* `show_dates` - `yes` or `no`: the date next to each weekday (default no).
* `week_nav` - `yes` or `no`: previous/next week buttons (default no); `weeks_ahead` sets how far visitors can look ahead (0-26, default 4).
* `text_closed`, `text_open`, `text_separator`, `text_open_until`, `text_closed_opens` - other words for this block only, for example `text_closed="Absent"`. They win over the texts set for the schedule in the admin. Use `{time}` in the last two for the time.Weergavetemplates
Om de vormgever maximale flexibiliteit te geven maakt WXP Opening Times gebruik van templates voor de uitvoer. Hierbij is gekozen voor Twig templates. Twig is een ’template engine’ waarmee een ontwikkelaar in principe op eenvoudige wijze templates voor uitvoer van dynamische gegevens kan maken.
Standaard is de plugin voorzien van twee templates ‘Default’ en ‘compact’. Default laat de openingstijden voor een hele week zien ‘compact’ alleen de situatie voor vandaag.
Presentatie van datum en tijd zijn afhankelijk van de formaatinstellingen voor datum en tijd op je website.
Hieronder zie je wat je te zien krijgt wanneer je het ‘Default’ template bekijkt:
Navigatieknoppen
Het aardige van deze openingstijdentabel, is dat hij ook navigeerbaar is. In de instellingen bepaal je hoeveel weken de bezoeker vooruit mag kijken.
Je openingstijden in zoekresultaten?
En dan nu als klap op de vuurpijl, wat heeft deze plugin nog meer te bieden? Heb jij je weleens afgevraagd waar die informatie vandaan komt over de openingstijden van de supermarkt bij jou in de buurt? Die wordt gelezen uit de ‘JSON-LD’ gegevens die wel of niet op je site voorkomt. En standaard is dit dus niet. JSON-LD is extra informatie over jouw openingstijden die door zoekmachines wel of niet kunnen worden gebruikt. Door deze informatie beschikbaar te stellen, is er een grote kans dat deze informatie ook bij de vermeldingen van je bedrijf op worden genomen.
Door in de shortcode ‘schema=”yes”‘ als parameter mee te geven, of in het de widget of het block aan te geven dat je ‘gestructureerde gegevens voor zoekmachines’ wilt gebruiken, kan je deze gegevens opnemen in een pagina. Wel één waarschuwing: Gebruik dit slechts eenmaal per pagina voor de openingstijden die daar het belangrijkst zijn. Zijn er meerdere schema’s met ‘JSON-LD’ gegevens over openingstijden zal het als een fout in de pagina gezien worden, en wordt het genegeerd.
Aan de slag?
Zoals aangegeven, ik ben de procedure ingestapt om deze plugin gepubliceerd te krijgen op de WordPress site. Dat kan even duren. Maar tot die tijd kan je de plugin ook hier downloaden. Omdat de plugin nog geen onderdeel uitmaakt van de repository, zal je geen automatisch bericht krijgen, wanneer er updates zijn. Daarom vind ik het wel belangrijk, dat ik je op de hoogte kan houden.
Door je email adres hier achter te laten kom je op een tijdelijke mailinglijst te staan. Deze mailinglijst wordt alleen gebruikt om te communiceren over de WXP Opening Times plugin. Over niets anders! Je kan je altijd uitschrijven. Na aanmelding en bevestiging krijg je een email bericht met een tweetal download links. Eén voor de plugin zelf, en één voor de add-on. Mochten er nieuwe versies komen voor de plugin wordt goedgekeurd voor de repository, dan ontvang je hier bericht over, zodat je altijd een nieuwere versie kan downloaden.
Dit is een gratis plugin. En dat zal het ook blijven. Er zal ook geen ‘premium’ of ‘plus’ of wat voor andere betaalde versie van deze plugin komen. Wel is er een viertal andere plugins in voorbereiding die binnenkort ook geïntroduceerd zullen worden.
Wil je van alle activiteiten van WP Digital Marketing / WordXPression op de hoogte blijven, meld je dan ook aan voor de nieuwsbrief onder aan de pagina.
