Your SlideShare is downloading. ×
0
Starten met een eigen WordPress website

door @peterluit

1
Voor wie bedoeld
• eerste kennismaking met het zelf ‘bouwen’ van een weblog/website
• in aanvang (!) geen of (zeer) beperk...
Programma 1e avond - theorie en praktijk
• deel 1: WordPress, de basis
• deel 2: de zoektocht naar de juiste vormgeving
• ...
Wat doen we vanavond in de praktijk?
• even kijken hoe populair WordPress is
• zelf bekijken uit welke elementen een websi...
WordPress
Deel 1: de basis

5
Waarom WordPress?
• volledig opensource
• wereldwijd enorme grote (on-line) ontwikkelaars- en gebruikers communities
• gro...
WordPress in Google Trends
• de ‘concurrenten’

7
WordPress downloads: kijk zelf eens
• verschil binnen twee dagen......
• dit jaar nog versie 3.8

http://wordpress.org/dow...
WordPress - basis handelingen
• thema’s (vormgeving) kiezen
• menu’s (user interface) maken
• pagina’s (statische inhoud)
...
WordPress - geavanceerd
• zelf thema’s maken (*)
• deelnemen aan WordCamps (congressen)
• deelnemen aan discussies binnen ...
We beginnen met ‘gewone’ pagina’s
bestemd voor ‘statische’ informatie

bla bla bla bla bla bla
bla bla bla bla bla bla
bla...
Een weblog van een berichten tijdlijn
bestemd voor ‘dynamische’ informatie
- onder elkaar

tijdlijn berichten

nieuwste

b...
Pagina’s en berichten beiden in WordPress
WordPress kent beide typen ‘inhoud’
dus ‘pagina’s’ en ‘berichten’
bla bla bla bl...
Wat zijn Custom Post Types? (*)
• WordPress als volwaardig CMS, voor bijvoorbeeld:
• evenementen - datum, lokatie, tijstip...
WordPress - menustructuur: toegang tot inhoud
1

2

3

2a
2b

bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla ...
WordPress - thema, vormgeving, sidebars, menu
1

* mogelijkheden
afhankelijk per thema

3

2
2a
2b

*
*
*

*

(body)
inhou...
WordPress - widgets: inhoud van sidebars
1

2

3

2a
2b

(body)
inhoud:
bericht(en)
of pagina

- widgets zijn afzonderlijk...
WordPress - header/footer (boven- en onderzijde)
1

2

3

2a
2b

(body)
inhoud:
bericht(en)
of pagina

header en footer gr...
WordPress - plug-ins (extra functies)
toegevoegde functies, bijvoorbeeld
contactformulier, social media icons,
teller aant...
WordPress - thema: overall look&feel
1

2

3

2a

theme

2b

plugin
plugin
plugin

plugin
plugin

(body)
inhoud:
bericht(e...
Oefening: kijken waar een paar elementen staan
Ga naar http://www.mijnnieuwsmarkt.nl/werksitex (x = 1..8)

header
menu
bod...
Oefening: de ‘achterkant’ van WordPress
Ga naar http://www.mijnnieuwsmarkt.nl/werksitex/wp-admin (x = 1..8)

gebruikerx
qw...
Oefening: het zogenaamde ‘dashboard’
Ga naar http://www.mijnnieuwsmarkt.nl/werksitex/wp-admin (x = 1..8)

plaats van
blokk...
Oefening: het zogenaamde ‘dashboard’
Ga naar http://www.mijnnieuwsmarkt.nl/werksitex/wp-admin (x = 1..8)

basis functies

...
WordPress
Deel 2: de zoektocht naar de juiste vormgeving

25
Begin eenvoudig: leer eerst de structuur
• Vorm en inhoud kunnen onafhankelijk van elkaar bewerkt worden
• Een ander thema...
Oefening: bezoek één van deze sites
• Betaalde themes (meer support, meer updates, vaak beter geschreven,
over het algemee...
Zelf themes maken (*)
• Vraagt (veel) kennis van PHP, SQL, CSS en HTML
• PHP - programmeertaal die HTML genereert
• SQL - ...
Parent- en childthemes (*)
• Een Parent Theme bevat de basis
• Een Child Theme bevat alléén jouw aanpassingen
• voordeel: ...
WordPress - Parent- & ChildTheme (*)
ParentTheme

1

2

3

2a
2b

Child Theme

plugin
plugin
plugin

plugin
plugin

inhoud...
Oefening: een geïnstalleerd thema kiezen

1

2
31
Oefening: een geïnstalleerd thema activeren
1

32
Oefening: thema instellingen (voorbeeld1)

1

33
Een thema moet je leren kennen, dat kost tijd!

34
Oefening: sidebars vullen met widgets

3
1
2

35
Oefening: sidebars vullen met widgets

36
Oefening: sidebars vullen met widgets

37
WordPress
Deel 3: je site gaan gebruiken

38
je site gaan gebruiken
• Ga naar http://www.mijnnieuwsmarkt.nl/werksitex
• x staat voor 1..8
• iedereen krijgt een eigen d...
je site gaan gebruiken
• identiteit
• wie ben ik, wat straal ik uit, wat zijn mijn diensten/producten, welk nieuws
heb ik ...
je site gaan gebruiken
• begin eenvoudig
• durf gestructureerd te experimenteren
• alles hoeft niet in één keer, maar je b...
WordPress - let goed op metadata!
content

metadata

pagina’s

titel
body
media
commentaren(*)

tijdlijn (blogs)

titel

c...
WordPress - menu’s zijn heel flexibel

menu item

leeg (#)
URL
pagina
categorie
tag

43
Oefening: wat kies je als homepage?

1

44
Oefening: je eerste bericht gaan maken
2
1
7
3

4

6

5

45
Oefening: je eerste pagina gaan maken
2
1
4
3

46
media toevoegen: let erg goed op het formaat!
1

2

47
links toevoegen
2

1

3

48
het menu maken

1

2

49
het menu maken

3

2
1

50
het menu maken - submenu

1

51
WordPress
Deel 4: wordpress.com en wordpress.org: de verschillen!

52
wordpress.com - alles laten doen
• een zogenaamde hosted service, leuk om te ‘leren’
• basis is gratis, maar beperkt
• gee...
wordpress.com - het begin

54
wordpress.com - http://jouwnaam.wordpress.com

55
Oefening (alleen als je je e-mail hier kunt ophalen)

1
2
3
4

56
wordpress.com - ‘free blog’

57
wordpress.com - ook het bekende dashboard

58
wordpress.org - alles zelf doen!
• bedoeld om te ‘draaien’ op eigen domein bij een provider
• opensource pakket is gratis
...
wordpress.org: 5 stappen (zelf doen?)
• 1: wordpress files downloaden vanaf http://nl.wordpress.org
• 2: wordpress files (vi...
wordpress.org: belangrijke gegevens!
• installatie via webbrowser: http://www.bedrijf.nl/

61
wordpress.org: je basis gegevens

62
wordpress.org: gelukt

63
wordpress.org: eerste keer inloggen
http://www.bedrijfsnaam.nl/login

64
wordpress.org: en weer je dashboard

65
wordpress.org: voorbeeld luit.nl

66
wordpress.org: installatie door provider

67
Vraag bij een provider altijd naar een control panel
• Veelal is dat Plek of cPanel
• specificaties webhosting
• specificati...
WordPress
Deel 5: huiswerk

69
Huiswerk
• Maak gebruik van http://www.mijnnieuwsmarkt.nl/werksitex
• x = het aan jou toegwezen nummer
• bepaal de doelste...
Starten met een eigen website
• Dank voor jullie aandacht
• Veel succes

door @peterluit

71
Upcoming SlideShare
Loading in...5
×

Online Usability training Hogeschool Utrecht - CCJ

232

Published on

Online Usability training Hogeschool Utrecht - CCJ. Door Eddy Boeve en Peter Luit.

Published in: Marketing
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
232
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Online Usability training Hogeschool Utrecht - CCJ"

  1. 1. Starten met een eigen WordPress website door @peterluit 1
  2. 2. Voor wie bedoeld • eerste kennismaking met het zelf ‘bouwen’ van een weblog/website • in aanvang (!) geen of (zeer) beperkte technische kennis van PHP, SQL, HTML, CSS • nieuwsgierig naar de mogelijkheden en graag willen experimenteren • aanbevolen: beetje gevoel voor ‘look & feel’ • geen paniekgevoel krijgen als het niet meteen lukt..... ;-) • (*) mag je vergeten..... 2
  3. 3. Programma 1e avond - theorie en praktijk • deel 1: WordPress, de basis • deel 2: de zoektocht naar de juiste vormgeving • deel 3: je website gaan gebruiken • deel 4: wordpress.com en wordpress.org: de verschillen • deel 5: huiswerk 3
  4. 4. Wat doen we vanavond in de praktijk? • even kijken hoe populair WordPress is • zelf bekijken uit welke elementen een website bestaat • inloggen en WordPress dashboard bekijken • vormgevings thema websites bekijken • een vooraf geïnstalleerd thema kiezen en activeren • thema instellingen bekijken • sidebar(s) vullen met widgets • de opbouw van je homepage maken • berichten en pagina’s publiceren en bewerken • menustructuur maken • even naar wordpress.com kijken 4
  5. 5. WordPress Deel 1: de basis 5
  6. 6. Waarom WordPress? • volledig opensource • wereldwijd enorme grote (on-line) ontwikkelaars- en gebruikers communities • grote hoeveelheden plugins • grote hoeveelheden vormgevings thema’s • in basis redelijk makkelijk te leren (geen complexe leercurve) 6
  7. 7. WordPress in Google Trends • de ‘concurrenten’ 7
  8. 8. WordPress downloads: kijk zelf eens • verschil binnen twee dagen...... • dit jaar nog versie 3.8 http://wordpress.org/download/counter/ 8
  9. 9. WordPress - basis handelingen • thema’s (vormgeving) kiezen • menu’s (user interface) maken • pagina’s (statische inhoud) • berichten (tijdlijn) • plugins (uitbreidingen) toepassen 9
  10. 10. WordPress - geavanceerd • zelf thema’s maken (*) • deelnemen aan WordCamps (congressen) • deelnemen aan discussies binnen communities • andere toepassingen bedenken (webshop, foto album etc.) • zelf plugin’s maken (*) • zelf bijdragen aan de kern van WordPress (*) 10
  11. 11. We beginnen met ‘gewone’ 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 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bijvoorbeeld: ‘wat doe ik’, ‘contact’, ‘producten’, ‘diensten’ etc. 11
  12. 12. Een weblog van een berichten tijdlijn bestemd voor ‘dynamische’ informatie - onder elkaar tijdlijn berichten nieuwste bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla oudste bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bedoeld voor periodieke nieuwsberichten 12
  13. 13. 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 13
  14. 14. Wat zijn Custom Post Types? (*) • 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. 14
  15. 15. WordPress - menustructuur: toegang tot inhoud 1 2 3 2a 2b bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 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. 16. WordPress - thema, vormgeving, sidebars, menu 1 * mogelijkheden afhankelijk per thema 3 2 2a 2b * * * * (body) inhoud: bericht(en) of pagina * * * 16
  17. 17. 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 .... .... 17
  18. 18. WordPress - header/footer (boven- en onderzijde) 1 2 3 2a 2b (body) inhoud: bericht(en) of pagina header en footer grootte/positie 18
  19. 19. WordPress - plug-ins (extra functies) toegevoegde functies, bijvoorbeeld contactformulier, social media icons, teller aantal keren gelezen artikel plugin plugin plugin plugin plugin 1 2 3 2a 2b (body) inhoud: bericht(en) of pagina wordpress kern 19
  20. 20. WordPress - thema: overall look&feel 1 2 3 2a theme 2b plugin plugin plugin plugin plugin (body) inhoud: bericht(en) of pagina wordpress kern 20
  21. 21. Oefening: kijken waar een paar elementen staan Ga naar http://www.mijnnieuwsmarkt.nl/werksitex (x = 1..8) header menu body footer widgets 21
  22. 22. Oefening: de ‘achterkant’ van WordPress Ga naar http://www.mijnnieuwsmarkt.nl/werksitex/wp-admin (x = 1..8) gebruikerx qwertyx 22
  23. 23. Oefening: het zogenaamde ‘dashboard’ Ga naar http://www.mijnnieuwsmarkt.nl/werksitex/wp-admin (x = 1..8) plaats van blokken zelf in te delen 23
  24. 24. Oefening: het zogenaamde ‘dashboard’ Ga naar http://www.mijnnieuwsmarkt.nl/werksitex/wp-admin (x = 1..8) basis functies na installatie diverse plugins en/of thema’s 24
  25. 25. WordPress Deel 2: de zoektocht naar de juiste vormgeving 25
  26. 26. Begin eenvoudig: leer eerst de structuur • 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 26
  27. 27. Oefening: bezoek één van deze sites • 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) 27
  28. 28. Zelf themes maken (*) • Vraagt (veel) kennis van PHP, SQL, CSS en HTML • PHP - programmeertaal die HTML genereert • SQL - database • CSS - vorm, kleur, typografie • HTML - opmaak 28
  29. 29. Parent- en childthemes (*) • 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 29
  30. 30. WordPress - Parent- & ChildTheme (*) ParentTheme 1 2 3 2a 2b Child Theme plugin plugin plugin plugin plugin inhoud: bericht(en) of pagina wordpress kern 30
  31. 31. Oefening: een geïnstalleerd thema kiezen 1 2 31
  32. 32. Oefening: een geïnstalleerd thema activeren 1 32
  33. 33. Oefening: thema instellingen (voorbeeld1) 1 33
  34. 34. Een thema moet je leren kennen, dat kost tijd! 34
  35. 35. Oefening: sidebars vullen met widgets 3 1 2 35
  36. 36. Oefening: sidebars vullen met widgets 36
  37. 37. Oefening: sidebars vullen met widgets 37
  38. 38. WordPress Deel 3: je site gaan gebruiken 38
  39. 39. je site gaan gebruiken • Ga naar http://www.mijnnieuwsmarkt.nl/werksitex • x staat voor 1..8 • iedereen krijgt een eigen deel op de site om in te kunnen werken • dus voorbeeld: http://www.mijnnieuwsmarkt.nl/werksite1 • ga dan naar het dashboard: http://www.mijnnieuwsmarkt.nl/werksite1/wp-admin • gebruik juiste gebruikersnaam en wachtwoord 39
  40. 40. je site gaan gebruiken • identiteit • wie ben ik, wat straal ik uit, wat zijn mijn diensten/producten, welk nieuws heb ik te vertellen, hoe ben ik te bereiken..... etc. • uiterlijk • welke vormgeving past bij mij, huisstijl maken, logo etc. • schrijfwijze • hoe de juiste toon te zetten in je inhoud 40
  41. 41. je site gaan gebruiken • begin eenvoudig • durf gestructureerd te experimenteren • alles hoeft niet in één keer, maar je bent wel zichtbaar voor Google, tenzij.... • word lid van ‘wordpress’ groepen op LinkedIn • stel daar je vragen • zoek veel, heel veel op het web, daar vind je je antwoorden 41
  42. 42. WordPress - let goed op metadata! content metadata pagina’s titel body media commentaren(*) tijdlijn (blogs) titel categorie tags body media commentaren(*) 42
  43. 43. WordPress - menu’s zijn heel flexibel menu item leeg (#) URL pagina categorie tag 43
  44. 44. Oefening: wat kies je als homepage? 1 44
  45. 45. Oefening: je eerste bericht gaan maken 2 1 7 3 4 6 5 45
  46. 46. Oefening: je eerste pagina gaan maken 2 1 4 3 46
  47. 47. media toevoegen: let erg goed op het formaat! 1 2 47
  48. 48. links toevoegen 2 1 3 48
  49. 49. het menu maken 1 2 49
  50. 50. het menu maken 3 2 1 50
  51. 51. het menu maken - submenu 1 51
  52. 52. WordPress Deel 4: wordpress.com en wordpress.org: de verschillen! 52
  53. 53. wordpress.com - alles laten doen • een zogenaamde hosted service, leuk om te ‘leren’ • basis is gratis, maar beperkt • geen eigen server nodig, niets te installeren, alles ‘draait’ bij WordPress • http://jouweigennaam.wordpress.com • betaald overstappen naar http://www.jouweigenaam.com voor $18/jaar • ga naar http://www.wordpress.com om te beginnen 53
  54. 54. wordpress.com - het begin 54
  55. 55. wordpress.com - http://jouwnaam.wordpress.com 55
  56. 56. Oefening (alleen als je je e-mail hier kunt ophalen) 1 2 3 4 56
  57. 57. wordpress.com - ‘free blog’ 57
  58. 58. wordpress.com - ook het bekende dashboard 58
  59. 59. wordpress.org - alles zelf doen! • bedoeld om te ‘draaien’ op eigen domein bij een provider • opensource pakket is gratis • zelf installeren (bij voldoende kennis in een paar minuten) • http://www.jouweigennaam.nl • veel meer mogelijkheden op het gebied van thema’s en plug-ins • kosten in basis ca. 100 euro per jaar ex. BTW (domeinnaam en hosting) 59
  60. 60. wordpress.org: 5 stappen (zelf doen?) • 1: wordpress files downloaden vanaf http://nl.wordpress.org • 2: wordpress files (via FTP) uploaden bij je provider (plek krijg je toegewezen) • 3. maak SQL database in via het controlpanel van je provider • database naam, database gebruikersnaam, database wachtwoord en database server • 4. installatie starten met http://www.jouwnaam.nl/wp-admin/install.php • 5. instructies op het scherm volgen 60
  61. 61. wordpress.org: belangrijke gegevens! • installatie via webbrowser: http://www.bedrijf.nl/ 61
  62. 62. wordpress.org: je basis gegevens 62
  63. 63. wordpress.org: gelukt 63
  64. 64. wordpress.org: eerste keer inloggen http://www.bedrijfsnaam.nl/login 64
  65. 65. wordpress.org: en weer je dashboard 65
  66. 66. wordpress.org: voorbeeld luit.nl 66
  67. 67. wordpress.org: installatie door provider 67
  68. 68. Vraag bij een provider altijd naar een control panel • Veelal is dat Plek of cPanel • specificaties webhosting • specificaties database (veelal SQL) • e-mail adressen (welke e-mail adressen en welke mailbox groottes) • ftp (dus wie mag waar bestanden uploaden) • automatische installatie van applicaties (zoals WordPress) 68
  69. 69. WordPress Deel 5: huiswerk 69
  70. 70. Huiswerk • Maak gebruik van http://www.mijnnieuwsmarkt.nl/werksitex • x = het aan jou toegwezen nummer • bepaal de doelstellingen van hetgeen je met de site wilt gaan doen • maak voorlopig ‘gewoon’ gebruik van het standaard thema • bepaal de structuur van de inhoud en maak een daarbij passend menu • experimenteer met de inhoud in de sidebars • maak pagina’s en berichten 70
  71. 71. Starten met een eigen website • Dank voor jullie aandacht • Veel succes door @peterluit 71
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×