Peter Luit verzorgt voor Inct. - het uitgeeplatform voor uitgevers - de training WordPress: dat kan ik zelf

1. Starten met een eigen WordPress website
!
!
!
!
!
!
door @peterluit
1

2. Voor wie bedoeld
• eerste kennismaking met het zelf ‘bouwen’ van een weblog/website voor
uitgeef doeleinden
• 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 4 middagen, globale inhoud
• deel 1: introductie
• deel 2: werken met content
• deel 3: menu’s, thema’s en plugins
• deel 4: vervolg plugins en widgets
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
• 20% 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. WordPress in Google Trends
• de ‘concurrenten’
8

9. WordPress downloads: kijk zelf eens
• 5 september versie 4.0 verschenen
http://wordpress.org/download/counter/
9
3 sep. 2014 - 16:00 4 sep. 2014 - 08:00

10. WordPress downloads: kijk zelf eens
• 5 september versie 4.0 verschenen
http://wordpress.org/download/counter/
10
7 sep. 2014 - 09:00

11. 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
11

12. De achterkant van WordPress: een (!) dashboard
12

13. Inhoud: pagina’s en berichten - de verschillen
menu: wie zijn wij wat doen wij onze….. contact
bla bla bla bla bla bla
bla bla bla bla bla bla
bla bla bla bla bla bla
bla bla bla bla bla bla
bla bla bla bla bla bla
bla bla bla bla 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
13
bla bla bla bla bla bla
bla bla bla bla bla bla
bla bla bla bla bla bla
bla bla bla bla bla bla
bla bla bla bla bla bla
bla bla bla bla bla bla
bla bla bla bla bla bla
bla bla bla bla bla bla
bla bla bla bla bla bla
bla bla bla bla
kijk maar eens op http://www.luit.nl

14. Berichten in volgorde van tijd (weblog):
nieuwste
tijdlijn berichten
oudste
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…)
14
menu: nieuws (bij regelmatig nieuws, vaak de homepage)
kijk maar eens op http://www.printmedianieuws.nl

15. 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
15

16. ‘custom post types’ (*)
16
• 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.

17. 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
17

18. WordPress - thema, vormgeving, sidebars, menu
*
*
1 2 3
2a
2b
(body)
inhoud:
bericht(en)
of pagina
*
* mogelijkheden
afhankelijk per thema
*
*
*
*
18

19. WordPress - widgets: inhoud van sidebars
....
....
1 2 3
2a
2b
(body)
inhoud:
bericht(en)
of pagina
- widgets zijn afzonderlijke stukjes in sidebars
- een widget kan de resultaten weergeven van
bijvoorbeeld een plugin, maar kan ook stukje tekst zijn
19

20. WordPress - header/footer (boven- en onderzijde)
1 2 3
2a
2b
(body)
inhoud:
bericht(en)
of pagina
header en footer grootte/positie
20

21. WordPress - plug-ins (extra functies)
(body)
inhoud:
bericht(en)
of pagina
wordpress kern
plugin
plugin
plugin
plugin
1 2 3
2a
2b
toegevoegde functies, bijvoorbeeld
contactformulier, social media icons,
activiteiten overzicht…..
plugin
21

22. WordPress - thema: overall look&feel
thema
plugin
plugin
plugin
plugin
plugin
1 2 3
2a
2b
(body)
inhoud:
bericht(en)
of pagina
22
wordpress kern

23. WordPress
2. voorbeelden indelingen websites van een aantal uitgeefproducten:
• header, menu, footer, sidebar(s), body
23

24. Voorbeeld: libelle.nl
24

25. Voorbeeld: koffietijd.nl
25

26. Voorbeeld: autoblog.nl
26

27. Voorbeeld: grazia.nl
27

28. Voorbeeld: hpdetijd.nl
28

29. Voorbeeld: viva.nl
29

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

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

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

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

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

35. Oefening: het ‘dashboard’
Ga naar http://www.mijnnieuwsmarkt.nl/werksitex/wp-admin (x = 1..8)
35
plaats van
blokken zelf in te
delen: ga in de
kop van een
blok staan, klik
aan en schuif….

36. Oefening: het ‘dashboard’ - de functies
Ga naar http://www.mijnnieuwsmarkt.nl/werksitex/wp-admin (x = 1..8)
36
basis functies na installatie diverse
plugins en/of thema’s

37. WordPress instellingen
37
• 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)

38. WordPress
4. de zoektocht naar de juiste vormgeving
38

39. Begin eenvoudig: leer eerst de structuur
39
• 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

40. Oefening: bezoek één van deze sites
40
• 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)

41. Zelf themes maken (*)
41
• Vraagt (redelijk veel) kennis van PHP, SQL, CSS en HTML
• PHP - programmeertaal die HTML genereert
• SQL - database
• CSS - vorm, kleur, typografie
• HTML - opmaak

42. Parent- en childthemes (*)
42
• 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

43. WordPress - Parent- & ChildTheme (*)
ParentTheme
plugin
Child Theme
plugin
plugin
plugin
plugin
1 2 3
2a
2b
inhoud:
bericht(en)
of pagina
43
wordpress kern

44. Oefening: een geïnstalleerd thema kiezen
44

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

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

47. 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
47

48. Volgorde
48

49. Volgorde
49

50. Volgorde
50

51. Volgorde
51

52. Volgorde
52