Starten met een eigen WordPress website

!!!!!!door @peterluit

1

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

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

WordPress

1. wat is WordPress

4

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

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

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

• de ‘concurrenten’

WordPress in Google Trends

8

• 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

• 5 september versie 4.0 verschenen

WordPress downloads: kijk zelf eens

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

10

7 sep. 2014 - 09:00

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

De achterkant van WordPress: een (!) dashboard

12

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

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

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

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

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

WordPress - thema, vormgeving, sidebars, menu

**

(body) inhoud:

bericht(en) of pagina

1 2 3

2a

2b

*

**

*

*

* mogelijkheden afhankelijk per thema

18

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

WordPress - header/footer (boven- en onderzijde)

1 2 3

2a

2b

header en footer grootte/positie

(body) inhoud:

bericht(en) of pagina

20

(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

thema

WordPress - thema: overall look&feel

pluginplugin

pluginplugin

plugin

1 2 3

2a

2b

(body) inhoud:

bericht(en) of pagina

22

wordpress kern

WordPress

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

23

Voorbeeld: libelle.nl

24

Voorbeeld: koffietijd.nl

25

Voorbeeld: autoblog.nl

26

Voorbeeld: grazia.nl

27

Voorbeeld: hpdetijd.nl

28

Voorbeeld: viva.nl

29

WordPress

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

30

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

Oefening: ga naar de ‘studenten portal’

31

Belangrijk: zelfstudie inhoud!

32

• De weblog op ‘mijnnieuwsmarkt.nl’

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

Inloggen: de ‘achterkant’ van WordPress

33

gebruikerx

qwertyx

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

Oefening: kijken waar een paar elementen staan

34

menu

body

sidebar

admin

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

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

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)

WordPress

4. de zoektocht naar de juiste vormgeving

38

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

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)

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

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

WordPress - Parent- & ChildTheme (*)

pluginplugin

pluginplugin

plugin

1 2 3

2a

2b

inhoud: bericht(en) of pagina

43

wordpress kern

Child Theme

ParentTheme

Oefening: een geïnstalleerd thema kiezen

44

Oefening: een geïnstalleerd thema activeren

45

1

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

Een thema moet je leren kennen, dat kost tijd!

46

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

Volgorde

48

Volgorde

49

Volgorde

50

Volgorde

51

Volgorde

52