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 3 introductie WordPress - thema's, widgets en plugins

547 views

Published on

Online usability - les 3 introductie WordPress - thema's, widgets en plugins

Published in: Education
  • Be the first to comment

  • Be the first to like this

Online usability - les 3 introductie WordPress - thema's, widgets en plugins

  1. 1. Starten met een eigen WordPress website deel 3 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 plugins 2
  3. 3. WordPress - deel 3 1. WordPress thema’s 3
  4. 4. WordPress thema’s 4 • Wat is belangrijk bij de keuze van een thema? • primaire doelgroep, hoe communiceer ik daarmee? • doel van je website (communicatie plan), kern van je boodschap • nice-to-have of need-to-have? • content planning, wat komt waar, menustructuur • (kennis en kunde van achterliggende technieken)
  5. 5. WordPress thema’s 5 • Gratis thema’s vaak beginnersnorm (goed om verschillen te leren kennen) • http://www.wordpress.org/themes (ca. 2800, bijna 112 miljoen downloads) • betaalde thema’s (overzicht) bij wordpress.org:
 http://www.wordpress.org/themes/commercial/ • kijk vooral naar de mogelijkheden aan de ‘achterkant’ • instellingen kleuren (vlakken, kaders etc.) • instellingen lettertypen (kleur, type, grootte, stijl) • layout indeling, sidebars, widgets, header, footer
  6. 6. Wat doen thema’s nog meer? 6 • Thema bieden vaak zogenaamde temptaties (pagina indelingen) • Sommige thema’ bieden bovenstaande mogelijkheden ook ‘visueel’ aan
  7. 7. Zoeken bij wordpress.org of uploaden 7
  8. 8. Zoeken op basis van eigenschappen 8
  9. 9. Uploaden 9
  10. 10. Betaalde thema’s 10 • Doorgaans tussen 20-80 euro • vaak (meer) serieuze bedrijven/ontwikkelaars • vaak gemaakt met bepaald doel vanuit één creatieve gedachte • pas op abonnementen voor eventuele updates • overweeg je keuze niet alleen op basis van de creatieve ‘voorkant’ • let dus vooral op de mogelijkheden aan de ‘achterkant'
  11. 11. Hoe bewaren thema’s hun instellingen 11 • in de SQL database, blijven dus bewaard bij updaten thema • idem en als extern bestand, ook later te importeren in andere website(s) • eigen instellingen in ‘custom CSS’ veld binnen het thema (*)
  12. 12. Voorbeeld van een stukje CSS code (*) 12 • bestudeer CSS via http://www.w3schools.com (*)
  13. 13. Wat gebeurt er met gewijzigde code in een thema? 13 • als je in een bestand van je thema wijzigingen aanbrengt, dan worden deze overschreven bij een update van het thema • een oplossing is het aanmaken van een zogenaamd ChildTheme • daarin staan bestanden die je zelf kunt wijzigen, zoals style.css • als het zogenaamde Parent Theme wordt geupdate, dan blijven de instellingen in het ChildTheme behouden (*) • het ChildTheme is altijd het actieve thema, het ParentTheme moet wel geïnstalleerd zijn (*)
  14. 14. ParentTheme en ChildTheme voorbeelden (*) 14 ParentTheme ParentTheme ParentTheme
  15. 15. Activeren van een ChildTheme (*) 15
  16. 16. Aspecten bij responsive design 16 • ontwerper bepaalt in principe de volgorde van de opbouw • stel: website is linker sidebar, content, rechter sidebar • voorbeeld op mobiel: content, linker sidebar, rechter sidebar • aanpassen in style.css via @media (*) • let goed op of thema responsieve design aanbiedt! • responsive design is geen vervanging van een native app!
  17. 17. Voorbeelden smartphone 17
  18. 18. Voorbeelden tablet 18
  19. 19. Updaten van thema’s 19
  20. 20. WordPress - deel 3 2. Sidebars en widgets binnen thema’s 20
  21. 21. Sidebars en widgets 21 • Het samenspel van thema en plugins bepalen de mogelijkheden van de ‘widget’ editor voor het plaatsen van widgets in de verschillende sidebars • met de term ‘widget area’ wordt een sidebar bedoeld • indien van toepassing wordt na de installatie van een plugin een ‘available widget’ in de widget editor getoond, om geplaatst te worden in een sidebar • voorbeeld: een plugin om formulieren te maken ‘Gravity Forms’ maakt het mogelijk om een invulformulier in een sidebar te plaatsen
  22. 22. Widgets plaatsen in sidebars binnen een thema 22
  23. 23. Widgets plaatsen in sidebars binnen een thema 23 4 footer gebieden
  24. 24. Sidebars en widgets 24 • Elk thema maakt gebruik van één of meer sidebars, waarin meerdere widgets kunnen worden geplaatst • WordPress biedt standaard een hele reeks bruikbare widgets • Plugins kunnen widgets installeren, die zelf geplaatst kunnen worden
  25. 25. WordPress - deel 3 3. Plugins 25
  26. 26. Soorten plugins - een heel globale opsomming uit ca. 40.000 exemplaren (1) 26 • formulieren (informatie aanvraag, inschrijvingen etc.) • social media (twitter, Facebook koppelingen etc.) • slideshows, sliders, advertenties, fotoboeken • admin/techn. ondersteuning (Google Analytics, SEO, sitemap, caching etc.) • webshop (producten, betalen etc.) • evenementen (overzichten, inschrijven) • veiligheid (anti-spam, backups etc.)
  27. 27. Soorten plugins - een heel globale opsomming uit ca. 40.000 exemplaren (2) 27 • forum • redactionele workflows • leden websites (met afgeschermde delen) • mobiele simulatie • etc. etc.
  28. 28. wordpress.org/plugins 28
  29. 29. wordpress.org/plugins 29
  30. 30. Algemeen geldende adviezen 30 • installeer en activeer alleen hetgeen je echt nodig hebt • verwijder niet gebruikte plugins • check of de plugin up to date is • kijk naar het aantal downloads • kijk naar de beoordeling • kijk naar de beantwoording van support vragen
  31. 31. Installeren van een plugin 31
  32. 32. Uploaden van een plugin (.zip file) 32
  33. 33. Overzicht van geïnstalleerde plugins 33
  34. 34. Update signaal: wacht altijd paar weken 34
  35. 35. Updaten van plugins 35
  36. 36. Overzicht tijdens updaten 36
  37. 37. • WooCommerce - het maken van een webshop • verschillende add-ons (deels betaald) mogelijk • GravityForms - het maken van geavanceerde formulieren • FormidablePro - alternatief voor formulieren plugin • WordPress SEO by Yoast: zoekmachine optimalisatie • Google Analytics by Yoast: bezoekers analyse Paar voorbeelden van plugins 37
  38. 38. • Issuu Embed: PDF’s weergeven • EditFlow: redactionele workflow (iets verouderd) • Dynamic Widgets - verschillende widgets op verschillende pagina’s • S2Member: abonnementen website met betaal mogelijkheden Paar voorbeelden van plugins 38
  39. 39. Pas op voor verouderde plugins 39
  40. 40. Support forum (let op actualiteit en aantal reacties) 40
  41. 41. • back-up/restore van database: WP Database Backup • voorkomen van spam: Akismet • optimaliseren database (o.a. verwijderen niet gebruikte tabellen uit verwijderde plugins): WP-Optimize • snelheid optimaliseren (indien nodig): W3 Total Cache • diverse plugins om (aantallen) logins te limiteren: bijv. Login Lockdown • ‘onderhoudsscherm’: Maintenance Mode Plugins voor technisch onderhoud 41
  42. 42. WordPress - deel 3 4. Wat hebben we geleerd? 42
  43. 43. Samenvatting bereikte leerdoelen met 150 slides 43 • dashboard, inloggen gebruikers, instellingen • berichten, pagina’s, reacties, categorieën, tags, spam, indeling homepage • media, plaatsen, uitlijnen, vergroten/verkleinen, embedden, uitgelichte afb. • soorten thema’s, sidebars, widgets, header, footer
  44. 44. WordPress is learning by doing: veel succes! 44 advies, ondersteuning, implementatie: @peterluit peter@luit.nl tel.:06-20709846

×