Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Online usability - les 2 introductie WordPress

507 views

Published on

Online usability - les 1 introductie WordPress

Published in: Education
  • Be the first to comment

  • Be the first to like this

Online usability - les 2 introductie WordPress

  1. 1. Starten met een eigen WordPress website deel 2 versie 3.0 - maart 2016 door @peterluit 1
  2. 2. 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
  3. 3. WordPress - deel 2 1. categorieën, tags en notatie 3
  4. 4. 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
  5. 5. 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
  6. 6. 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 • dus ook vormgevingsaspect 6
  7. 7. Categorieën en tags vanuit bericht 7
  8. 8. Vanuit bericht categorie/tag toevoegen 8
  9. 9. Totaal overzicht vanuit ‘Berichten’ menu 9
  10. 10. Overzicht categorieën vanuit ‘Berichten’ menu 10
  11. 11. Beschouw de slug als permalink, dus geen spaties 11
  12. 12. Tags volgens hetzelfde principe: vrije woorden 12
  13. 13. Waar staan ze in het thema ‘TwentyFourteen’? 13
  14. 14. WordPress - deel 2 2. uitgelichte afbeelding 14
  15. 15. Uitgelichte afbeelding 15 • 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)
  16. 16. Voorbeeld: uitgelichte afbeelding 16
  17. 17. Voorbeeld: slider als uitgelichte afbeelding 17
  18. 18. WordPress - deel 2 3. tekstverwerking 18
  19. 19. Tekstverwerking 19 • 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.
  20. 20. Tekstverwerking - extra’s 20 • Blockquote • Horizontale lijn invoegen • Links (koppelen, ontkoppelen) • Lees meer… • Google is gek op h3 tags
 = tussenkopjes
  21. 21. WordPress - deel 2 4. media toevoegen: beelden, galerij, video 21
  22. 22. Media: in bibliotheek, uploaden of via URL 22
  23. 23. Media: in bibliotheek, uploaden of via URL 23
  24. 24. Media: een galerij aanmaken 24
  25. 25. Media: een galerij aanmaken 25
  26. 26. Media: een galerij aanmaken (voorbeeld) 26
  27. 27. Media: video plaatsen 27 • 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
  28. 28. WordPress - deel 2 5. reacties/trackbacks 28
  29. 29. Reacties: algemene instellingen 29
  30. 30. Reacties: per bericht 30 • 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
  31. 31. WordPress - deel 2 6. auteur (gebruikers), revisies en publiceren 31
  32. 32. Publiceren - de opties 32 • status (workflow) • zichtbaarheid • sticky • via wachtwoord • privé • revisies • datum/tijd publicatie (workflow) • indien zoekmachine optimalisatie plugin: status SEO
  33. 33. Publiceren - Revisies overzicht vanuit ‘Publiceren’ 33
  34. 34. Publiceren - Auteur en revisies vanuit bericht 34 • Auteur: pull-down lijst met te kiezen gebruikers • Revisies: terug naar vorige versies bericht
  35. 35. Publiceren - Wat mogen gebruikers? 35 • 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
  36. 36. Publiceren - Overzicht gebruikers 36
  37. 37. Publiceren - Nieuwe gebruiker 37
  38. 38. WordPress - deel 2 7. pagina’s maken 38
  39. 39. Berichten nieuwste oudste tijdlijnberichten 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…) 39 menu: nieuws (bij regelmatig nieuws, vaak de homepage)
  40. 40. 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 40 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 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:
  41. 41. Overzicht alle pagina’s 41
  42. 42. Een pagina maken 42
  43. 43. • 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/sjablonen aanbieden voor de weergave van pagina’s (voor nu nog niet van belang) Volgorde en templates 43
  44. 44. • 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 44
  45. 45. • Je laatste berichten • Een statische pagina Wat zet je op je homepage? 45
  46. 46. WordPress - deel 2 8. WordPress menu’s 46
  47. 47. Menu’s - de basis 47 versleep naar rechts voor submenu
  48. 48. De menu-item mogelijkheden 48 • 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’
  49. 49. Menu locaties in thema’s - verschillende inhoud 49 • TwentyFourteen (menu horizontaal, menu verticaal) • Genesis met Dynamik ChildTheme (aparte menu’s voor mobiel)
  50. 50. Hoe maak je een submenu-item? 50 • Selecteer een menu-item, drag & drop naar rechts verschuiven • Resultaat (‘docent’ alleen voor pulldown functie, dus geen werkende link!) versleep naar rechts voor submenu
  51. 51. Eerste item voor een submenu is ‘leeg’ 51 • Plaats # in de URL om te voorkomen dat eerste item van submenu ‘linkt’ vul ‘#’ in voor een ‘lege link’
  52. 52. Link naar externe bron (nieuw scherm/tab) 52 • Ga naar scherminstellingen en kies ‘Linkdoel’ bij externe URL ‘nieuw venster/tab’
  53. 53. ‘Leden’ website: alleen menu item(s) na inloggen 53 • 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
  54. 54. Bestudeer ‘conditional tags’ (*) 54
  55. 55. Aandachtspunten bij menu’s 55 • 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
  56. 56. Oefening: maak je eigen menu 56
  57. 57. Oefening: maak je eigen menu 57 • 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
  58. 58. Huiswerk 58 • Probeer eens voor jezelf een menustructuur te bedenken • Ga eens op zoek naar een voor jouw geschikt thema • En bepaal welke soort inhoud (berichten of pagina) je op de homepage wilt publiceren 1 2 3 2a 2b

×