![Page 1: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/1.jpg)
Starten met een eigen WordPress website
deel 2!!!!!door @peterluit
1
![Page 2: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/2.jpg)
Programma omvat 3 delen, globale inhoud
• deel 1: introductie, content (de basis)
• deel 2: vervolg content en menu’s
• deel 3: thema’s, widgets en plugin
2
![Page 3: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/3.jpg)
WordPress - deel 2
1. categorieën, tags en notatie
3
![Page 4: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/4.jpg)
Doel van categorieën en tags (alleen bij berichten)
• primair bedoeld voor het interne ‘zoekveld’
• tevens duiding van het type bericht bij publicatie
• beperk het aantal categorieën (5-15) om overzicht te houden
• het is netjes om 1 categorie per bericht aan te houden - als het kan
4
![Page 5: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/5.jpg)
Doel van categorieën en tags (alleen bij berichten)
• tags zijn toegevoegde woorden die vaak in de tekst voorkomen
• beperk het aantal ‘tag’ woorden per bericht tot 3 of 4
5
![Page 6: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/6.jpg)
Doel van categorieën en tags (alleen bij berichten)
• zoekmachines ‘zien’ de verwijzingen naar categorieën en tags
• http://www.xxxxx.nl/categorie/onderzoek
• http://www.xxxxx.nl/tag/vorig-jaar
• de naam ‘categorie’ en ‘tag’ is aan te passen bij ‘Instellingen’
• Elk thema plaatst categorieën en tags op eigen wijze bij het bericht
6
![Page 7: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/7.jpg)
Categorieën en tags vanuit bericht
7
![Page 8: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/8.jpg)
Vanuit bericht categorie/tag toevoegen
8
![Page 9: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/9.jpg)
Totaal overzicht vanuit ‘Berichten’ menu
9
![Page 10: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/10.jpg)
Overzicht categorieën vanuit ‘Berichten’ menu
10
![Page 11: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/11.jpg)
Beschouw de slug als permalink, dus geen spaties
11
![Page 12: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/12.jpg)
Tags volgens hetzelfde principe: vrije woorden
12
![Page 13: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/13.jpg)
Waar staan ze in het thema ‘TwentyFourteen’?
13
![Page 14: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/14.jpg)
Notatie: type bericht aanduiden
14
• Deze voorziening is ingebouwd in de standaard WordPress thema’s, maar wordt verder nauwelijks toegepast en staat bij het gebruik meestal op ‘Standaard’
![Page 15: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/15.jpg)
WordPress - deel 2
2. uitgelichte afbeelding
15
![Page 16: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/16.jpg)
Uitgelichte afbeelding
16
• Een uitgelichte afbeelding is bedoeld als icoon/kenmerk bij een artikel, bijvoorbeeld een logo
• thema’s gaan hier verschillend mee om, sommige thema’s gebruiken ‘gewoon’ het eerste beeld uit een bericht als uitgelichte afbeelding
• thema’s zijn ook vrij in de grootte van de uitgelichte afbeelding, aanpassingen kunnen al dan niet direct in het dashboard worden verricht, of via aanpassingen in stylesheets
• een uitgelichte afbeelding kies je uit je media bibliotheek of je upload een nieuw beeld (behandeld bij media gebruik)
![Page 17: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/17.jpg)
Voorbeeld: auteur als uitgelichte afbeelding
17
![Page 18: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/18.jpg)
Voorbeeld: icoon als uitgelichte afbeelding
18
![Page 19: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/19.jpg)
WordPress - deel 2
3. tekstverwerking
19
![Page 20: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/20.jpg)
Tekstverwerking
20
• Doorgaans wat je gewend bent vanuit reguliere tekst verwerkingsprogramma’s
• ‘Wysiwyg’ is niet helemaal waar (klik altijd op ‘voorbeeld’ of ‘wijzigingen bekijken’ bij blokjePubliceren)
• Tekst is ‘platte weergave’ met codes voor bijvoorbeeld plaatsing van media, tekstformats, uitlijning etc.
![Page 21: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/21.jpg)
Tekstverwerking - extra’s
21
• Blockquote
• Horizontale lijn invoegen
• Links (koppelen, ontkoppelen)
• Lees meer…
• Google is gek op h3 tags= tussenkopjes
![Page 22: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/22.jpg)
WordPress - deel 2
4. media toevoegen: beelden, galerij, video
22
![Page 23: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/23.jpg)
Media: in bibliotheek, uploaden of via URL
23
![Page 24: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/24.jpg)
Media: in bibliotheek, uploaden of via URL
24
![Page 25: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/25.jpg)
Media: een galerij aanmaken
25
![Page 26: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/26.jpg)
Media: video plaatsen
26
• Voorheen door middel van embed (insluiten) code in ‘tekst’ modus in bericht
• Voorbeeld vanuit YouTube, copy/paste <iframe……..</iframe>
• Vanaf versie 4.0, alleen URL plaatsen:http://www.youtube.com/watch?v=xxxxxxx
![Page 27: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/27.jpg)
WordPress - deel 2
5. reacties/trackbacks
27
![Page 28: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/28.jpg)
Reacties: algemene instellingen
28
![Page 29: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/29.jpg)
Reacties: per bericht
29
• Per bericht kunnen reacties al dan niet worden toegestaan
• Per bericht kunnen trackbacks/pingback worden toegestaan
• notificatie van verwijzing dat een link van je eigen artikel op een site van iemand anders staat
![Page 30: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/30.jpg)
WordPress - deel 2
6. auteur (gebruikers), revisies en publiceren
30
![Page 31: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/31.jpg)
Publiceren - de opties
31
• status (workflow)
• zichtbaarheid
• sticky
• via wachtwoord
• privé
• revisies
• datum/tijd publicatie (workflow)
• indien zoekmachine optimalisatie plugin: status SEO
![Page 32: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/32.jpg)
Publiceren - Revisies overzicht vanuit ‘Publiceren’
32
![Page 33: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/33.jpg)
Publiceren - Auteur en revisies vanuit bericht
33
• Auteur: pull-down lijst met te kiezen gebruikers
• Revisies: terug naar vorige versies bericht
![Page 34: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/34.jpg)
Publiceren - Wat mogen gebruikers?
34
• abonnee - alleen lezen en eigen profiel bekijken/veranderen
• schrijver - idem, plus alleen ‘drafts’ maken, dus niet zelf publiceren
• auteur - idem, plus zelf publiceren en eigen artikelen bewerken
• redacteur - idem plus, mag alle artikelen van alle schrijvers/auteurs bewerken
• admin - mag alles wat redacteur mag plus technisch/creatief beheer
![Page 35: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/35.jpg)
Publiceren - Overzicht gebruikers
35
![Page 36: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/36.jpg)
Publiceren - Nieuwe gebruiker
36
![Page 37: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/37.jpg)
WordPress - deel 2
7. pagina’s maken
37
![Page 38: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/38.jpg)
Berichten
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…)
38
menu: nieuws (bij regelmatig nieuws, vaak de homepage)
![Page 39: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/39.jpg)
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
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
39
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 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:
![Page 40: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/40.jpg)
Overzicht alle pagina’s
40
![Page 41: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/41.jpg)
Een pagina maken
41
![Page 42: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/42.jpg)
• Het veldje ‘volgorde’ is een overblijfsel uit het verleden om pagina’s in een bepaalde volgorde in het menu te plaatsen. tegenwoordig gaat dat via de ‘Weergave’ - ‘Menu’ instellingen
• Thema’s kunnen verschillende templates aanbieden voor de weergave van pagina’s (voor nu nog niet van belang)
Volgorde en templates
42
![Page 43: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/43.jpg)
• Zodra je je pagina hebt gemaakt, publiceer je deze, net zoals bij berichten
• Het tonen van je pagina doe je (nu nog) door middel van ‘Pagina bekijken’
Het tonen van een pagina
43
![Page 44: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/44.jpg)
• Je laatste berichten
• Een statische pagina
Wat zet je op je homepage?
44
![Page 45: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/45.jpg)
WordPress - deel 2
8. WordPress menu’s
45
![Page 46: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/46.jpg)
Menu’s - de basis
46
versleep naar rechts voor submenu
![Page 47: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/47.jpg)
De menu-item mogelijkheden
47
• Pagina’s
• Links (in- en extern en ‘no’ link voor submenu d.m.v. # als URL)
• Berichten categorieën (prima voor on-line magazines)
• Berichten tags (komt niet zo heel vaak voor)
• Optioneel: ‘berichten’ via ‘Scherminstellingen’
![Page 48: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/48.jpg)
Menu locaties in thema’s - verschillende inhoud
48
• TwentyFourteen (menu horizontaal, menu verticaal)
• Genesis met Dynamik ChildTheme (aparte menu’s voor mobiel)
![Page 49: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/49.jpg)
Hoe maak je een submenu-item?
49
• Selecteer een menu-item, drag & drop naar rechts verschuiven
• Resultaat (‘docent’ alleen voor pulldown functie, dus geen werkende link!)
versleep naar rechts voor submenu
![Page 50: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/50.jpg)
Eerste item voor een submenu is ‘leeg’
50
• Plaats # in de URL om te voorkomen dat eerste item van submenu ‘linkt’
vul ‘#’ in voor een ‘lege link’
![Page 51: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/51.jpg)
Link naar externe bron (nieuw scherm/tab)
51
• Ga naar scherminstellingen en kies ‘Linkdoel’
bij externe URL ‘nieuw venster/tab’
![Page 52: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/52.jpg)
‘Leden’ website: alleen menu item(s) na inloggen
52
• Kan door middel van een plug-in, bijvoorbeeld
• ‘Menu Item Visibility Control’, zet een extra conditie bij elk menu item (*)
• Voorbeeld: menu item geldig voor alleen ingelogde gebruikers
• is_user_logged_in() - laat item zien als gebruiker is ingelogd
• zie meer ‘conditional tags: http://codex.wordpress.org/Conditional_Tags
hier conditie invullen om menu-item al dan niet te laten zien
![Page 53: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/53.jpg)
Bestudeer ‘conditional tags’ (*)
53
![Page 54: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/54.jpg)
Aandachtspunten bij menu’s
54
• Maak eerst content beleid, maak daarna menu’s
• Probeer menu’s te beperken tot maximaal 2 locaties
• Maak eerst content beleid, maak daarna menu’s
• Denk na over (andere) menu’s voor mobiel/responsive
• ‘home’ meestal links/boven, ‘contact’ meestal rechts/onder
• Probeer submenu’s te beperken tot 2 niveaus
• conditionele menu’s voor ‘leden/abonnementen’ websites
![Page 55: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/55.jpg)
Oefening: maak je eigen menu
55
![Page 56: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/56.jpg)
Oefening: maak je eigen menu
56
• ga naar je eigen werksite
• maak een paar pagina’s (indien nog niet gedaan), met een introductie inhoud
• ga naar ‘weergave’ - ‘menu’
• er is al een menu aangemaakt met de naam ‘menu’
• selecteer je pagina en kies ‘Aan menu toevoegen’
• je menu-item verschijnt onderaan het menu, versleep voor de juiste lokatie
• maak ook een menu met een titel en daaronder een submenu met pagina’s
![Page 57: Online usability - les 2 introductie WordPress](https://reader033.vdocument.in/reader033/viewer/2022060119/558eb5ce1a28ab613c8b45c1/html5/thumbnails/57.jpg)
Huiswerk
57
• Probeer eens voor jezelf een menustructuur te bedenken
• Ga eens op zoek naar een voor jouw geschikt thema
• En bepaald welke soort inhoud (berichten of pagina) je op de homepage wilt publiceren
1 2 3
2a
2b