Handout van de training Locatie onafhankelijk werken met WordPress door Wonderlijkwerken.nl

1. LOCATIE ONAFHANKELIJK
WERKEN MET WORDPRESS
WELKOM BIJ WONDERLIJK WERKEN

2. 14.30 - 15.00DIANA EN STEVEN
OPENING WORDPRESS WEEKEND!

3. WIE ZIJN
WIJ?

4. WIE ZIJN
WIJ?
DIGITALE NOMADEN SINDS DECEMBER 2011

5. BEGONNEN IN MEXICO

6. BEGONNEN IN MEXICOMEET OUR HOUSE

7. REIZEN IN EN WERKEN VANUIT
EEN VOLKSWAGEN BUS

8. WERK WAAR WIFI IS: SO FAR IN MEXICO, BELIZE,
GUATEMALA, USA, INDIA EN THAILAND.

9. IEDER JAAR EEN PAAR MAANDEN IN NEDERLAND

10. TRAININGEN LIFESTYLE DESIGN &
LOCATIE ONAFHANKELIJK WERKEN

11. Hoe zijn wij begonnen met
locatie onafhankelijk werken?

14. Waar verdienen wij precies geld mee?

23. BINNENKORT
TE KOOP
E-WERKBOEK
REIZEN EN
ONDERNEMEN

24. IN HET NAJAAR TE BOEKEN
ONLINE TRAINING
WORDPRESS

25. En onderweg dan?
OP EEN TOERISTENVISUM IS HET EIGENLIJK VERBODEN GELD TE VERDIENEN
-> DUS…. RUILEN!

26. Een jaar op een tropisch eiland wonen

27. Trouwen op het strand in Mexico

28. Naar een ander continent terwijl je platzak bent

29. DE INS EN OUTS VAN WORDPRESS LEREN
EN ZELF WEBSITES KUNNEN BOUWEN
DOEL VAN HET TRAININGSWEEKEND

30. En jij?

31. CONVERSIE DOELEN
BASIS VAN WORDPRESS
SEO & ANALYTICS
WAT STAAT ER OP DE AGENDA VANDAAG?

32. 1
wat is wordpress?

33. WordPress is eeneencontent managementsysteem(cms)
waarbij je zelf weinig hoeftte programmeren.Enige voorkennis
van het bouwen van websitesis wenselijk maar niet noodzakelijk.
Met WordPress bouwje dynamische websites,deachterliggende
techniekis de scripttaal PHP.

34. Je installeert WordPressopje eigenwebruimte die je inkooptbij
eenproviderof webhosting-bedrijf.Nadat je bentingelogdbij
WordPressopde webserver,maak je pagina’s en berichtenaan.
Deze pagina’s en berichtenwordendoor WordPress omgezet in
mooivormgegevenwebpagina’s.

35. 2
Wat kun je maken met WordPress?

36. Websites en blogs
- Op basis van voor-ontworpen thema’s
- thema’s, widgets en plugins bepalen in
grote mate hoe de website eruit ziet
en welke functionaliteiten deze heeft

37. Plugins en widgets bepalen functionaliteit
- Contact formulieren
- Online reserveren en afrekenen
- Meertaligheid
Bijna oneindig veel functionaliteiten!

38. 3
Een paar voorbeelden wat je kunt maken

39. zakelijke website
meertalige website webshop
blog website

40. 4
waar ga ik beginnen?

41. ontwerp en functie van je website

42. wat wil je dat de bezoeker DOET op je site?
Wat is het doel van je website?

43. abonneren op je nieuwsbrief, contact formulier invullen,
een boeking maken, iets kopen en afrekenen, een video
bekijken…
Het gaat om je contact moment met de klant

44. dit heet:
CONVERSIE

49. OPDRACHT
1

50. Bedenk wat het conversie doel van je eigen website is.
1. wat is je contactmoment met de bezoeker?
2. Waar moet op geklikt worden door de bezoeker?

51. 5
welke taken kun je op jouw website uitvoeren?

52. een adres opzoeken, een rekeningnummer opzoeken, een
route opzoeken, informatie opzoeken, foto’s bekijken, een
telefoon nummer opzoeken, je volgen op Facebook….
Het gaat om je taken die de bezoeker wil
uitvoeren met behulp van jouw website

53. Ga naar:
www.annelooptlangzaamhard.nl

55. Wat kun je op deze website voor taken
uitvoeren?

56. 2
OPDRACHT

57. Bedenk welke taken jouw website de bezoeker laat uitvoeren
maak het niet te complex!
Wat is het belangrijkste??

58. Deze twee vragen zijn het begin van ieder WordPress project voor een
klant. Zorg dat je bij een intake gesprek voor een nieuwe opdracht
vraagt aan een klant:
wat is je contact moment/ het doel van de website?
en welke taken kan een bezoeker uitvoeren op je website?
WordPress website voor een klant

59. 6
hoe kies ik het juiste wordpress thema?

60. 1. belangrijkste contactmoment
2. belangrijkste taken
=
functionaliteiten en design
+

61. WordPress
THEMA
functionaliteiten en design?

63. BREAK

64. Aan de slag met WordPress
Installatie met Steven

65. 01 Webruimte
Om WordPress te installeren heb je webruimte nodig. Deze
ruimte koop je in bij een provider en is meestal gekoppeld
aan een domeinnaam. In deze workshop gebruiken we
webruimte van provider NVBIT, maar je kunt net zo goed
een andere provider gebruiken. Sommige providers zijn niet
ingericht voor WordPress en moeten bepaalde instellingen
op hun servers aanpassen, soms moet je hiervoor een
mailtje sturen naar de helpdesk. Een installatie van
WordPress heeft weinig ruimte nodig, maar zodra je veel
foto’s en video’s uploadt naar de website kies je het beste
genoeg webruimte.

67. 02 MySQL-database
WordPress schrijft zijn gegevens – de pagina’s en berichten
die je binnen WordPress aanmaakt – naar een MySQL-
database. Je zult met de instellingen die je van de provider
krijgt, zelf een MySQL-database moeten creëren. Vraag bij
de provider na of deze dit ondersteunt. Een goede provider
weet waarover het gaat en zal je hierbij helpen. Nadat je
een MySQL-database hebt aangemaakt, heb je hier verder
niet veel mee te maken. Het maken van een back-up van
de database op gezette tijden is wel aan te raden. Wij
gebruiken hierzoor de plugin Updraft Plus. Hierover later
meer.

68. 03 Ftp-programma
Om bestanden van de harde schijf naar de webruimte te
kopiëren, heb je een ftp-programma nodig. Zowel voor
Windows-pc’s als Macs heb je hier een ruime keuze. Na
installatie van het ftp-programma op je computer, fungeert het
programma als een soort externe verkenner. Je kopieert, knipt
en plakt bestanden van en naar mappen op de webserver, net
als je dat zou doen bij mappen op de harde schijf. Met een
goed ftp-programma kan je eveneens rechten van mappen en
bestanden veranderen. Wij kiezen voor FileZilla.

69. installatie afmaken
DE BASIS VAN WORDPRESS

70. 04 Dashboard
Gefeliciteerd, je eerste WordPress-website is eenfeit!
Althans, de installatie is gelukt en de standaardthema’s
en plug-ins zijn automatisch geïnstalleerd. Je bent
terechtgekomen bij het Dashboard, de centrale
webpagina van WordPress op je eigenserver. Links vind
je een aantal menu’s, klik erop en er ontvouwen zich
submenu’s. Klik op Berichten en je ziet dat er alvast
één testbericht is geplaatst op je website, getiteld Hallo
wereld!Onder Pagina’s vind je de testpagina Voorbeeld
pagina weer.

71. 05 Site bekijken
Dashboard fungeert als de zogenaamde back-end van de
website, hier voer je gegevens in en verander je de
vormgeving. De front-end is hoe de pagina er daadwerkelijk
uitziet voor mensen die naar de website navigeren. Klik
linksboven op Site bekijken om de front-end van de nieuwe
website te bekijken. Dit is de echte weergave van de site op
dit moment, het is dus geen simulatie. Wees ervan bewust
dat alles wat je in Dashboard verandert, direct online is te
zien. De grijze balk bovenin krijgen de bezoekers niet te zien.

72. berichten
pagina’s
menu
contactformulier
plugins
EERSTE STAPPEN IN WORDPRESS

73. 06 Berichten begrijpen
Om het verschil te zien tussen berichten en pagina’s, klik je
in het Dashboard op de titel van jouw site Site bekijken.
Berichten, ook wel posts genoemd, zijn artikelen die je met
nieuwsitems kunt vergelijken. Berichten worden in veel
thema’s vergezeld van een plaatsingsdatum en bezoekers
kunnen er eventueel op reageren. Berichten worden
meestal op verschijningsdatum onder elkaar weergegeven
op een website, maar sommige thema’s geven berichten op
een andere manier weer. Ga terug naar het Dashboard door
op Dashboard te klikken.

74. berichten
EERSTE STAPPEN IN WORDPRESS

75. 07 Berichtenoverzicht
Kies in het Dashboard voor Berichten en je ziet een
overzicht van alle berichten op jouw website. Op dit
moment is er slechts één bericht. Om het bericht te
verwijderen, zet je een vinkje voor Hallo wereld! en kies je
bij Acties voor Naar de prullenbak verplaatsen. Bevestig
de actie door op Uitvoeren te klikken. Je kunt de actie
altijd ongedaan maken door in de gele balk die verschijnt
voor Ongedaan maken te kiezen. Onder Titel zie je nu
Geen berichten gevonden, je kunt nu nieuwe berichten
toevoegen.

76. 08 Nieuw bericht aanmaken
Klik op Berichten / Nieuw bericht. Tik in het bovenste
veld de titel van jouw eerste bericht. In het grote veld in
het midden van je scherm schrijf je de tekst van het
bericht. Wil je het bericht opslaan zonder te publiceren,
omdat je bijvoorbeeld later meer tekst wilt toevoegen, klik
dan rechtsboven op Opslaan als concept. Een voorbeeld
van de vormgeving van het bericht zie je door op
Voorbeeld te klikken. Om het bericht meteen zichtbaar te
maken op jouw website kies je Publiceren.

77. 09 Media toevoegen
We willen graag beeld toevoegen aan ons bericht. Klik op het
icoontje achter Uploaden/Toevoegen. In het volgende
venster kies je onder Van computer voor Bestanden
kiezen. Selecteer een afbeelding en klik op Open. Als
WordPress klaar is met het uploaden van de afbeelding naar
jouw server, vul je achter Titel een nieuwe naam in. Via
Afbeelding bewerken kun je het beeld bijvoorbeeld roteren
of spiegelen. Klik na een bewerking op Opslaan. Achter
Afmeting kies je het beste voor Gemiddeld of Groot. Sluit
af met Invoegen in bericht en klik op Bijwerken.

78. 10 Categorieën
Elk bericht kan in een bepaalde categorie worden geplaatst.
Zo kunt je jouw bezoekers meer overzicht bieden. Standaard
krijgt een bericht de categorie Geen categorie toegewezen.
Wil je dit wijzigen, klik dan in het Dashboard op een bericht
en kies rechts bij Categorieën voor Nieuwe categorie
toevoegen. In deze workshop typ je in het veld nu
bijvoorbeeld Duitsland in, omdat ons bericht over een
locatie in Duitsland gaat. Klik vervolgens op Nieuwe
categorie toevoegen. Het vinkje voor Geen categorie haal
je weg.

79. 11 Bericht inplannen
Je kunt berichten schrijven en opslaan zonder dat je ze op
jouw website publiceert. Dit is handig als je bijvoorbeeld op
één dag alvast alle berichten voor de komende maand wilt
typen. In een bericht staat achter Geplaatst op de datum.
Klik op Bewerken en geef voor het bericht een datum in de
toekomst aan, bijvoorbeeld volgende week. Klik op OK,
voor de datum is nu Ingepland voor te lezen. Bezoekers
op je website krijgen zo pas volgende week het bericht te
zien. Om af te sluiten, klik je op Inplannen.

80. LUNCH

81. pagina’s
EERSTE STAPPEN IN WORDPRESS

82. 12 Pagina’s begrijpen
Pagina’s zijn bedoeld om informatie weer te geven die
weinig of niet verandert. Pagina’s komen in tegenstelling tot
berichten standaard in het menu van jouw website te staan
en bezoekers kunnen deze informatie dus meteen
raadplegen vanaf de startpagina. Meestal bevat een website
niet meer dan een handjevol pagina’s om te voorkomen dat
een menu overvol wordt. Het creëren van een pagina gaat
op bijna dezelfde manier als een bericht. Standaard is tot nu
toe één pagina te zien: de testpagina Voorbeeld pagina die
standaard door WordPress is aangemaakt bij de installatie.

83. 13 Nieuwe pagina aanmaken
Klik in het Dashboard op Pagina’s / Nieuwe pagina en vul bij
Voer hier de titel in een tekst naar keuze in. Schrijf jouw
tekst en voeg eventueel een afbeelding toe. Klik op
Publiceren om de pagina online te plaatsen.

84. 14 Paginaoverzicht
Een overzicht van alle pagina’s vind je bij Pagina’s. Verwijder de
pagina Voorbeeld pagina. Als je meerdere pagina’s hebt
aangemaakt, kun je de pagina’s sorteren op titel, datum of auteur.
Hiervoor klik je op de blauwe woorden boven de pagina’s. Dit heeft
overigens geen gevolgen voor de positie van pagina’s in het menu
op jouw website. Heb je veel pagina’s en wil je snel één pagina voor
jouw neus, geef dan een zoekterm in en klik op Zoek pagina’s.
Deze functies vind je overigens ook allemaal bij het
berichtenoverzicht dat je onder Berichten vindt.

85. menu’s
EERSTE STAPPEN IN WORDPRESS

86. 15 Aangepaste menu’s
Standaard is er in de meeste thema’s een koppeling naar de
startpagina te vinden en geeft het menu de pagina’s weer. Wil
je iets anders, dan kun je het menu op je website helemaal zelf
instellen. Neem bijvoorbeeld bepaalde categorieën in het menu
op. Je kunt ervoor kunnen kiezen om pagina categorieën op te
nemen in het menu, zodat bezoekers met één klik alle
berichten over de betreffend onderwerp kunnen zien.
Voorwaarde is natuurlijk wel dat je bij de berichten en pagina's
de juiste categorieën hebt aangegeven.

87. 16 Aangepast menu aanmaken
Klik in het Dashboard op Weergave / Menu’s en voer achter
Menunaam een naam voor het menu in, bijvoorbeeld
Hoofdmenu. Deze naam wordt niet op de website weergegeven.
Klik op Menu aanmaken om elementen aan het menu toe te
voegen. Onder Thema locaties staat hoeveel menu’s je thema
ondersteunt, bij ons thema is dit er slechts één. Selecteer hier
Hoofdmenu en klik op Opslaan. In het blokje Pagina’s / Toon
alles selecteer je een pagina die je hier ziet staan en die je in de
hoofdnavigatie op je website wilt. Dan klik je op Aan menu
toevoegen. Sluit af met Menu opslaan.

88. 17 Categorieën in menu toevoegen
Ga terug naar Weergave / Menu’s en selecteer Hoofdmenu.
Onder Categorieën / Toon alles selecteren een categorie. Sluit
af met Aan menu toevoegen.Aan de rechterkant ziet je jouw
aangepaste menu. Je kunt de elementen naar boven en naar
beneden schuiven. Ben je tevreden, sla dan het menu op door
op Menu opslaan te klikken.

89. contact formulier
EERSTE STAPPEN IN WORDPRESS

90. 18 Plug-ins
Met behulp van plug-ins voeg je functies aan de site toe. Wil
je een tweetalige website of een geavanceerd
contactformulier? Geen probleem. Voor WordPress zijn
duizenden plug-ins te vinden, het grootste deel hiervan is
gratis beschikbaar. Plug-ins zoek, installeer en activeer je
gemakkelijk vanuit WordPress. Denk er wel om dat sommige
plug-ins kunnen conflicteren met andere plug-ins. Draai je
veel plug-ins van verschillende aanbieders, dan is de kans
aanwezig dat je website traag of instabiel wordt.

91. 19 Plug-in Contact Form 7 installeren
Met behulp van plug-ins voeg je functies aan de site toe. Wil je een
geavanceerd contactformulier? Geen probleem. Voor WordPress zijn
duizenden plug-ins te vinden, het grootste deel hiervan is gratis
beschikbaar. Plug-ins zoek, installeer en activeer je gemakkelijk
vanuit WordPress. Denk er wel om dat sommige plug-ins kunnen
conflicteren met andere plug-ins. Draai je veel plug-ins van
verschillende aanbieders, dan is de kans aanwezig dat je website
traag of instabiel wordt. Ga naar plugins in het menu, klik op nieuwe
toevoegen, zoek in het zoekveld naar de plugin Contact Form 7. Klik
op Installeren.

92. 20 Contactformulier aanmaken
Links in het menu zie je Contact staan. Klik op Formulieren. Klik op
Contact / Contact form 1. Onder Formulier zie je de elementen
van het contactformulier, de teksten tussen <p> en <br /> onder
Formulier kun je wijzigen. Onder Mail vul je je e-mailadres in,
kopieer de code in het bruine veld bovenin en klik op Opslaan.
Maak een pagina aan die je Contact noemt, klik boven het
tekstveld op HTML en plak de code in het tekstveld. Voer een titel
in, klik op Publiceren en voeg de pagina toe aan het menu.

93. PLUGINS
EERSTE STAPPEN IN WORDPRESS

94. MUST INSTALL PLUGINS
WORDPRESS SEO
WP FASTEST CACHE
CONTACT FORM 7
CONTACT FORM DB
WP SMUSH
AKISMET
UNDERCONSTRUCTION
GOOGLE ANALYTICATOR

95. ALLES EVEN
HERHALEN
nieuw bericht, nieuw plaatje, nieuwe uitgelichte afbeelding,
nieuwe pagina, deze in menu zetten,
nieuw contact formulier, deze op een pagina zetten.

96. WordPress
THEMA
www.themeforest.net

98. WordPress werkt met themas. Dit zijn grafisch ontworpen, voor-
gecodeerde templates voorzien van een mooi design en allerlei pagina
indelingen. Deze themes kun je kopen voor ongeveer 50 USD.
WordPress Themes

99. WordPress
THEMA
dingen waar je op moet letten

100. Criteria
- wanneer is het thema voor het laatst geüpdatet?
- hoeveel pagina templates zijn er beschikbaar?
- hoeveel homepage variaties zijn er beschikbaar?
- heeft het thema een visual builder? (drag & drop)
- is het compatibel met vertaal plugin WPML? (bij meertalige site)
- Is het compatibel met woocommerce? (bij webshop)
- Is er dummy content beschikbaar? (xml file)
- hoeveel installs heeft het thema al?

102. nu
JIJ!

103. ACTIVEER THEMA BRIDGE
GA NAAR WEERGAVE -> THEMA’S

105. INSTALLEER BENODIGDE PLUGINS

108. ACTIVEER DE PLUGINS!

109. KIES JE DEMO SITE
GA NAAR QODE IMPORT -> IMPORT

110. demo.qodeinteractive.com/bridgetour/demos
BEKIJK DE DEMO’S HIER:

113. KLIK OP ‘BEKIJK WEBSITE’
TADAAAAA!

115. LOCATIE ONAFHANKELIJK
WERKEN MET WORDPRESS
EINDE DAG 1

116. LOCATIE ONAFHANKELIJK
WERKEN MET WORDPRESS
DAG 2 VAN DE TRAINING

117. JOUW WEBSITE IN BRIDGE
CONVERSIE DOELEN IMPLEMENTEREN
WAT STAAT ER OP DE AGENDA VANDAAG?

118. TIJD OM TE PERSONALISEREN
JOUW WEBSITE, JOUW STIJL

119. VISUAL COMPOSER
HOE BEWERK JE DE PAGINA?

120. GA NAAR WEERGAVE -> MENU
JE EIGEN MENU INSTELLEN

123. GA NAAR MENU -> LOCATIE BEHEREN
SELECTEER JE NIEUWE MENU

125. SLIDERS
GROTE HOMEPAGE IMAGES BEWERKEN

126. AFMETING
ZOEK DE AFMETING OP IN JE THEMA WEBSITE-
RESIZE DE FOTO NAAR DIE AFMETING EN VERKLEIN
DEZE VOOR HET WEB - MAX 200KB VOOR SLIDER
FOTO’S, GEWONE FOTO’S MAX 50 KB

127. GA NAAR QODE SLIDES
SELECTEER DE SLIDER DIE IN JE DEMO STAAT

128. HOE ZIE JE WELKE SLIDER IN JE DEMO STAAT?

131. KIJK VOOR ALLE DOCUMENTATIE OVER
BRIDGE IN DE INDEX.HTML
DEZE LINK VIND JE IN DE NASLAG EMAIL. OP DE
DOCUMENTATIE PAGINA VIND JE WAAR IETS STAAT, HOE JE
IETS MOET MAKEN, AANPASSEN, VERANDEREN.

132. LOCATIE ONAFHANKELIJK
WERKEN MET WORDPRESS
EINDE DAG 2

133. WWW.WONDERLIJKWERKEN.NL
LOCATIE ONAFHANKELIJK WERKEN MET WORDPRESS
Diana Vermeij en Steven Zwerink