Les 1 Inct. Training WordPress

52
Starten met een eigen WordPress website door @peterluit 1

description

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

Transcript of Les 1 Inct. Training WordPress

Page 1: Les 1 Inct. Training WordPress

Starten met een eigen WordPress website

!!!!!!door @peterluit

1

Page 2: Les 1 Inct. Training WordPress

Voor wie bedoeld

• eerste kennismaking met het zelf ‘bouwen’ van een weblog/website voor uitgeef doeleinden

• in aanvang (!) geen of (zeer) beperkte technische kennis vanPHP, 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

Page 3: Les 1 Inct. Training WordPress

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

Page 4: Les 1 Inct. Training WordPress

WordPress

1. wat is WordPress

4

Page 5: Les 1 Inct. Training WordPress

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

Page 6: Les 1 Inct. Training WordPress

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

Page 7: Les 1 Inct. Training WordPress

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

Page 8: Les 1 Inct. Training WordPress

• de ‘concurrenten’

WordPress in Google Trends

8

Page 9: Les 1 Inct. Training WordPress

• 5 september versie 4.0 verschenen

WordPress downloads: kijk zelf eens

http://wordpress.org/download/counter/

9

3 sep. 2014 - 16:00 4 sep. 2014 - 08:00

Page 10: Les 1 Inct. Training WordPress

• 5 september versie 4.0 verschenen

WordPress downloads: kijk zelf eens

http://wordpress.org/download/counter/

10

7 sep. 2014 - 09:00

Page 11: Les 1 Inct. Training WordPress

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

Page 12: Les 1 Inct. Training WordPress

De achterkant van WordPress: een (!) dashboard

12

Page 13: Les 1 Inct. Training WordPress

Inhoud: pagina’s en berichten - de verschillen

bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 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

wie zijn wij contactwat doen wij onze…..menu:

kijk maar eens op http://www.luit.nl

Page 14: Les 1 Inct. Training WordPress

Berichten in volgorde van tijd (weblog):

nieuwste

oudste

tijdlijn

ber

ichte

n

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

Page 15: Les 1 Inct. Training WordPress

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

Page 16: Les 1 Inct. Training WordPress

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

Page 17: Les 1 Inct. Training WordPress

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

Page 18: Les 1 Inct. Training WordPress

WordPress - thema, vormgeving, sidebars, menu

**

(body) inhoud:

bericht(en) of pagina

1 2 3

2a

2b

*

**

*

*

* mogelijkheden afhankelijk per thema

18

Page 19: Les 1 Inct. Training WordPress

WordPress - widgets: inhoud van sidebars

....

....

1 2 3

2a

2b

- widgets zijn afzonderlijke stukjes in sidebars - een widget kan de resultaten weergeven van bijvoorbeeld een plugin, maar kan ook stukje tekst zijn

(body) inhoud:

bericht(en) of pagina

19

Page 20: Les 1 Inct. Training WordPress

WordPress - header/footer (boven- en onderzijde)

1 2 3

2a

2b

header en footer grootte/positie

(body) inhoud:

bericht(en) of pagina

20

Page 21: Les 1 Inct. Training WordPress

(body) inhoud:

bericht(en) of pagina

WordPress - plug-ins (extra functies)

wordpress kern

pluginplugin

plugin

plugin

1 2 3

2a

2b

toegevoegde functies, bijvoorbeeld contactformulier, social media icons, activiteiten overzicht…..

plugin

21

Page 22: Les 1 Inct. Training WordPress

thema

WordPress - thema: overall look&feel

pluginplugin

pluginplugin

plugin

1 2 3

2a

2b

(body) inhoud:

bericht(en) of pagina

22

wordpress kern

Page 23: Les 1 Inct. Training WordPress

WordPress

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

23

Page 24: Les 1 Inct. Training WordPress

Voorbeeld: libelle.nl

24

Page 25: Les 1 Inct. Training WordPress

Voorbeeld: koffietijd.nl

25

Page 26: Les 1 Inct. Training WordPress

Voorbeeld: autoblog.nl

26

Page 27: Les 1 Inct. Training WordPress

Voorbeeld: grazia.nl

27

Page 28: Les 1 Inct. Training WordPress

Voorbeeld: hpdetijd.nl

28

Page 29: Les 1 Inct. Training WordPress

Voorbeeld: viva.nl

29

Page 30: Les 1 Inct. Training WordPress

WordPress

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

30

Page 31: Les 1 Inct. Training WordPress

Ga naar http://www.mijnnieuwsmarkt.nl/

Oefening: ga naar de ‘studenten portal’

31

Page 32: Les 1 Inct. Training WordPress

Belangrijk: zelfstudie inhoud!

32

• De weblog op ‘mijnnieuwsmarkt.nl’

Page 33: Les 1 Inct. Training WordPress

Ga naar http://www.mijnnieuwsmarkt.nl/werksitex/wp-admin (x = 1..8)

Inloggen: de ‘achterkant’ van WordPress

33

gebruikerx

qwertyx

Page 34: Les 1 Inct. Training WordPress

Ga naar http://www.mijnnieuwsmarkt.nl/werksitex (x = 1..8)

Oefening: kijken waar een paar elementen staan

34

menu

body

sidebar

admin

Page 35: Les 1 Inct. Training WordPress

Ga naar http://www.mijnnieuwsmarkt.nl/werksitex/wp-admin (x = 1..8)

Oefening: het ‘dashboard’

35

plaats van blokken zelf in te delen: ga in de kop van een blok staan, klik aan en schuif….

Page 36: Les 1 Inct. Training WordPress

Ga naar http://www.mijnnieuwsmarkt.nl/werksitex/wp-admin (x = 1..8)

Oefening: het ‘dashboard’ - de functies

36

basis functies na installatie diverse plugins en/of thema’s

Page 37: Les 1 Inct. Training WordPress

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)

Page 38: Les 1 Inct. Training WordPress

WordPress

4. de zoektocht naar de juiste vormgeving

38

Page 39: Les 1 Inct. Training WordPress

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

Page 40: Les 1 Inct. Training WordPress

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)

Page 41: Les 1 Inct. Training WordPress

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

Page 42: Les 1 Inct. Training WordPress

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

Page 43: Les 1 Inct. Training WordPress

WordPress - Parent- & ChildTheme (*)

pluginplugin

pluginplugin

plugin

1 2 3

2a

2b

inhoud: bericht(en) of pagina

43

wordpress kern

Child Theme

ParentTheme

Page 44: Les 1 Inct. Training WordPress

Oefening: een geïnstalleerd thema kiezen

44

Page 45: Les 1 Inct. Training WordPress

Oefening: een geïnstalleerd thema activeren

45

1

activeren van een thema verandert de gehele look&feel van een website

Page 46: Les 1 Inct. Training WordPress

Een thema moet je leren kennen, dat kost tijd!

46

Page 47: Les 1 Inct. Training WordPress

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

Page 48: Les 1 Inct. Training WordPress

Volgorde

48

Page 49: Les 1 Inct. Training WordPress

Volgorde

49

Page 50: Les 1 Inct. Training WordPress

Volgorde

50

Page 51: Les 1 Inct. Training WordPress

Volgorde

51

Page 52: Les 1 Inct. Training WordPress

Volgorde

52