Starten met een eigen WordPress website

door @peterluit

1

Voor wie bedoeld

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

• in aanvang (!) geen of (zeer) beperkte technische kennis vanPHP, SQL, HTML, CSS

• nieuwsgierig naar de mogelijkheden en graag willen experimenteren

• aanbevolen: beetje gevoel voor ‘look & feel’

• geen paniekgevoel krijgen als het niet meteen lukt..... ;-)

• (*) mag je vergeten.....

2

Programma 1e avond - theorie en praktijk

• deel 1: WordPress, de basis

• deel 2: de zoektocht naar de juiste vormgeving

• deel 3: je website gaan gebruiken

• deel 4: wordpress.com en wordpress.org: de verschillen

• deel 5: huiswerk

3

Wat doen we vanavond in de praktijk?

• even kijken hoe populair WordPress is

• zelf bekijken uit welke elementen een website bestaat

• inloggen en WordPress dashboard bekijken

• vormgevings thema websites bekijken

• een vooraf geïnstalleerd thema kiezen en activeren

• thema instellingen bekijken

• sidebar(s) vullen met widgets

• de opbouw van je homepage maken

• berichten en pagina’s publiceren en bewerken

• menustructuur maken

• even naar wordpress.com kijken 4

WordPress

Deel 1: de basis

5

Waarom WordPress?

• volledig opensource

• wereldwijd enorme grote (on-line) ontwikkelaars- en gebruikers communities

• grote hoeveelheden plugins

• grote hoeveelheden vormgevings thema’s

• in basis redelijk makkelijk te leren (geen complexe leercurve)

6

• de ‘concurrenten’

WordPress in Google Trends

7

• verschil binnen twee dagen......

• dit jaar nog versie 3.8

WordPress downloads: kijk zelf eens

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

WordPress - basis handelingen

• thema’s (vormgeving) kiezen

• menu’s (user interface) maken

• pagina’s (statische inhoud)

• berichten (tijdlijn)

• plugins (uitbreidingen) toepassen

9

WordPress - geavanceerd

• zelf thema’s maken (*)

• deelnemen aan WordCamps (congressen)

• deelnemen aan discussies binnen communities

• andere toepassingen bedenken (webshop, foto album etc.)

• zelf plugin’s maken (*)

• zelf bijdragen aan de kern van WordPress (*)

10

We beginnen met ‘gewone’ pagina’s

bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

bla bla bla bla

bestemd voor ‘statische’ informatie

bijvoorbeeld: ‘wat doe ik’, ‘contact’, ‘producten’, ‘diensten’ etc.

bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

bla bla bla bla

bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

bla bla bla bla

11

Een weblog van een berichten tijdlijn

nieuwste

oudste

tijdlijn

ber

ichte

n

bestemd voor ‘dynamische’ informatie- onder elkaar

bedoeld voor periodieke nieuwsberichten

bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla

bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla

bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla

bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla

12

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

bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla

bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla

bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla

13

Wat zijn Custom Post Types? (*)

14

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

bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla

bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla

bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla

1 2 3

2a

2b

15

WordPress - thema, vormgeving, sidebars, menu

**

(body)inhoud:

bericht(en)of pagina

1 2 3

2a

2b

*

**

**

* mogelijkheden afhankelijk per thema

16

WordPress - widgets: inhoud van sidebars

....

....

1 2 3

2a

2b

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

(body)inhoud:

bericht(en)of pagina

17

WordPress - header/footer (boven- en onderzijde)

1 2 3

2a

2b

header en footer grootte/positie

(body)inhoud:

bericht(en)of pagina

18

(body)inhoud:

bericht(en)of pagina

WordPress - plug-ins (extra functies)

wordpress kern

pluginplugin

plugin

plugin

1 2 3

2a

2b

toegevoegde functies, bijvoorbeeldcontactformulier, social media icons,teller aantal keren gelezen artikel

plugin

19

theme

WordPress - thema: overall look&feel

pluginplugin

pluginplugin

plugin

1 2 3

2a

2b

(body)inhoud:

bericht(en)of pagina

20

wordpress kern

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

Oefening: kijken waar een paar elementen staan

21

header

footer

body

menu

widgets

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

Oefening: de ‘achterkant’ van WordPress

22

gebruikerx

qwertyx

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

Oefening: het zogenaamde ‘dashboard’

23

plaats van blokken zelf in te delen

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

Oefening: het zogenaamde ‘dashboard’

24

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

WordPress

Deel 2: de zoektocht naar de juiste vormgeving

25

Begin eenvoudig: leer eerst de structuur

26

• 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

27

• 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 (*)

28

• Vraagt (veel) kennis van PHP, SQL, CSS en HTML

• PHP - programmeertaal die HTML genereert

• SQL - database

• CSS - vorm, kleur, typografie

• HTML - opmaak

Parent- en childthemes (*)

29

• 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

30

wordpress kern

Child Theme

ParentTheme

Oefening: een geïnstalleerd thema kiezen

31

1

2

Oefening: een geïnstalleerd thema activeren

32

1

Oefening: thema instellingen (voorbeeld1)

33

1

Een thema moet je leren kennen, dat kost tijd!

34

Oefening: sidebars vullen met widgets

35

1

2

3

Oefening: sidebars vullen met widgets

36

Oefening: sidebars vullen met widgets

37

WordPress

Deel 3: je site gaan gebruiken

38

je site gaan gebruiken

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

• x staat voor 1..8

• iedereen krijgt een eigen deel op de site om in te kunnen werken

• dus voorbeeld: http://www.mijnnieuwsmarkt.nl/werksite1

• ga dan naar het dashboard:http://www.mijnnieuwsmarkt.nl/werksite1/wp-admin

• gebruik juiste gebruikersnaam en wachtwoord

39

je site gaan gebruiken

• identiteit

• wie ben ik, wat straal ik uit, wat zijn mijn diensten/producten, welk nieuws heb ik te vertellen, hoe ben ik te bereiken..... etc.

• uiterlijk

• welke vormgeving past bij mij, huisstijl maken, logo etc.

• schrijfwijze

• hoe de juiste toon te zetten in je inhoud

40

je site gaan gebruiken

• begin eenvoudig

• durf gestructureerd te experimenteren

• alles hoeft niet in één keer, maar je bent wel zichtbaar voor Google, tenzij....

• word lid van ‘wordpress’ groepen op LinkedIn

• stel daar je vragen

• zoek veel, heel veel op het web, daar vind je je antwoorden

41

WordPress - let goed op metadata!

pagina’s

tijdlijn (blogs)

titel

body

media

titel

body

media

categorie tags

commentaren(*)

commentaren(*)

content metadata

42

WordPress - menu’s zijn heel flexibel

menu item

leeg (#)

URL

pagina

categorie

tag

43

Oefening: wat kies je als homepage?

44

1

Oefening: je eerste bericht gaan maken

45

12

3 4

56

7

Oefening: je eerste pagina gaan maken

46

12

34

media toevoegen: let erg goed op het formaat!

47

1

2

links toevoegen

48

1

2

3

het menu maken

49

21

het menu maken

50

2

1

3

het menu maken - submenu

51

1

WordPress

Deel 4: wordpress.com en wordpress.org: de verschillen!

52

wordpress.com - alles laten doen

• een zogenaamde hosted service, leuk om te ‘leren’

• basis is gratis, maar beperkt

• geen eigen server nodig, niets te installeren, alles ‘draait’ bij WordPress

• http://jouweigennaam.wordpress.com

• betaald overstappen naar http://www.jouweigenaam.com voor $18/jaar

• ga naar http://www.wordpress.com om te beginnen

53

wordpress.com - het begin

54

wordpress.com - http://jouwnaam.wordpress.com

55

Oefening (alleen als je je e-mail hier kunt ophalen)

56

1

2

3

4

wordpress.com - ‘free blog’

57

wordpress.com - ook het bekende dashboard

58

wordpress.org - alles zelf doen!

• bedoeld om te ‘draaien’ op eigen domein bij een provider

• opensource pakket is gratis

• zelf installeren (bij voldoende kennis in een paar minuten)

• http://www.jouweigennaam.nl

• veel meer mogelijkheden op het gebied van thema’s en plug-ins

• kosten in basis ca. 100 euro per jaar ex. BTW (domeinnaam en hosting)

59

wordpress.org: 5 stappen (zelf doen?)

• 1: wordpress files downloaden vanaf http://nl.wordpress.org

• 2: wordpress files (via FTP) uploaden bij je provider (plek krijg je toegewezen)

• 3. maak SQL database in via het controlpanel van je provider

• database naam, database gebruikersnaam, database wachtwoord en database server

• 4. installatie starten met http://www.jouwnaam.nl/wp-admin/install.php

• 5. instructies op het scherm volgen

60

• installatie via webbrowser: http://www.bedrijf.nl/

wordpress.org: belangrijke gegevens!

61

wordpress.org: je basis gegevens

62

wordpress.org: gelukt

63

http://www.bedrijfsnaam.nl/login

wordpress.org: eerste keer inloggen

64

wordpress.org: en weer je dashboard

65

wordpress.org: voorbeeld luit.nl

66

wordpress.org: installatie door provider

67

Vraag bij een provider altijd naar een control panel

• Veelal is dat Plek of cPanel

• specificaties webhosting

• specificaties database (veelal SQL)

• e-mail adressen (welke e-mail adressen en welke mailbox groottes)

• ftp (dus wie mag waar bestanden uploaden)

• automatische installatie van applicaties (zoals WordPress)

68

WordPress

Deel 5: huiswerk

69

Huiswerk

• Maak gebruik van http://www.mijnnieuwsmarkt.nl/werksitex

• x = het aan jou toegwezen nummer

• bepaal de doelstellingen van hetgeen je met de site wilt gaan doen

• maak voorlopig ‘gewoon’ gebruik van het standaard thema

• bepaal de structuur van de inhoud en maak een daarbij passend menu

• experimenteer met de inhoud in de sidebars

• maak pagina’s en berichten

70

Starten met een eigen website

• Dank voor jullie aandacht• Veel succes

door @peterluit

71