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.

Les 3 Inct. Training WordPress

504 views

Published on

Peter Luit verzorgt voor Inct. - het uitgeeplatform voor uitgevers - de training WordPress: dat kan ik zelf

Published in: Education
  • Be the first to comment

  • Be the first to like this

Les 3 Inct. Training WordPress

  1. 1. Starten met een eigen WordPress website deel 3 ! ! ! ! ! door @peterluit 1
  2. 2. Programma omvat 4 middagen, globale inhoud • deel 1: introductie • deel 2: werken met content • deel 3: menu’s, thema’s en plugins • deel 4: sidebars en widgets 2
  3. 3. WordPress - deel 3 1. WordPress menu’s 3
  4. 4. Menu’s - de basis 4 versleep naar rechts voor submenu
  5. 5. De menu-item mogelijkheden 5 • 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’
  6. 6. Menu locaties in thema’s - verschillende inhoud 6 • TwentyFourteen (menu horizontaal, menu verticaal) • Genesis met Dynamik ChildTheme (aparte menu’s voor mobiel)
  7. 7. Hoe maak je een submenu-item? 7 • Selecteer een menu-item, drag & drop naar rechts verschuiven versleep naar rechts voor submenu • Resultaat (‘docent’ alleen voor pulldown functie, dus geen werkende link!)
  8. 8. Eerste item voor een submenu is ‘leeg’ 8 • Plaats # in de URL om te voorkomen dat eerste item van submenu ‘linkt’ vul ‘#’ in voor een ‘lege link’
  9. 9. Link naar externe bron (nieuw scherm/tab) 9 • Ga naar scherminstellingen en kies ‘Linkdoel’ bij externe URL ‘nieuw venster/tab’
  10. 10. ‘Leden’ website: alleen menu item(s) na inloggen 10 • Kan door middel van een plug-in, bijvoorbeeld • ‘Menu Item Visibility Control’, zet een extra conditie bij elk menu item (*) hier conditie invullen om menu-item al dan niet te laten zien • 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
  11. 11. Bestudeer ‘conditional tags’ (*) 11
  12. 12. Aandachtspunten bij menu’s 12 • 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
  13. 13. Oefening: maak je eigen menu 13
  14. 14. Oefening: maak je eigen menu 14 • 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
  15. 15. WordPress - deel 3 2. WordPress thema’s 15
  16. 16. WordPress thema’s 16 • 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)
  17. 17. WordPress thema’s 17 • 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
  18. 18. Wat doen thema’s nog meer? 18 • Thema bieden vaak zogenaamde temptaties (pagina indelingen) • Sommige thema’ bieden bovenstaande mogelijkheden ook ‘visueel’ aan
  19. 19. Zoeken bij wordpress.org of uploaden 19
  20. 20. Zoeken op basis van eigenschappen 20
  21. 21. Uploaden 21
  22. 22. Betaalde thema’s 22 • 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'
  23. 23. Hoe bewaren thema’s hun instellingen 23 • 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 (*)
  24. 24. Voorbeeld van een stukje CSS code (*) 24 • bestudeer CSS via http://www.w3schools.com (*)
  25. 25. Wat gebeurt er met gewijzigde code in een thema? 25 • 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 (*)
  26. 26. ParentTheme en ChildTheme voorbeelden (*) 26 ParentTheme ParentTheme ParentTheme
  27. 27. Activeren van een ChildTheme (*) 27
  28. 28. Aspecten bij responsive design 28 • 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!
  29. 29. Voorbeelden smartphone 29
  30. 30. Voorbeelden tablet 30
  31. 31. Updaten van thema’s 31
  32. 32. Multisite thema’s installatie • bij een netwerk/multisite worden thema’s alleen in het netwerk geïnstalleerd • naar keuze kunnen thema’s voor het hele netwerk worden geactiveerd of op basis van afzonderlijke subsites 32
  33. 33. Multisite thema’s installatie - activeren • thema’s moeten eerst in het netwerk worden geactiveerd alvorens ze in een subwebsite kunnen worden gebruikt 33
  34. 34. WordPress - deel 3 3. Plugins ! ! ! ! ! 34
  35. 35. Soorten plugins - een heel globale opsomming uit ca. 40.000 exemplaren (1) 35 • 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.)
  36. 36. Soorten plugins - een heel globale opsomming uit ca. 40.000 exemplaren (2) 36 • forum • redactionele workflows • leden websites (met afgeschermde delen) • mobiele simulatie • etc. etc.
  37. 37. wordpress.org/plugins 37
  38. 38. wordpress.org/plugins 38
  39. 39. Algemeen geldende adviezen 39 • 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
  40. 40. Installeren van een plugin 40
  41. 41. Uploaden van een plugin (.zip file) 41
  42. 42. Overzicht van geïnstalleerde plugins 42
  43. 43. Multisite plugin installatie • bij een netwerk/multisite worden plugins alleen in het netwerk geïnstalleerd • naar keuze kunnen plugin voor het hele netwerk worden geactiveerd of op basis van afzonderlijke subsites 43
  44. 44. Multisite plugin installatie - activeren • in een netwerk activeren voor alle sites • per subsite activeren 44
  45. 45. Update signaal: wacht altijd paar weken 45
  46. 46. Overzicht tijdens updaten 46
  47. 47. Paar voorbeelden van plugins voor uitgeefdoelen • 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 47
  48. 48. Paar voorbeelden van plugins voor uitgeefdoelen • Issuu Embed: PDF’s weergeven • EditFlow: redactionele workflow (iets verouderd) • Dynamic Widgets - verschillende widgets op verschillende pagina’s • S2Member: abonnementen website met betaal mogelijkheden 48
  49. 49. Pas op voor verouderde plugins 49
  50. 50. Support forum (let op actualiteit en aantal reacties) 50
  51. 51. Plugins voor technisch onderhoud • 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 51
  52. 52. Updaten van plugins 52
  53. 53. Huiswerk: conditionele content 4. Bestudeer de inleiding ‘Toelichting bij derde huiswerkopdracht’ en ga vervolgens aan de slag 53
  54. 54. Starten met een eigen WordPress website deel 3 ! ! ! ! ! door @peterluit 54

×