Wordpress in website met Publieke api

Met WordPress kun je je eigen website maken. Zie ook https://nl.wordpress.com. 

Planaday heeft een Wordpress plugin ontwikkeld waarmee het eenvoudig mogelijk is om de cursussen vanuit jouw Planaday omgeving te tonen in jouw Wordpress website. Inclusief inschrijven voor de bezoeker op een cursus.

Eerste stappen

1. Zorg dat er een publieke API is aangemaakt in jouw Planaday. Deze is nodig om vanuit Wordpress Plugin te communiceren met Planaday. Zie ook dit artikel.
2. Activeer de API. Zie ook dit artikel

Wordpress plug-in installeren

1. Installeer de plug-in in Wordpress (eenvoudige manier):
   1. Kies voor 'Plugins' via /wp-admin
   2. Klik op de button nieuwe plug-in
   3. Vul bij 'Trefwoord' rechts 'Planaday' in
   4. Klik op installeren
   5. Klik vervolgens op activeren
   6. Als de plugin is geinstalleerd, kies dan voor plugin activeren als deze op de juiste manier en goed is geinstalleerd
2. Download de Planaday Wordpress plugin hier en sla deze op (op je laptop/pc) of zoek deze via 'plugins' in Wordpress zelf (als stap 1 niet werkt voor jouw omgeving).
   1. Kies voor 'Plugins' via /wp-admin
   2. Klik op de button nieuwe plug-in
   3. Klik op button plug-in uploaden
   4. Blader naar bestand dat in eerste stap is gekozen en klik op nu installeren
   5. Klik vervolgens op activeren
   6. Als de plugin is geinstalleerd, kies dan voor plugin activeren als deze op de juiste manier en goed is geinstalleerd

Instellen van plug-in in Wordpress

1. Vul bij url de url van de api in. Is jouw omgeving https://demo.planaday.nl, dan is de api: https://demo.api.planaday.nl
2. Vul bij key de API-key in welke je zelf kunt genereren, zie ook 'eerste stappen' hierboven of lees hier hoe dat moet.
3. Beantwoord de rest van de vragen bij 'Instellingen' zoals:
   1. De bedankttekst voor bezoekers als deze zelf heeft geboekt.
   2. Emailadres waarop je optioneel de aanmeldingen toegemaild krijgt.
   3. Geef (vanaf versie 2) aan of er online betaald moet worden (lees hier alles over iDeal betalingen in deze plug-in).
   4. Stel zelf in welke optie je wel en niet wil laten tonen bij Instellingen voor zoeken, Cursus instellingen (overzichten) en (details) en (calendar). 
   5. Stel in welke velden je wil laten zien bij het boeken.

Handige checks

De pagina's Instellingen (en betalingen) zijn voorzien van een venster met 'checks'. Deze vind je bovenaan bij instellingen of betalingen. 

Deze checks controleren of alles wel ingevuld is en geven daar waar nodig tips.

Pagina's inrichten en shortcode(s) maken

Cursusaanbod pagina

Om de plug-in te laten werken moet er tenminste één pagina zijn waarop je je cursusaanbod laat zien. Dit kan worden getoond in een lijst, blok of tabel. Je kunt de keuze maken om alle cursussen te laten zien of van een bepaalde cursussjabloon. 

Optioneel kun je een limiet opgeven qua vooruit kijken welke cursussen worden getoond. Zo kun je alle cursussen laten zien van één cursussjabloon (voorbeeld enkel 'ehbo training') en dan alles vanaf nu tot over 4 maanden. 

Enkel de cursussen waarvan alle dagdelen gepland zijn en waarvan de cursus op 'open' staat worden getoond.

Tip: maak per cursussoort een pagina aan. Plaats op iedere pagina een shortcode voor die specifieke cursussjabloon/cursussoort. Op die manier geef je je bezoeker een overzichtelijk aanbod van jouw cursussen.

Voorbeeld shortcode

Alle cursussen laten zien in block vorm:

[courselistblock start=now end=+6months]

Alle cursussen laten zien in block vorm van cursussjabloon 2:

[courselistblock start=now end=+6months templateid=2] 

Cursusdetails & optioneel boeken pagina

Als de bezoeker een bepaalde cursus heeft gevonden, dan kan deze de cursus bekijken door te klikken voor de details.

Dus moet er een pagina komen die de gekozen cursus in detail laat zien met hieronder optioneel een formulier waarmee de bezoeker zichzelf kan aanmelden voor de gekozen cursus.

Voorbeeld shortcode detailpagina

Toon de cursus zonder boekingformulier

[pad-course]

Toon de cursus met boekingformulier

[pad-course]

[pad-bookingform]

Stap voor stap

1. Maak één of meerdere pagina's aan voor overzicht van de cursussen. Op deze pagina plaats je de shortcode: [courselistblock], [courselisttable] of [courslistlist]. (dus kies één van deze opties)
   1. Iedere shortcode heeft eigen eigenschappen qua layout en hoe dit gepresenteerd wordt.
   2. Let op: je kunt ook per cursussoort een overzicht maken met enkel dat overzicht. Gebruik dan templateid in je shortcode. Zie ook hieronder voorbeelden.
   3. Plaats bijvoorbeeld [courselistblock start=now end=+4months templateid=1] om alle cursussen vanaf nu tot en met over 4 maanden te tonen van cursussjabloon 1.
      
2. Maak één pagina aan met shortcode: [pad-course]. Deze pagina zal de details van de cursus bevatten.
   Plaats op deze pagina (optioneel!) ook de shortcode [pad-bookingform] als je wil dat bezoekers zichzelf kunnen aanmelden.
3. Maak eventueel een pagina aan met de shortcode: [coursecalendar]. Deze pagina bevat een kalender met alle cursussen die x maanden vooruit kijkt. Hoe meer maanden, hoe langer het laden zal duren.

Shortcodes en voorbeelden

Alle shortcodes die je kunt gebruiken en van toepassing zijn voor jouw Planaday en Wordpress staan in een aparte 'tab' in jouw Planaday plugin (enkel als url en apikey ingevuld zijn!). Kies hiervoor Planaday > Support > tabblad 'Shortcodes':

Je kiest altijd bij een overzicht voor courselist en de soort. Dus overzicht met blokken is courselistblock. 

Iedere shortcode kun je uitbreiden met:

• start
• end
• templateid

Voorbeelden:

• [courselistblock start=now end=+2months] geeft een overzicht van cursussen terug voor de komende 2 maanden
• [courselistlist start=now end=+3months] geeft een overzicht van cursussen terug voor de komende 3 maanden
• [courselisttable start=now end=+3months] geeft een overzicht van cursussen terug voor de komende 3 maanden
• [courselisttable start=now end=+3months templateid=1] geeft een overzicht van cursussen van cursussjabloon 1 terug voor de komende 3 maanden
• [coursecalendar start=now end=+3months] geeft een calender terug
• [pad-course] geeft detail pagina terug met details van de cursus. Op die pagina kan optioneel [bookingform] staan om het boekingsformulier te tonen
• [coursesearch] geeft een zoekformulier. Plaats deze op een aparte pagina.
• [planadaybedankt] is de pagina waarop je een dank kan geven. Vermeld op die pagina wat de klant kan verwachten.
  
  

Betalen bij boeken van cursus

Om betalingen te kunnen activeren moet je gebruik maken van betalingsprovider Mollie en dient ook de plug-in Paytium te worden geïnstalleerd. 

De acties die je hiervoor moet ondernemen hebben wij in een apart artikel beschreven. Lees artikel

Let op: Het is altijd voor alle cursussen actief om te betalen of niet. 

Widgets

Er zijn 2 widgets gemaakt:

1. Cursusdetails
2. Cursus zoeken

Cursusdetails

Cursusdetails kun je in je sidebar plaatsen. Deze wordt enkel getoond (als deze is geplaatst) als er een cursus wordt getoond.

In deze widget kun je  optioneel aangeven welke onderdelen je wil tonen. 

Cursus zoeken

Deze widget geeft je een zoekformulier in je sidebar. Optioneel kun je een titel meegeven.

Indien een bezoeker gaat zoeken, dan gaat de zoekresultaten naar de pagina waarin shortcode [coursesearch] staat.

Layout & CSS

Alle elementen in de overzichten, de details en het boekingsformulier etc zijn opgemaakt in CSS.

Deze zijn aan te passen. Zo kun je kleuren, lettertypes etc aanpassen als je dat zou willen.

• Ga hiervoor naar Plugins en kies hier voor Planaday-api
• Kies voor 'CSS' tabblad
• Na jouw wijzigingen klik je op 'Alle instellingen opslaan'.

Tip over CSS vind je bijvoorbeeld hier

Hoe plug-in omgaat met Email en welke acties er volgen

Enkel cursist gevuld

• boeking in PAD met BoekingID
• cursist mailen 
• opleider mailen 

Bedrijf + 1 cursist aangemeld (meer kan niet)

• boeking in PAD met BoekingID
• cursist(en) niet mailen
• opleider mailen 
• bedrijf mailen 

Voorbeeld cursussen op een pagina

Er is een demo website waarop voorbeelden staan. Dit is een volledige werkende website ontwikkeld met Wordpress.

Op deze website zie je diversen voorbeelden. Ga hiervoor naar: http://www.planademo.nl

En bekijk hier diversen pagina's bij onder Wordpress plugin. Deze geeft een goed beeld van de mogelijkheden.

Tevens wordt op de betreffende pagina verteld wat jij moet invullen in jouw wordpress website.

Voorbeeld Plug-in in Wordpress

Instructievideo

Meer informatie:

• Bekijk demo omgeving van cursus aanbod op onze demowebsite: https://www.planademo.nl 
• Betalingen in Wordpress Plugin (instellen), lees artikel (nieuw sinds versie 2.0)
• Betalingen inzien, zie hier (nieuw sinds versie 2.0)