Basisprincipes van Wordpress.com en .org, structuur in je website steken, waar moet je opletten bij het maken van een basiswebsite.

1. 13/03/2018 – Confederatie Bouw
Een website met Wordpress.com

2. evelien@ilikemedia.be
www.linkedin.com/in/
Evelienstandaert
slideshare.net/
ilikemedia
Goedenavond!

3. I LIKE MEDIA: COLLECTIEF VAN FREELANCE
TRAINERS MET PASSIE VOOR DIGITALE MEDIA
KRISTOF ELIEN PIETER
EVELIEN CHRISTOPHEJOB

4. WIE BEN JIJ?

5. JA, JE HEBT NOG EEN WEBSITE NODIG!

6. Websites

7. JA, JE HEBT NOG EEN WEBSITE NODIG!
• Facebook is van Mark Zuckerberg
• Mensen zoeken in Google
• Online visitekaartje - betrouwbaarheid
• Je bepaalt zelf wat er op je website terecht komt
• Je kan bijhouden wie er op je site komt en waarom

8. VROEGER WAS ALLES HTML

9. TEGENWOORDIG WERK JE MET EEN ‘CMS’

10. Waarvoor gebruiken we dan nog FTP?
• File Transfer Protocol
• Elke pagina/stukje informatie omzetten in code
 in database
 zo komt het op de website terecht
Wordpress doet dus zelf al
wat FTP deed

11. Waarvoor gebruiken we dan nog FTP?
• Kan je nog steeds gebruiken om je Wordpress(.org) mee te
installeren, maar weinig gebruikt
• Troubleshooting met plugins (wordpress.org)

12. WordPress

13. WordPress

14. WordPress
● Platform
● Oorspronkelijk: meest populaire manier om blogs te maken
Nu: volledige websites via WordPress
● Eenvoudig in gebruik en veel mogelijkheden
● CMS = Content Management Systeem: jij zet info (berichten,
pagina’s, media,…) in de website en jouw bezoekers krijgen
die te zien wanneer ze naar je website surfen
● Eigenlijk een website die al af is en je naar hartelust kan
invullen en aanpassen

15. Voordelen van WordPress
● Je kan gratis starten
● Gemakkelijk in gebruik
● Zelf controle over je website - de structuur is er en hoef je zelf
niet te maken, je kan je volledig focussen op de inhoud
● SEO
● WordPress Helpdesk & community

16. Technisch
WordPress maakt gebruik van PHP, MySQL, HTML
● PHP = Hypertext Preprocessor - Scripttaal om dynamische
webpagina’s te programmeren. Elke pagina in WordPress
werd door de ontwikkelaars in PHP gemaakt.
● MySQL = Structured Query Language - De database achter
de WordPress-bestanden. Alles wat jij in WordPress zet
(berichten, pagina’s, afbeeldingen,...) komt vanzelf in die
database terecht
● HTML - de structuur van een webpagina en CSS - het uiterlijk
van je pagina

17. Wat heb je nodig voor een website?
• Software – CMS-programma  Wordpress
= bouwmateriaal van je website
• Hosting: gratis op wordpress.com maar…
= stuk bouwgrond
• Domeinnaam: gratis mijnwebsite.wordpress.com
OF laten doorverwijzen naar aangekochte domeinnaam
= adres van je website

18. WordPress.com vs. WordPress.org
Wordpress.com Wordpress.org
Kosten - Software is gratis
- Hosting is gratis op
- Eventuele extra’s
betalen
- Software is gratis
- Hosting betalend
- Domeinnaam betalend
Kennis Minimaal - Enige technische kennis
nodig
Installatie Meteen aanmelden en
starten
- Domein registreren
- Hosting registreren
- Wordpress installeren

19. WordPress.com vs. WordPress.org
Wordpress.com Wordpress.org
Domeinnaam - Basis:
mijnsite.wordpress.com
- Betalend: www.mijnsite.be
- Altijd betalend:
www.mijnsite.be
Thema Beperkt aantal om uit te
kiezen (gratis of betalend)
Onbeperkt aanbod aan
thema’s
Plugin Niet mogelijk Onbeperkt
Beveiliging,
updates, back-ups
automatisch Zelf te regelen (o.a. met
plugins)

20. WordPress.com vs. WordPress.org
Wordpress.com Wordpress.org
Advertenties
op je site
Wordpress plaatst
automatisch advertenties op je
site (kan weg tegen betaling)
Jij bepaalt wat er op je website
terecht komt
Webshop - Heel beperkt
- Duur
- Jij beslist hoe het eruit ziet
- Veel (gratis) plugins voor
Eigendom NIET VAN JOU!! Site is van jou

21. WordPress.com
Voordelen:
• Gratis
• Supersimpel
• Ziet er meteen professioneel uit
Nadelen:
• Mijnsite.wordpress.com is niet professioneel dus je moet sowieso
nog een extra domeinnaam aankopen
• Geen plugins mogelijk – beperkt
• Beperkte aanpassingen mogelijk
• De betaalde upgrades komen duurder uit dan hosting aankopen
voor wordpress.org

22. Hoe werkt WordPress.com?
● Account aanmaken
● Pagina’s – Berichten - Menu
● Thema
● Structuur!

23. Account aanmaken

24. Stap 1

25. Stap 2

26. Stap 3

27. Stap 4

28. Hoera!!

29. Je eigen website!!
De Front End

30. Je eigen website!!
De Back End
Wanneer je klikt op ‘Mijn
sites’ krijg je het
dashboard van
WordPress.com te zien

31. Nog even bevestigen…

32. BACK END

33. Instellingen - Algemeen

34. Instellingen - Schrijven

35. Wat zijn categorieën?
● WordPress-berichten kunnen tot een categorie behoren
● Categorie = hoofdonderwerp
● Zo kunnen jouw bezoekers gemakkelijk alle artikels binnen een
bepaalde categorie bekijken = overzichtelijk
● Verplicht in WordPress
● Standaard staat ‘geen categorie’ aangeduid
● Dit kan je zelf aanpassen

36. Wat zijn tags?
● Tags kan je zelf naar hartelust aanmaken
● Dit kan gaan van de onderwerpen in je bericht tot plaatsnamen,
namen van belangrijke personen,…
● Door tags aan je berichten te geven, worden je blogberichten
gemakkelijker gevonden in zoekmachines als Google
● Door tags worden je blogberichten ook gemakkelijker gevonden
wanneer iemand gebruikmaakt van de zoekfunctie op je
website

37. Instellingen - Reacties

38. Instellingen - Verkeer
● Google Analytics- betalend
● SEO - betalend

39. Ge hebt een pauzeke verdiend!

40. Hoe werkt WordPress.com?
● Account aanmaken
● Berichten - Pagina’s - Menu
● Thema
● Structuur!

41. Berichten
● Blogstijl
● Je kan het vergelijken met nieuwsberichten voor een krant
of columns voor een tijdschrift
● Het zijn korte of langere artikels die je website levendig en
up to date houden
● Worden in maandelijkse archieven bewaard en krijgen
doorgaans 1 categorie en verschillende tags

42. Nieuw bericht

43. Nieuw bericht
● Geef je bericht een titel
● Permalink (URL zoals hij in de zoekbalk zal verschijnen)
● Media toevoegen in bericht
● Typ je tekst - Via de knoppen kan je jouw tekst opmaken
(WYSIWYG - What you see is what you get à la Word)
● Visueel of Tekst (code - vb. om te embedden)
● Publiceren (Verschillende opties - concept I datum I publicatie)
● Categorieën - Tags
● Uitgelichte afbeelding (afbeelding boven titel en tekst)
● Delen (mensen de mogelijkheid geven artikel te delen I liken)
● Postformaat (standaard = alle mogelijkheden)
● Meer opties = locatie I reacties toelaten I ...

44. Media

45. Media
● URL
● Titel
● Onderschrift: wordt getoond door sommige thema’s
● Alt Tekst: wordt getoond voor zoekmachines en wanneer
afbeelding niet beschikbaar is
● Beschrijving: wordt getoond door sommige thema’s
● Uitlijning: links - gecentreerd - rechts
● Wijzig naar waar je media doorlinkt (bestand, pagina, URL)
● Afmeting
● Invoegen in bericht - Je afbeelding staat dan in je bericht
○ Door erop te klikken, kan je de afbeelding verkleinen of
vergroten door de vierkantjes rond de foto te verslepen
○ Ook kan je de uitlijning wijzigen en de afbeelding bewerken
of verwijderen

46. Pagina’s
● Pagina’s zijn bedoeld voor inhoud die niet vaak verandert
(bijvoorbeeld ‘Over Ons’, ‘Contact’, …)
● Pagina’s bevatten tijdloze info
● Geen categorieën en tags
● Deze pagina’s kan je aan het menu van je website toevoegen
● Werken op net dezelfde manier als berichten

47. Pagina’s

48. Pagina’s
● Geef je pagina een titel (dezelfde werking I mogelijkheden als
berichten)
● Permalink (URL zoals hij in de zoekbalk zal verschijnen) en media -
poll - contactformulier - locatie toevoegen
● Typ je tekst - Via de knoppen kan je jouw tekst opmaken (WYSIWYG)
● Visueel of Tekst (code -vb. om te embedden)
● Publiceren (Verschillende opties)
● Pagina-attributen (Hoofd en subpagina’s - Volgorde indien je je
pagina’s niet alfabetisch wil laten weergeven)
● Uitgelichte afbeelding (niet bij elk thema zichtbaar)

49. Widgets
● Toegankelijk via je Customizer
● Een widget is een extra mogelijkheid die je aan je website kan
toevoegen in zijbalken of footers, vb. een zoekbalk in de
sidebar, een overzicht van de laatste blogposts, de Twitter-
tijdslijn van jouw organisatie/merk, een afbeelding,...
● Sommige thema’s hebben enkel een sidebar om widgets in te
plaatsen, bij andere thema’s kan je ook widgets plaatsen in een
extra linker, rechter, boven, onder-zijbalk of een (of meerdere)
footer(s)
● Heel veel widgets in WordPress.com - je sleept je gewenste
widget telkens in een widgetlocatie naar keuze

50. Widgets

51. Plugins
● Mini-programma’tjes die extra functionaliteiten aan je website
toevoegen
● Het feit dat we zoveel beschikbare widgets hebben, komt onder
andere door enkele plugins.
● Dat we in elk bericht of pagina een contactformulier, poll of
locatie kunnen toevoegen, is ook mogelijk door
voorgeïnstalleerde plugins.
● Alle nodige plugins zijn al geïnstalleerd. Bij WordPress.com kan
je zelf geen extra plugins toevoegen (itt. WordPress.org - daar
moet je dus zelf uitzoeken welke plugin het beste werkt voor
elke functionaliteit die je extra wilt)

52. Plugins

53. Mensen
● Je kan met meerdere personen (gebruikers) aan dezelfde
WordPress-website werken.
● In je Dashboard klik je op ‘Mensen’

54. Gebruikers
● Wie kan wat doen?
○ VOLGER - Iemand die jouw website volgt, updates in de
mailbox krijgt en geen gegevens moet ingeven (naam, e-
mail,...) wanneer hij een reactie op je berichten plaatst
○ SCHRIJVER - Kan berichten zonder media schrijven (maar
niet publiceren) en zijn eigen profiel bewerken
○ AUTEUR - Kan enkel zijn eigen berichten en media
toevoegen en aanpassen en zijn eigen profiel bewerken
○ REDACTEUR - Kan berichten, media, pagina’s, categorieën
en tags aanmaken, bewerken en verwijderen. Hij kan
reacties (in het tabje reacties) goedkeuren, afkeuren,
verwijderen. Hij kan zijn eigen profiel aanpassen, maar
niets veranderen aan de weergave en andere gebruikers
○ BEHEERDER - Kan alles doen (er is minstens 1 en standaard
de persoon die de website heeft aangemaakt)

55. DOMEIN
● Wat als je een domeinnaam wil laten registreren?
● Je krijgt dan geen reclame meer te zien op je website en ook
‘site.wordpress.com’ verdwijnt na jouw sitenaam. Zolang je
gewenste domeinnaam nog beschikbaar is, kan je deze
registreren
● Je klikt bij ‘Mijn sites’ op ‘Abonnementen’. Hier kan je kiezen voor
een WordPress.com-plan voor jouw domein

56. DOMEIN
● Heb je al een domeinnaam of wil je er eentje registreren bij een
webhostingfirma als one.com, versio.nl, combell.com,...?
● Klik op ‘Domeinen’ en voeg hier jouw domeinnaam toe.
WordPress zet dan zelf alle inhoud van je gratis site over naar
jouw domeinnaam ALS JE EEN BETALEND WORDPRESS-
ABONNEMENT hebt.
● Bij WordPress.com is het dus het handigst om bij
‘Abonnementen’ er eentje bij WordPress.com zelf aan te kopen
en gebruik te maken van die webruimte

57. Hoe werkt WordPress.com?
● Account aanmaken
● Berichten - Pagina’s - Menu
● Structuur!
● Thema

58. ● Structuur van je website is het allerbelangrijkst
● Wat moet op je website staan?
● Maak eerst een sitemap = diagram van die structuur
● Alle pagina’s + onderlinge links
Structuur

59. Menustructuur?

60. Menustructuur?

61. Menustructuur?

62. WIE IS JE LEZER?

63. Zender Boodschap Ontvanger
HET COMMUNICATIESCHEMA

64. Opdracht: Menustructuur uitwerken
• Home
• Over ons
• Wat we doen:
Overzicht? Lijstje? Portfolio?
• Contact
• Blog?
• Andere?

65. Opdracht: Voeg de pagina’s voor je menu toe

66. Hoe werkt WordPress.com?
● Account aanmaken
● Berichten - Pagina’s - Menu
● Structuur!
● Thema

67. Thema’s
● Je thema bepaalt het volledige uitzicht van je website
● Mogelijkheid tot live demonstratie - uitproberen en aanpassen -
activeren

68. Thema’s
● Minder mogelijkheden bij WordPress.com dan WordPress.org,
● Gratis versus betalend (naar eigen keuze en wensen)
● Waar moet je op letten?
○ Responsive
○ Rating (hoe meer actieve installaties en positieve
beoordelingen, hoe beter)
○ Opgelet! Bij ‘Weergave’ - ‘Mobiel’ altijd mobiel thema
aanzetten
● Je kan van elk thema een voorvertoning krijgen om een beter
zicht te hebben op het uiterlijk van dat thema
● Klik je op ‘uitproberen en aanpassen’, dan zie je de Customizer

69. Customizer
● Via ‘Thema’s’ - ‘Customizer’ of per thema ‘Uitproberen en aanpassen’
● Ook hier kan je nog ontzettend veel aanpassingen maken aan je
website + soms thema-specifieke opties!

70. Menu’s
● Kan je aanmaken en aanpassen in je Customizer

71. Menu’s
● Om ervoor te zorgen dat je menu zichtbaar is, moet je elk menu
aan een locatie toewijzen (de beschikbare locaties zijn
afhankelijk van het thema dat je gebruikt)
● Het primaire menu is altijd datgene wat bovenaan staat
● Wil je automatisch elke pagina die je vanaf nu aanmaakt, in je
menu zien staan? Klik dan op ‘automatisch hoofdniveau-
pagina’s aan dit menu toevoegen’. Subpagina’s zullen dus niet
automatisch toegevoegd worden
● Om de volgorde van de menu-items te veranderen, kan je deze
in de gewenste volgorde slepen
● Om een submenu-item te maken, sleep je dat onderdeel in de
rechterkolom iets meer naar rechts.

72. Belangrijk bij websites
● Gebruiksvriendelijkheid
● Snelheid
● Responsiveness
● In elke browser
hetzelfde resultaat

73. Aan de slag!
Je kan nu volledig jouw eigen website beginnen invullen.

74. BEDANKT!
Stuur je vragen naar
evelien@ilikemedia.be
Deze presentatie vind je ook op
www.slideshare.com/ilikemedia
Abonneer je op onze nieuwsbrief
www.ilikemedia.be/nieuwsbrief
Volg ons op Facebook
www.facebook.com/ilikemedia.be