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 bij wordpress.org of uploaden

19

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.

wordpress.org/plugins

37

wordpress.org/plugins

38

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