Online usability - les 1 introductie WordPress - structuur en content

1. Starten met een eigen WordPress website
versie 3.0 - maart 2016
door @peterluit
1

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. 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. WordPress
1. wat is WordPress
4

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. 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. 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. • de ‘concurrenten’
WordPress in Google Trends
8

9. WordPress downloads: kijk zelf eens
http://wordpress.org/download/counter/
9

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. De achterkant van WordPress: een (!) dashboard
11

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. 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. 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. ‘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. 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. WordPress - thema, vormgeving, sidebars, menu
*
*
(body)
inhoud:
bericht(en)
of pagina
1 2 3
2a
2b
*
*
*
*
*
* mogelijkheden
afhankelijk per thema
17

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. WordPress - header/footer (boven- en onderzijde)
1 2 3
2a
2b
header en footer grootte/positie
(body)
inhoud:
bericht(en)
of pagina
19

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. 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. WordPress
2. voorbeelden indelingen websites:
• header, menu, footer, sidebar(s), body
22

23. Voorbeeld: libelle.nl
23

24. Voorbeeld: koffietijd.nl
24

25. Voorbeeld: autoblog.nl
25

26. Voorbeeld: grazia.nl
26

27. Voorbeeld: hpdetijd.nl
27

28. Voorbeeld: viva.nl (jaar geleden)
28

29. Voorbeeld: viva.nl (nu)
29

30. WordPress
3. oefenen met de ‘leeromgeving’ - mijnnieuwsmarkt.nl
30

31. Ga naar http://www.mijnnieuwsmarkt.nl/
Oefening: ga naar de ‘studenten portal’
31

32. Belangrijk: zelfstudie inhoud!
32
• De weblog op ‘mijnnieuwsmarkt.nl’

33. Ga naar http://www.mijnnieuwsmarkt.nl/werksitex/wp-admin (x = 1..8)
Inloggen: de ‘achterkant’ van WordPress
33
gebruikerx
qwertyx

34. Ga naar http://www.mijnnieuwsmarkt.nl/werksitex (x = 1..8)
Oefening: kijken waar een paar elementen staan
34
menu
body
sidebar
admin

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. 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. 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. 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. WordPress
4. de zoektocht naar de juiste vormgeving
39

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. 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. 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. 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. 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. Oefening: een geïnstalleerd thema kiezen
45

46. Oefening: een geïnstalleerd thema activeren
46
1
activeren van een
thema verandert de
gehele look&feel van
een website

47. Een thema moet je leren kennen, dat kost tijd!
47

48. Werken met content
5. De basis
48

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. 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. Volgorde
51

52. Titel van je bericht
52

53. Permalink belangrijk voor Google!
53

54. Inleiding kort en bondig: plaag om door te lezen!
54

55. Samenvatting is voor RSS feed, meestal inleiding
55

56. ‘Verder lezen…’ na de eerste alinea
56

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. En publiceren (meerdere opties)
58

59. Volgorde
59

60. Bericht en mogelijkheid tot reageren
60

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. Volgorde
62

63. Volgorde
63

64. Volgorde
64

65. Volgorde
65