les 3 inct. training wordpress
DESCRIPTION
Peter Luit verzorgt voor Inct. - het uitgeeplatform voor uitgevers - de training WordPress: dat kan ik zelfTRANSCRIPT
![Page 1: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/1.jpg)
Starten met een eigen WordPress website
deel 3!!!!!door @peterluit
1
![Page 2: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/2.jpg)
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
![Page 3: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/3.jpg)
WordPress - deel 3
1. WordPress menu’s
3
![Page 4: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/4.jpg)
Menu’s - de basis
4
versleep naar rechts voor submenu
![Page 5: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/5.jpg)
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’
![Page 6: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/6.jpg)
Menu locaties in thema’s - verschillende inhoud
6
• TwentyFourteen (menu horizontaal, menu verticaal)
• Genesis met Dynamik ChildTheme (aparte menu’s voor mobiel)
![Page 7: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/7.jpg)
Hoe maak je een submenu-item?
7
• Selecteer een menu-item, drag & drop naar rechts verschuiven
• Resultaat (‘docent’ alleen voor pulldown functie, dus geen werkende link!)
versleep naar rechts voor submenu
![Page 8: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/8.jpg)
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’
![Page 9: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/9.jpg)
Link naar externe bron (nieuw scherm/tab)
9
• Ga naar scherminstellingen en kies ‘Linkdoel’
bij externe URL ‘nieuw venster/tab’
![Page 10: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/10.jpg)
‘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 (*)
• 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
![Page 11: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/11.jpg)
Bestudeer ‘conditional tags’ (*)
11
![Page 12: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/12.jpg)
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
![Page 13: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/13.jpg)
Oefening: maak je eigen menu
13
![Page 14: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/14.jpg)
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
![Page 15: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/15.jpg)
WordPress - deel 3
2. WordPress thema’s
15
![Page 16: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/16.jpg)
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)
![Page 17: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/17.jpg)
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
![Page 18: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/18.jpg)
Wat doen thema’s nog meer?
18
• Thema bieden vaak zogenaamde temptaties (pagina indelingen)
• Sommige thema’ bieden bovenstaande mogelijkheden ook ‘visueel’ aan
![Page 20: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/20.jpg)
Zoeken op basis van eigenschappen
20
![Page 21: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/21.jpg)
Uploaden
21
![Page 22: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/22.jpg)
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'
![Page 23: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/23.jpg)
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 (*)
![Page 24: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/24.jpg)
Voorbeeld van een stukje CSS code (*)
24
• bestudeer CSS via http://www.w3schools.com (*)
![Page 25: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/25.jpg)
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 (*)
![Page 26: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/26.jpg)
ParentTheme en ChildTheme voorbeelden (*)
26
ParentTheme
ParentTheme ParentTheme
![Page 27: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/27.jpg)
Activeren van een ChildTheme (*)
27
![Page 28: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/28.jpg)
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!
![Page 29: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/29.jpg)
Voorbeelden smartphone
29
![Page 30: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/30.jpg)
Voorbeelden tablet
30
![Page 31: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/31.jpg)
Updaten van thema’s
31
![Page 32: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/32.jpg)
• 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
Multisite thema’s installatie
32
![Page 33: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/33.jpg)
• thema’s moeten eerst in het netwerk worden geactiveerd alvorens ze in een subwebsite kunnen worden gebruikt
Multisite thema’s installatie - activeren
33
![Page 34: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/34.jpg)
WordPress - deel 3
3. Plugins!!!!!
34
![Page 35: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/35.jpg)
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.)
![Page 36: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/36.jpg)
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.
![Page 39: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/39.jpg)
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
![Page 40: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/40.jpg)
Installeren van een plugin
40
![Page 41: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/41.jpg)
Uploaden van een plugin (.zip file)
41
![Page 42: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/42.jpg)
Overzicht van geïnstalleerde plugins
42
![Page 43: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/43.jpg)
• 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
Multisite plugin installatie
43
![Page 44: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/44.jpg)
• in een netwerk activeren voor alle sites
• per subsite activeren
Multisite plugin installatie - activeren
44
![Page 45: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/45.jpg)
Update signaal: wacht altijd paar weken
45
![Page 46: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/46.jpg)
Overzicht tijdens updaten
46
![Page 47: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/47.jpg)
• 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 voor uitgeefdoelen
47
![Page 48: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/48.jpg)
• 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 voor uitgeefdoelen
48
![Page 49: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/49.jpg)
Pas op voor verouderde plugins
49
![Page 50: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/50.jpg)
Support forum (let op actualiteit en aantal reacties)
50
![Page 51: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/51.jpg)
• 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
51
![Page 52: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/52.jpg)
Updaten van plugins
52
![Page 53: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/53.jpg)
Huiswerk: conditionele content
4. Bestudeer de inleiding ‘Toelichting bij derde huiswerkopdracht’ en ga vervolgens aan de slag
53
![Page 54: Les 3 Inct. Training WordPress](https://reader033.vdocuments.site/reader033/viewer/2022042714/557c470bd8b42a23598b5346/html5/thumbnails/54.jpg)
Starten met een eigen WordPress website
deel 3!!!!!door @peterluit
54