Online usability - les 3 introductie WordPress - thema's, widgets en plugins
1. Starten met een eigen WordPress website
deel 3
versie 3.0 - maart 2016
door @peterluit
1
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
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. 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. Wat doen thema’s nog meer?
6
• Thema bieden vaak zogenaamde temptaties (pagina indelingen)
• Sommige thema’ bieden bovenstaande mogelijkheden ook ‘visueel’ aan
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. 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. Voorbeeld van een stukje CSS code (*)
12
• bestudeer CSS via http://www.w3schools.com (*)
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 (*)
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!
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
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
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
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. • 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