Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Starten met een eigen WordPress website
versie 3.0 - maart 2016

door @peterluit
1
Voor wie bedoeld
• eerste kennismaking met het zelf ‘bouwen’ van een WordPress weblog/
website

• in aanvang (!) geen of (...
Programma omvat 3 delen, globale inhoud
• deel 1: introductie, content (de basis)

• deel 2: vervolg content en menu’s

• ...
WordPress
1. wat is WordPress
4
Wat doen we vanmiddag doen?
• wat is WordPress en wat voor typen websites kan je ermee maken?

• voorbeelden

• hoe instal...
Wat is WordPress?
• volledig opensource

• wereldwijd enorme grote (on-line) ontwikkelaars- en gebruikers communities

• c...
Een paar WordPress toepassingen
• eenvoudige weblog (zo begon WordPress)

• volledige nieuwswebsites (met redactie systeem...
• de ‘concurrenten’
WordPress in Google Trends
8
WordPress downloads: kijk zelf eens
http://wordpress.org/download/counter/
9
Principe van de WordPress installatie
• download de .zip file vanaf http://nl.wordpress.org en pak deze uit

• zorg voor ee...
De achterkant van WordPress: een (!) dashboard
11
Inhoud: pagina’s en berichten - de verschillen
bla bla bla bla bla bla
bla bla bla bla bla bla
bla bla bla bla bla bla
bla...
Berichten in volgorde van tijd (weblog):
nieuwste
oudste
tijdlijnberichten
bestemd voor ‘dynamische’ informatie
- onder el...
Pagina’s en berichten beiden in WordPress
WordPress kent beide typen ‘inhoud’
dus ‘pagina’s’ en ‘berichten’
bla bla bla bl...
‘custom post types’ (*)
15
• WordPress als volwaardig CMS, voor bijvoorbeeld:

• evenementen - datum, lokatie, tijstip etc...
WordPress - menustructuur: toegang tot inhoud
bla bla bla bla bla bla
bla bla bla bla bla bla
bla bla bla bla bla bla
bla ...
WordPress - thema, vormgeving, sidebars, menu
*
*
(body)
inhoud:
bericht(en)
of pagina
1 2 3
2a
2b
*
*
*
*
*
* mogelijkhed...
WordPress - widgets: inhoud van sidebars
....
....
1 2 3
2a
2b
- widgets zijn afzonderlijke stukjes in sidebars
- een widg...
WordPress - header/footer (boven- en onderzijde)
1 2 3
2a
2b
header en footer grootte/positie
(body)
inhoud:
bericht(en)
o...
(body)
inhoud:
bericht(en)
of pagina
WordPress - plug-ins (extra functies)
wordpress kern
plugin
plugin
plugin
plugin
1 2 ...
thema
WordPress - thema: overall look&feel
plugin
plugin
plugin
plugin
plugin
1 2 3
2a
2b
(body)
inhoud:
bericht(en)
of pa...
WordPress
2. voorbeelden indelingen websites:



• header, menu, footer, sidebar(s), body
22
Voorbeeld: libelle.nl
23
Voorbeeld: koffietijd.nl
24
Voorbeeld: autoblog.nl
25
Voorbeeld: grazia.nl
26
Voorbeeld: hpdetijd.nl	
27
Voorbeeld: viva.nl (jaar geleden)
28
Voorbeeld: viva.nl (nu)
29
WordPress
3. oefenen met de ‘leeromgeving’ - mijnnieuwsmarkt.nl
30
Ga naar http://www.mijnnieuwsmarkt.nl/
Oefening: ga naar de ‘studenten portal’
31
Belangrijk: zelfstudie inhoud!
32
• De weblog op ‘mijnnieuwsmarkt.nl’
Ga naar http://www.mijnnieuwsmarkt.nl/werksitex/wp-admin (x = 1..8)
Inloggen: de ‘achterkant’ van WordPress
33
gebruikerx
...
Ga naar http://www.mijnnieuwsmarkt.nl/werksitex (x = 1..8)
Oefening: kijken waar een paar elementen staan
34
menu
body
sid...
Ga naar http://www.mijnnieuwsmarkt.nl/werksitex/wp-admin (x = 1..8)
Oefening: het ‘dashboard’ (kale versie)
35
plaats van
...
Plugins kunnen zorgen voor meer blokken op het dashboard
Oefening: het ‘dashboard’ (met extra modules)
36
plaats van
blokk...
De linker kolom kan na installatie van plugin en/of thema’s
Oefening: het ‘dashboard’ - de functies
37
basis functies
na i...
WordPress instellingen
38
• Onder ‘instellingen’ staan de belangrijkste basiswaarden voor de werking van
je website

• alg...
WordPress
4. de zoektocht naar de juiste vormgeving
39
Begin eenvoudig: leer eerst de structuur
40
• Vorm en inhoud kunnen onafhankelijk van elkaar bewerkt worden

• Een ander t...
Oefening: bezoek één van deze sites
41
• Betaalde themes (meer support, meer updates, vaak beter geschreven,

over het alg...
Zelf themes maken (*)
42
• Vraagt (redelijk veel) kennis van PHP, SQL, CSS en HTML

• PHP - programmeertaal die HTML gener...
Parent- en childthemes (*)
43
• Een Parent Theme bevat de basis

• Een Child Theme bevat alléén jouw aanpassingen

• voord...
WordPress - Parent- & ChildTheme (*)
plugin
plugin
plugin
plugin
plugin
1 2 3
2a
2b
inhoud:
bericht(en)
of pagina
44
wordp...
Oefening: een geïnstalleerd thema kiezen
45
Oefening: een geïnstalleerd thema activeren
46
1
activeren van een
thema verandert de
gehele look&feel van
een website
Een thema moet je leren kennen, dat kost tijd!
47
Werken met content
5. De basis
48
Berichten maken, welke elementen
• titel (en permalink)

• de inleiding van je verhaal

• waar is het blok ‘samenvatting’ ...
Pagina’s en keuzes voor de homepage
• herhaling verschillen tussen berichten en pagina’s

• je eerste pagina maken

• je h...
Volgorde
51
Titel van je bericht
52
Permalink belangrijk voor Google!
53
Inleiding kort en bondig: plaag om door te lezen!
54
Samenvatting is voor RSS feed, meestal inleiding
55
‘Verder lezen…’ na de eerste alinea
56
• selecteer een woord of meerdere woorden in de tekst als bron voor de link

• selecteer het kettingsymbool

• het scherm ...
En publiceren (meerdere opties)
58
Volgorde
59
Bericht en mogelijkheid tot reageren
60
Huiswerk: maak een paar berichten
5. Bestudeer de inleiding ‘Toelichting bij eerste huiswerkopdracht’ en ga
vervolgens aan...
Volgorde
62
Volgorde
63
Volgorde
64
Volgorde
65
Upcoming SlideShare
Loading in …5
×

Online usability - les 1 introductie WordPress - structuur en content

569 views

Published on

Online usability - les 1 introductie WordPress - structuur en content

Published in: Education
  • Be the first to comment

Online usability - les 1 introductie WordPress - structuur en content

  1. 1. Starten met een eigen WordPress website versie 3.0 - maart 2016 door @peterluit 1
  2. 2. Voor wie bedoeld • eerste kennismaking met het zelf ‘bouwen’ van een WordPress weblog/ website • in aanvang (!) geen of (zeer) beperkte technische kennis van
 PHP, SQL, HTML, CSS • nieuwsgierig naar de mogelijkheden en graag (zelf) willen experimenteren • aanbevolen: beetje gevoel voor ‘look & feel’ • geen paniekgevoel krijgen als het niet meteen lukt..... ;-) • in deze training hier en daar een (*)….. 2
  3. 3. Programma omvat 3 delen, globale inhoud • deel 1: introductie, content (de basis) • deel 2: vervolg content en menu’s • deel 3: thema’s, widgets en plugins 3
  4. 4. WordPress 1. wat is WordPress 4
  5. 5. Wat doen we vanmiddag doen? • wat is WordPress en wat voor typen websites kan je ermee maken? • voorbeelden • hoe installeer ik zelf WordPress? • wat is het dashboard? • wat is er allemaal in te stellen? • wat zijn thema’s? • onze eigen werkomgeving • huiswerk 5
  6. 6. Wat is WordPress? • volledig opensource • wereldwijd enorme grote (on-line) ontwikkelaars- en gebruikers communities • ca. 25% alle websites wereldwijd ‘draaien op’ WordPress • grote hoeveelheden plugins • grote hoeveelheden vormgevings thema’s • in basis/aanvang redelijk makkelijk te leren (geen complexe leercurve) 6
  7. 7. Een paar WordPress toepassingen • eenvoudige weblog (zo begon WordPress) • volledige nieuwswebsites (met redactie systeem) • webshops (bekijken, kopen, afrekenen) • leden websites/communities (met inloggen leden) • vraag en antwoord (forum) • etc. etc. 7
  8. 8. • de ‘concurrenten’ WordPress in Google Trends 8
  9. 9. WordPress downloads: kijk zelf eens http://wordpress.org/download/counter/ 9
  10. 10. Principe van de WordPress installatie • download de .zip file vanaf http://nl.wordpress.org en pak deze uit • zorg voor een hostingpakket bij een provider welke SQL en PHP ondersteunt (resp. de database en de programmeertaal waarop WordPress is gebaseerd) • plaats alle WordPress files in de toegewezen map via FTP • maak een database en een gebruikersnaam aan • start de installatie met http://www.xxxxxx.nl/ • log in met http://www.xxxxxx.nl/wp-admin 10
  11. 11. De achterkant van WordPress: een (!) dashboard 11
  12. 12. Inhoud: pagina’s en berichten - de verschillen bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla pagina’s: bestemd voor ‘statische’ informatie bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 12 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla wie zijn wij contactwat doen wij onze…..menu: kijk maar eens op https://www.luit.nl
  13. 13. Berichten in volgorde van tijd (weblog): nieuwste oudste tijdlijnberichten bestemd voor ‘dynamische’ informatie - onder elkaar vandaag: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla (lees verder…) gisteren: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla (lees verder…) eergisteren: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla (lees verder…) vrijdag: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla (lees verder…) 13 menu: nieuws (bij regelmatig nieuws, vaak de homepage) kijk maar eens op http://www.printmedianieuws.nl
  14. 14. Pagina’s en berichten beiden in WordPress WordPress kent beide typen ‘inhoud’ dus ‘pagina’s’ en ‘berichten’ bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 14
  15. 15. ‘custom post types’ (*) 15 • WordPress als volwaardig CMS, voor bijvoorbeeld: • evenementen - datum, lokatie, tijstip etc. • webshop (artikelen) - prijs, omschrijving, soort, voorraad etc. • foto album - fotograaf, resolutie, merk camera, diafragma etc. • bedrijvenlijst - naam, adres, plaats, website etc. • portfolio - klant, omschrijving, accountmanager • etc. etc.
  16. 16. WordPress - menustructuur: toegang tot inhoud bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 1 2 3 2a 2b 16
  17. 17. WordPress - thema, vormgeving, sidebars, menu * * (body) inhoud: bericht(en) of pagina 1 2 3 2a 2b * * * * * * mogelijkheden afhankelijk per thema 17
  18. 18. WordPress - widgets: inhoud van sidebars .... .... 1 2 3 2a 2b - widgets zijn afzonderlijke stukjes in sidebars - een widget kan de resultaten weergeven van bijvoorbeeld een plugin, maar kan ook stukje tekst zijn (body) inhoud: bericht(en) of pagina 18
  19. 19. WordPress - header/footer (boven- en onderzijde) 1 2 3 2a 2b header en footer grootte/positie (body) inhoud: bericht(en) of pagina 19
  20. 20. (body) inhoud: bericht(en) of pagina WordPress - plug-ins (extra functies) wordpress kern plugin plugin plugin plugin 1 2 3 2a 2b toegevoegde functies, bijvoorbeeld contactformulier, social media icons, activiteiten overzicht….. plugin 20
  21. 21. thema WordPress - thema: overall look&feel plugin plugin plugin plugin plugin 1 2 3 2a 2b (body) inhoud: bericht(en) of pagina 21 wordpress kern
  22. 22. WordPress 2. voorbeelden indelingen websites:
 
 • header, menu, footer, sidebar(s), body 22
  23. 23. Voorbeeld: libelle.nl 23
  24. 24. Voorbeeld: koffietijd.nl 24
  25. 25. Voorbeeld: autoblog.nl 25
  26. 26. Voorbeeld: grazia.nl 26
  27. 27. Voorbeeld: hpdetijd.nl 27
  28. 28. Voorbeeld: viva.nl (jaar geleden) 28
  29. 29. Voorbeeld: viva.nl (nu) 29
  30. 30. WordPress 3. oefenen met de ‘leeromgeving’ - mijnnieuwsmarkt.nl 30
  31. 31. Ga naar http://www.mijnnieuwsmarkt.nl/ Oefening: ga naar de ‘studenten portal’ 31
  32. 32. Belangrijk: zelfstudie inhoud! 32 • De weblog op ‘mijnnieuwsmarkt.nl’
  33. 33. Ga naar http://www.mijnnieuwsmarkt.nl/werksitex/wp-admin (x = 1..8) Inloggen: de ‘achterkant’ van WordPress 33 gebruikerx qwertyx
  34. 34. Ga naar http://www.mijnnieuwsmarkt.nl/werksitex (x = 1..8) Oefening: kijken waar een paar elementen staan 34 menu body sidebar admin
  35. 35. Ga naar http://www.mijnnieuwsmarkt.nl/werksitex/wp-admin (x = 1..8) Oefening: het ‘dashboard’ (kale versie) 35 plaats van blokken zelf in te delen: ga in de kop van een blok staan, klik aan en schuif….
  36. 36. Plugins kunnen zorgen voor meer blokken op het dashboard Oefening: het ‘dashboard’ (met extra modules) 36 plaats van blokken zelf in te delen: ga in de kop van een blok staan, klik aan en schuif….
  37. 37. De linker kolom kan na installatie van plugin en/of thema’s Oefening: het ‘dashboard’ - de functies 37 basis functies na installatie diverse plugins en/of thema’s
  38. 38. WordPress instellingen 38 • Onder ‘instellingen’ staan de belangrijkste basiswaarden voor de werking van je website • algemeen (naam, datum- en tijd instellingen) • schrijven (standaard categorie voor berichten) (*) • lezen (functie en indeling voorpagina etc.) • reacties (wie mag wat en wanneer) • media (grootte instellingen) • permalinks (belangrijk, instelling URL’s artikelen/pagina’s)
  39. 39. WordPress 4. de zoektocht naar de juiste vormgeving 39
  40. 40. Begin eenvoudig: leer eerst de structuur 40 • Vorm en inhoud kunnen onafhankelijk van elkaar bewerkt worden • Een ander thema kan dus altijd later worden gekozen en worden gebruikt, terwijl inhoud blijft behouden • Het gaat echter eerst om de structuur van de website aan de hand van de primaire doelstelling(en): • dus contentbeleid • navigatiestructuur • uitbreidingen
  41. 41. Oefening: bezoek één van deze sites 41 • Betaalde themes (meer support, meer updates, vaak beter geschreven,
 over het algemeen tussen de 40 en 80 euro) • http://www.themeforest.com • http://www.elegantthemes.com • http://www.woothemes.com • http://www.wordpress.org/themes (hier al meer dan 2000 - gratis)
  42. 42. Zelf themes maken (*) 42 • Vraagt (redelijk veel) kennis van PHP, SQL, CSS en HTML • PHP - programmeertaal die HTML genereert • SQL - database • CSS - vorm, kleur, typografie • HTML - opmaak
  43. 43. Parent- en childthemes (*) 43 • Een Parent Theme bevat de basis • Een Child Theme bevat alléén jouw aanpassingen • voordeel: makkelijker updaten van een Parent Theme, terwijl jouw instellingen bewaard blijven • te maken met bijvoorbeeld Genesis Framework • http://www.studiopress.com
  44. 44. WordPress - Parent- & ChildTheme (*) plugin plugin plugin plugin plugin 1 2 3 2a 2b inhoud: bericht(en) of pagina 44 wordpress kern Child Theme ParentTheme
  45. 45. Oefening: een geïnstalleerd thema kiezen 45
  46. 46. Oefening: een geïnstalleerd thema activeren 46 1 activeren van een thema verandert de gehele look&feel van een website
  47. 47. Een thema moet je leren kennen, dat kost tijd! 47
  48. 48. Werken met content 5. De basis 48
  49. 49. Berichten maken, welke elementen • titel (en permalink) • de inleiding van je verhaal • waar is het blok ‘samenvatting’ voor bedoeld? • categorieën en tags (bij berichten) • notatie (meta data) • de uitgelichte afbeelding • de tekstverwerking • media toevoegen • reacties/trackbacks toestaan • revisies • publiceren 49
  50. 50. Pagina’s en keuzes voor de homepage • herhaling verschillen tussen berichten en pagina’s • je eerste pagina maken • je homepage instellen (zie ‘Instellingen’ - ‘Lezen’) 50
  51. 51. Volgorde 51
  52. 52. Titel van je bericht 52
  53. 53. Permalink belangrijk voor Google! 53
  54. 54. Inleiding kort en bondig: plaag om door te lezen! 54
  55. 55. Samenvatting is voor RSS feed, meestal inleiding 55
  56. 56. ‘Verder lezen…’ na de eerste alinea 56
  57. 57. • selecteer een woord of meerdere woorden in de tekst als bron voor de link • selecteer het kettingsymbool • het scherm ‘Link toevoegen/bewerken’ verschijnt Het maken van een in- of externe link 57
  58. 58. En publiceren (meerdere opties) 58
  59. 59. Volgorde 59
  60. 60. Bericht en mogelijkheid tot reageren 60
  61. 61. Huiswerk: maak een paar berichten 5. Bestudeer de inleiding ‘Toelichting bij eerste huiswerkopdracht’ en ga vervolgens aan de slag. - We doen in deze oefening nog niets met vormgeving en menu’s 61
  62. 62. Volgorde 62
  63. 63. Volgorde 63
  64. 64. Volgorde 64
  65. 65. Volgorde 65

×