Upload
peter-luit
View
167
Download
5
Tags:
Embed Size (px)
DESCRIPTION
Peter Luit verzorgt voor Inct. - het uitgeeplatform voor uitgevers - de training WordPress: dat kan ik zelf
Citation preview
Starten met een eigen WordPress website
deel 3!!!!!door @peterluit
1
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
WordPress - deel 3
1. WordPress menu’s
3
Menu’s - de basis
4
versleep naar rechts voor submenu
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’
Menu locaties in thema’s - verschillende inhoud
6
• TwentyFourteen (menu horizontaal, menu verticaal)
• Genesis met Dynamik ChildTheme (aparte menu’s voor mobiel)
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
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’
Link naar externe bron (nieuw scherm/tab)
9
• Ga naar scherminstellingen en kies ‘Linkdoel’
bij externe URL ‘nieuw venster/tab’
‘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
Bestudeer ‘conditional tags’ (*)
11
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
Oefening: maak je eigen menu
13
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
WordPress - deel 3
2. WordPress thema’s
15
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)
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
Wat doen thema’s nog meer?
18
• Thema bieden vaak zogenaamde temptaties (pagina indelingen)
• Sommige thema’ bieden bovenstaande mogelijkheden ook ‘visueel’ aan
Zoeken op basis van eigenschappen
20
Uploaden
21
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'
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 (*)
Voorbeeld van een stukje CSS code (*)
24
• bestudeer CSS via http://www.w3schools.com (*)
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 (*)
ParentTheme en ChildTheme voorbeelden (*)
26
ParentTheme
ParentTheme ParentTheme
Activeren van een ChildTheme (*)
27
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!
Voorbeelden smartphone
29
Voorbeelden tablet
30
Updaten van thema’s
31
• 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
• thema’s moeten eerst in het netwerk worden geactiveerd alvorens ze in een subwebsite kunnen worden gebruikt
Multisite thema’s installatie - activeren
33
WordPress - deel 3
3. Plugins!!!!!
34
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.)
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.
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
Installeren van een plugin
40
Uploaden van een plugin (.zip file)
41
Overzicht van geïnstalleerde plugins
42
• 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
• in een netwerk activeren voor alle sites
• per subsite activeren
Multisite plugin installatie - activeren
44
Update signaal: wacht altijd paar weken
45
Overzicht tijdens updaten
46
• 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
• 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
Pas op voor verouderde plugins
49
Support forum (let op actualiteit en aantal reacties)
50
• 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
Updaten van plugins
52
Huiswerk: conditionele content
4. Bestudeer de inleiding ‘Toelichting bij derde huiswerkopdracht’ en ga vervolgens aan de slag
53
Starten met een eigen WordPress website
deel 3!!!!!door @peterluit
54