Post on 17-May-2015
description
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