1. Starten met een eigen WordPress website
deel 3
!
!
!
!
!
door @peterluit
1
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
4. Menu’s - de basis
4
versleep naar rechts voor submenu
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. Menu locaties in thema’s - verschillende inhoud
6
• TwentyFourteen (menu horizontaal, menu verticaal)
• Genesis met Dynamik ChildTheme (aparte menu’s voor mobiel)
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. 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. Link naar externe bron (nieuw scherm/tab)
9
• Ga naar scherminstellingen en kies ‘Linkdoel’
bij externe URL ‘nieuw venster/tab’
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
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
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
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. 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. Wat doen thema’s nog meer?
18
• Thema bieden vaak zogenaamde temptaties (pagina indelingen)
• Sommige thema’ bieden bovenstaande mogelijkheden ook ‘visueel’ aan
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. 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. Voorbeeld van een stukje CSS code (*)
24
• bestudeer CSS via http://www.w3schools.com (*)
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 (*)
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!
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. Multisite thema’s installatie - activeren
• thema’s moeten eerst in het netwerk worden geactiveerd alvorens ze in een
subwebsite kunnen worden gebruikt
33
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
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
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. 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