Wordcamp Utrecht 2019
•
0 likes•609 views
effectief communiceren door middel van gericht presenteren van gegevens die aansluiten bij de behoeften van de doelgroep
Recommended
More Related Content
Similar to Wordcamp Utrecht 2019
Similar to Wordcamp Utrecht 2019 (20)
More from Peter Luit
More from Peter Luit (20)
Wordcamp Utrecht 2019
- 1. workshop pods effectief communiceren door middel van gericht presenteren van gegevens die aansluiten bij de behoeften van de doelgroep door Peter Luit peter@luit.nl
- 2. Peter Luit offline en online advies en realisatie sinds 1993 presentatie ontvangen? geef je e-mail adres en je krijgt de presentatie opgestuurd!
- 3. even in kaart brengen • wie heeft wel eens gehoord van custom post types en/of custom fields? • wie heeft wel eens ‘iets’ gedaan met custom post types en/of custom fields? • wie heeft een complete oplossing gebouwd met custom post types en/of custom fields?
- 4. even in kaart brengen • wie ziet zichzelf als beginner? • wie ziet zichzelf als gevorderd? • wie ziet zichzelf als specialist?
- 5. wie ben ik? • van oorsprong technisch/organisatorisch adviseur in media workflows • vooral techneut en dus geen creatief ontwerper • ik schrijf graag artikelen over relevante marktontwikkelingen • een leuke mix tussen uitgever en webs&apps ontwikkelaar
- 6. de komende 180 minuten • introductie, speelveld, gereedschappen, relaties • voorbeeld case • oefening • introductie in Pods • demo • templates maken met Beaver Builder pagebuilder en Beaver Themer • demo • bronnen • Q&A
- 7. hoe dan verder? • veel proberen door het te doen • je wordt in 3 uurtjes dus geen specialist • WordPress applicaties maken met relationele gegevens structuren, is niet iets voor ‘even tussendoor’ • kies duidelijk positie in je marktbenadering om dit soort klussen aan gaan te bieden
- 8. stukjes van het speelveld • Custom Post Type UI • Toolset • Meta Box • Pods • Advanced Custom Fields (PRO) • Beaver Themer focus van deze workshop
- 9. stukjes van het speelveld focus van deze workshop
- 10. denken in processen bedrijven hebben klanten, processen, diensten/ producten en medewerkers - op welke wijze kunnen deze hieruit voortvloeiende datastromen effectief worden weergegeven?
- 11. samenhang/relaties een vakbeurs heeft evenementen, standhouders, sponsors en deelnemers
- 12. samenhang/relaties een drukkerij heeft productiemiddelen, cases en specialisten
- 13. samenhang/relaties een opleider heeft cursussen, trainers, lokaties en cursusdata
- 14. WordPress heeft in basis ‘alleen’ berichten en pagina’s
- 15. blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla over ons producten medewerkers contact berichten en pagina’s blablabla ons nieuws blablabla blablabla blablabla blablabla
- 16. berichten kaartenbak • berichten zijn als het ware een ‘kaartenbak’ • maar elke kaart wordt volledig opnieuw ingevuld • bij elke ‘cursus’, die door een docent wordt gegeven, moeten de gegevens van de docent steeds weer op elke kaart terugkomen
- 17. berichten kaartenbak bericht workshop pods deze workshop gaat over ………… de workshop wordt gegeven door Peter Luit, gegevens: peter@luit.nl tel.: 06-20709846 bericht 2 pods voor gevorderden deze workshop gaat over ………… de workshop wordt gegeven door Peter Luit, gegevens: peter@luit.nl tel.: 06-20709846
- 18. digitale kaarten en relaties velden worden ‘opgehaald’ cursus 1..n workshop pods deze workshop gaat over de basis van pods veld naam trainer back-end cursus 1..n workshop pods deze workshop gaat over de basis van pods peter@luit.nl 06-20709846 front-end Peter Luit trainer 1..n veld naam trainer deze trainer is gespecialiseerd in veld e-mail trainer veld tel. nr. trainer back-end gekozen veld in back-end
- 19. groepjes kaarten • in een kaartenbak kan je groepjes kaarten maken, bijvoorbeeld het groepje ‘workshops’ en het groepje ‘cursus voor gevorderden’ • dat zijn zogenaamde metadata (gegevens over groepjes), ook wel taxonomies genoemd
- 20. taxonomies bij berichten ‘filteren’ van berichten blablabla blablabla blablabla blablabla blablabla ons nieuws
- 21. standaard taxonomies • categorie: te zien als ‘soort’ bericht • tag(s): te zien als ‘sleutelwoord(en)’ puur technisch gezien is er geen verschil tussen categorie en tag, behalve dat categoriën hiërarchisch kunnen zijn
- 22. ‘gewoon WordPress’ berichten pagina pagina 1 categorie/tag pagina 2 pagina 3 bericht
- 23. gegevens structuren tabel producten tabel cases relatie case relatie product tabel teamleden relatie team relatie case productsoorten doelgroepen
- 24. demo https://www.velsenaanzee.nl compleet met uitleg op de website ter inspiratie
- 25. custom post types (cpt) en custom fields
- 26. cpt en custom fields post custom post ‘cursussen’ titel cursus naam blog inhoud omschrijving cursus contactpersoon straat en nummer postcode plaats tel. nr. custom fields ] samenvatting samenvatting
- 27. custom post types (cpt) • de basis van een CPT heeft (in principe) net zoals een gewone ‘post’ een ‘titel’ en een ‘inhoudsblok’ als basisvelden
- 28. custom fields in WordPress • custom fields bestaan al heel lang in WordPress, maar werden vanuit de basis niet of nauwelijks gebruikt door ‘gewone’ web bouwers
- 30. niet populair • custom post types bestaan al sinds WordPress versie 3.0 • hoofdzakelijk gemaakt voor plugin- en thema ontwikkelaars • WooCommerce, Events Manager e.v.a. • met de komst van plugins rondom deze technieken worden ze ook door ‘gewone’ website ontwikkelaars gebruikt
- 31. cpt voorbeeld
- 33. custom fields • bijvoorbeeld een datumveld en een tijdveld voor het invoeren en bekijken van cursusdata • of een veld voor het kiezen van exposanten die deelnemen aan een beurs
- 34. veld of taxonomy? • gebruik een taxonomy als de keuze eenduidig is voor elke post
- 35. veld of taxonomy? • naam van een cursist is niet eenduidig, dus een veld • de naam/titel van een cursus is ook een veld • het type industrie van een deelnemer aan een beurs is echter een taxonomy • de doelgroep sector van een beurs is ook een taxonomy
- 38. website stripdown • Beaver Builder Theme, childtheme • Admin Columns Pro • Beaver Builder Plugin (Pro Version) • Beaver Themer • Pods - Custom Content Types and Fields • Pods Gravity Forms Add-on • Pods Beaver Themer Add-on • PowerPack for Beaver Builder (add-on)
- 39. wat gaan we bekijken? • welke custom post types zitten er in deze oplossing? • in het bijzonder kijken we naar ‘events’ en ‘exhibitors’ • we kijken naar de relationele koppeling • tot slot kijken we naar front-end en back-end weergave
- 40. nadenken over relaties even location street&number postcal code city surface contactperson e-mail address website events exhibitors exhibitors more information form booking form phone events video new products/services
- 42. oefening: 15 minuten field custom post type 1 custom post type 2 ? field field field field field field field field field field field field
- 43. voorbereiding • dit soort opdrachten vereisen een gedegen voorbereiding van de op te zetten custom post types en custom velden • je moet als het ware in de business kruipen van je opdrachtgever om de gewenste (communicatie) processen te snappen • consultancy dient dus betaald onderdeel te zijn van creatie- en productieproces
- 44. bedenk zelf toepassing • definieer minimaal twee custom post types voor een bestaande of denkbeeldige opdrachtgever • bepaal de te gebruiken velden per CPT • bepaal in de tabellen het ‘bidirectionele relationele veld’
- 45. voorbeeld ter inspiratie titel boeken auteurs waar ligt de relatie? isbn samenvatting uitgever auteur prijs field field biografie boeken naam field field
- 47. voorbeeld ter inspiratie • je bent op de post van een boek • daar kan je zien welke auteur(s) heeft/hebben meegewerkt aan dat boek • je bent op de post van een auteur • daar kan je zien welk(e) boek(en) die auteur heeft geschreven
- 48. voorbeeld ter inspiratie post van een auteur oceanen boek biografie jan de vries boek bossen treinen boek jan de vries piet jansen irma van drie jan de vries jan de vries saskia spelt oceanen bossen treinen posts van boeken
- 49. aan de slag met Pods
- 50. basis workflow Pods • je hebt een duidelijke database structuur • je maakt eerst je CPT’s met mogelijke instellingen • daarna maak je je velden en relaties • je maakt afhankelijk van je structuur je taxonomies • afhankelijk van je thema en pagebuilder maak je je layouts
- 51. stap 1: maak CPT
- 52. stap 2: CPT ‘boek’
- 53. na aanmaak CPT ‘boek’
- 54. stap 3: velden maken
- 55. stap 3: velden maken
- 56. stap 4: labels bewerken
- 57. stap 4: labels bewerken
- 58. het resultaat
- 59. settings page • ideaal voor zogenaamde ‘global’ variabelen
- 60. settings page
- 61. settings page
- 62. demo
- 63. wat is Beaver Themer
- 64. add-on voor Beaver Builder • Beaver Builder is een interactieve pagebuilder voor WordPress • Beaver Themer is een interactieve template generator voor: • archief pagina’s • single post pagina’s • 404 pagina • zoek resultaten • maken van ‘parts’ zoals header en footer • weergeven van custom fields vanuit (custom) posts
- 65. templates in WordPress • maken deel uit van het gekozen thema • thema ontwikkelaar bepaalt functionaliteit en look&feel • zijn ontwikkeld in PHP • dus leercurve met PHP kennis
- 68. templates in WordPress header footer body: - overzicht blogposts - afzonderlijke blogpost - pagina sidebar basisindeling voor veel thema’s
- 69. templates in WordPress header footer de vormgeving van het body gedeelte wordt bepaald door een zogenaamd template sidebar basisindeling voor veel thema’s
- 70. templates in Pods • stukken eenvoudiger dan in PHP • eigen soort scripttaal • met beetje HTML inzicht makkelijk(er) te leren
- 72. templates zonder code • we willen helemaal niet coderen • custom post types en custom fields zouden net zoals gewone posts en pages makkelijk weer te geven moeten zijn • dat kan nu met Beaver Themer • en misschien straks ook met Gutenberg…….
- 75. elk blok wordt gevuld met de inhoud van een veld
- 76. elk blok wordt gevuld met de inhoud van een veld
- 77. workflow overzicht Pods: maak CPT(’s), velden en taxonomies Pods Themer add-on: maak archief en single post templates maak data records door creating custom posts aan te maken weergave archief pagina, kies een record voor weergave individueel record back-end front-end met Beaver Builder en Beaver Themer (drag&drop) back-end of via Pods Gravity Forms add-on via de front-end (draft) front-end gebruikers niveau maak het Entity Relations Diagram tekening op papier een techneuteen analist een ontwerper klant website bezoeker
- 78. inhoud van de demo • de Pod ‘events’ gaan bekijken qua opbouw velden • de opzet van de ‘events’ posts bekijken, hoe maak je een ‘event’ record aan? • template bekijken, hoe maak je het weergeven conditioneel? • tot slot de weergave van een ‘event’ aan de voorkant
- 80. zinvolle bronnen
- 81. genoeg te ontdekken • Beaver Builder https://www.wpbeaverbuilder.com • Beaver Themer: https://www.wpbeaverbuilder.com/ beaver-themer/ • Pods: https://www.pods.io • Pods Beaver Themer Add-on: https://wordpress.org/ plugins/pods-beaver-builder-themer-add-on/
- 82. genoeg te ontdekken • facebook groepen, o.a. • https://www.facebook.com/groups/podsacfthemer/ • https://www.facebook.com/groups/beaverbuilders/
- 84. vragen en antwoorden presentatie ontvangen? geef je e-mail adres en je krijgt de presentatie opgestuurd!