Training Locatie-onafhankelijk werken met WordPress - 27/28 juni 2015 - Handout

LOCATIE ONAFHANKELIJK WERKEN MET WORDPRESS

WELKOM BIJ WONDERLIJK WERKEN

14.30 - 15.00DIANA EN STEVENOPENING WORDPRESS WEEKEND!

WIE ZIJN WIJ?

WIE ZIJN WIJ?

DIGITALE NOMADEN SINDS DECEMBER 2011

BEGONNEN IN MEXICO

BEGONNEN IN MEXICOMEET OUR HOUSE

REIZEN IN EN WERKEN VANUIT EEN VOLKSWAGEN BUS

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

IEDER JAAR EEN PAAR MAANDEN IN NEDERLAND

TRAININGEN LIFESTYLE DESIGN & LOCATIE ONAFHANKELIJK WERKEN

Hoe zijn wij begonnen met locatie onafhankelijk werken?

Waar verdienen wij precies geld mee?

BINNENKORT TE KOOP

E-WERKBOEK REIZEN EN

ONDERNEMEN

IN HET NAJAAR TE BOEKEN ONLINE TRAINING

WORDPRESS

En onderweg dan? OP EEN TOERISTENVISUM IS HET EIGENLIJK VERBODEN GELD TE VERDIENEN

-> DUS…. RUILEN!

Een jaar op een tropisch eiland wonen

Trouwen op het strand in Mexico

Naar een ander continent terwijl je platzak bent

DE INS EN OUTS VAN WORDPRESS LEREN EN ZELF WEBSITES KUNNEN BOUWEN

DOEL VAN HET TRAININGSWEEKEND

En jij?

CONVERSIE DOELEN BASIS VAN WORDPRESS

SEO & ANALYTICS

WAT STAAT ER OP DE AGENDA VANDAAG?

1

wat is wordpress?

WordPress is een een content management systeem (cms) waarbij je zelf weinig hoeft te programmeren. Enige voorkennis

van het bouwen van websites is wenselijk maar niet noodzakelijk. Met WordPress bouw je dynamische websites, de achterliggende

techniek is de scripttaal PHP.

Je installeert WordPress op je eigen webruimte die je inkoopt bij een provider of webhosting-bedrijf. Nadat je bent ingelogd bij

WordPress op de webserver, maak je pagina’s en berichten aan. Deze pagina’s en berichten worden door WordPress omgezet in

mooi vormgegeven webpagina’s.

2

Wat kun je maken met WordPress?

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

Plugins en widgets bepalen functionaliteit

- Contact formulieren

- Online reserveren en afrekenen

- Meertaligheid

Bijna oneindig veel functionaliteiten!

3

Een paar voorbeelden wat je kunt maken

zakelijke website

meertalige website webshop

blog website

4

waar ga ik beginnen?

ontwerp en functie van je website

wat wil je dat de bezoeker DOET op je site?

Wat is het doel van je website?

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

dit heet: CONVERSIE

OPDRACHT

1

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?

5

welke taken kun je op jouw website uitvoeren?

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

Ga naar:www.annelooptlangzaamhard.nl

Wat kun je op deze website voor taken uitvoeren?

2 OPDRACHT

Bedenk welke taken jouw website de bezoeker laat uitvoeren

maak het niet te complex! Wat is het belangrijkste??

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

6

hoe kies ik het juiste wordpress thema?

1. belangrijkste contactmoment

2. belangrijkste taken

=

functionaliteiten en design

+

WordPress THEMA

functionaliteiten en design?

BREAK

Aan de slag met WordPress Installatie met Steven

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.

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.

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.

installatie afmaken DE BASIS VAN WORDPRESS

04 Dashboard Gefeliciteerd, je eerste WordPress-website is een feit! 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 eigen server. 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.

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.

berichten pagina’s menu

contactformulier plugins

EERSTE STAPPEN IN WORDPRESS

06 Berichten begrijpenOm 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.

berichten EERSTE STAPPEN IN WORDPRESS

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.

08 Nieuw bericht aanmakenKlik 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.

09 Media toevoegenWe 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.

10 CategorieënElk 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.

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

LUNCH

pagina’s EERSTE STAPPEN IN WORDPRESS

12 Pagina’s begrijpenPagina’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.

13 Nieuwe pagina aanmakenKlik 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.

14 PaginaoverzichtEen 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.

menu’s EERSTE STAPPEN IN WORDPRESS

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.

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.

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.

contact formulier EERSTE STAPPEN IN WORDPRESS

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.

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.

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.

PLUGINS EERSTE STAPPEN IN WORDPRESS

MUST INSTALL PLUGINS WORDPRESS SEO

WP FASTEST CACHE CONTACT FORM 7

CONTACT FORM DB WP SMUSH AKISMET

UNDERCONSTRUCTION GOOGLE ANALYTICATOR

ALLES EVEN HERHALEN

nieuw bericht, nieuw plaatje, nieuwe uitgelichte afbeelding, nieuwe pagina, deze in menu zetten,

nieuw contact formulier, deze op een pagina zetten.

WordPress THEMA

www.themeforest.net

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

WordPress THEMA

dingen waar je op moet letten

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?

nu JIJ!

ACTIVEER THEMA BRIDGE GA NAAR WEERGAVE -> THEMA’S

INSTALLEER BENODIGDE PLUGINS

ACTIVEER DE PLUGINS!

KIES JE DEMO SITE GA NAAR QODE IMPORT -> IMPORT

demo.qodeinteractive.com/bridgetour/demosBEKIJK DE DEMO’S HIER:

KLIK OP ‘BEKIJK WEBSITE’

TADAAAAA!

LOCATIE ONAFHANKELIJK WERKEN MET WORDPRESS

EINDE DAG 1

LOCATIE ONAFHANKELIJK WERKEN MET WORDPRESS

DAG 2 VAN DE TRAINING

JOUW WEBSITE IN BRIDGE CONVERSIE DOELEN IMPLEMENTEREN

WAT STAAT ER OP DE AGENDA VANDAAG?

TIJD OM TE PERSONALISEREN

JOUW WEBSITE, JOUW STIJL

VISUAL COMPOSER

HOE BEWERK JE DE PAGINA?

GA NAAR WEERGAVE -> MENU

JE EIGEN MENU INSTELLEN

GA NAAR MENU -> LOCATIE BEHEREN

SELECTEER JE NIEUWE MENU

SLIDERS

GROTE HOMEPAGE IMAGES BEWERKEN

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

GA NAAR QODE SLIDESSELECTEER DE SLIDER DIE IN JE DEMO STAAT

HOE ZIE JE WELKE SLIDER IN JE DEMO STAAT?

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.

LOCATIE ONAFHANKELIJK WERKEN MET WORDPRESS

EINDE DAG 2

WWW.WONDERLIJKWERKEN.NLLOCATIE ONAFHANKELIJK WERKEN MET WORDPRESS

Diana Vermeij en Steven Zwerink