Gebruiksaanwijzing WordPress - Moose design

Workshop
MMM
WordPress
Leer het
CMS WordPress
kennen
door Jolanda Peters
Oktober 2012
Je kunt alles uit dit boek delen, maar vermeld de bron.
Succes en maak er wat moois van.

WORPRESS
Hfst 1 Inloggen in WordPress 3
Hfst 2 Artikelen plaatsen / teksten op de website plaatsen 5
Hfst 3 Een artikel bewerken 7
Hfst 4 Media toevoegen aan een bericht of pagina / plaatje uploaden 8
Hfst 5 Afbeelding wijzigen 12
Hfst 6 Afbeelding schalen, bijsbijden, roteren of spiegelen 13
Hfst 7 Een menu maken 14
Hfst 8 Een menu-item aan het menu toevoegen / knop aan je navigatie toevoegen 15
Hfst 9 Een link maken in een artikel 16
Hfst 10 Links in een widget plaatsen 17
Hfst 11 Reacties, keywords, auteur en samenvatting 18
Hfst 12 De informatie op je site organiseren / categoriën maken 20
Hfst 13 Een eenvoudige fotogalerij plaatsen 21
Hfst 14 Hoe krijg ik die elementjes in mijn sidebar of footer? /
Wat is een widget of plugin? 23
Hfst 15 Een plugin installeren 24
Hfst 16 Plaatje met tekst in de sidebar plaatsen / widget gebruiken 25
Hfst 17 YouTube filmpje in een artikel plaatsen 26
Hfst 18 De achtergrond en header van je site aanpassen 27
Hfst 19 Een event aanmaken in de widget ‘Event Calendar’ 29
Hfst 20 Een agendapunt aanmaken in de all-in-one event calendar 30
Hfst 21 Een nieuwsbrief versturen met ALO easy mail 31
Hfst 22 Abonnee aan de nieuwsbrief toevoegen 34
Hfst 23 Een tabel gebruiken 35
Hfst 24 Widget area overzicht 36
2

Hfst 1 Inloggen in WordPress
• Ga naar je website
• Ga direkt naar de url om in te loggen: www.jesite.nl/wp-login.php
• Of klik op ‘Inloggen’ in de ‘sidebar’ of in de ‘footer’ (onder aan de pagina)
• Vul je Gebruikersnaam ( ________________ ) en Wachtwoord ( ________________ ) in
Je komt nu op het dashboard, de administratie van WordPress
Als je een testsite hebt:
• Inloggen: www.jesite.nl/een-gekozen-naam-voor-de-testomgeving/wp-login.php
• de url om je testsite te bekijken: www.jesite.nl/een-gekozen-naam-voor-de-testomgeving/
Noteer anders de naam van de testomgeving: _____________________________________________
3

• Het is handig in de browser twee tabs open te hebben. Eentje met de WordPress administratie en eentje
met je website. Je kunt dan makkelijk van de een naar de andere schakelen
• Als je in een bericht of pagina bent kun je op ‘Wijzigingen bekijken’ klikken. De browser maakt automatisch
een nieuw tapblad of venster met de voorkant van de site.
• Sla ze op in de bladwijzers van je browser
• Ververs de pagina die je bekijkt als je net iets hebt aangepast. Als je ‘Wijziging bekijken’ gebruikt doet hij
dat al automatisch. Maar als je iets aan een menu veranderd hebt niet.
• Je kunt op verschillende plekken in- en uitloggen.
Op de website zelf via de widget Rechts bovenin de administratie
• Je kunt van de site naar de administratie en terug
4

3
Hfst 2 Artikelen plaatsen / teksten op de website plaatsen
Er zijn twee gangbare manieren om artikelen op je site te plaatsen.
Dmv ‘Berichten’ of dmv ‘Pagina’s’.
De ‘Berichten’ [1] verschijnen in je blog, standaard op de homepage. De ‘Pagina’s’ [2] zijn
statisch en geschikt voor vaste, statische onderwerpen
Een Pagina maken is nagenoeg hetzelfde als een bericht
Een ‘Bericht’ (‘Pagina’) maken.
• Vanuit het ‘Dashboard’ of helemaal links vanuit het ‘Menu’ op ‘Berichten’ klikken
• Kies ‘Nieuw bericht’
• Vul een ‘Titel’ [3] in
• Schrijf nu je tekst in de editor
Als je in WordPress een enter gebruikt sla je een regel over.
Houd de shift ingedrukt om naar de volgende regel te gaan.
• Klik op ‘Voorbeeld’ [4] of ‘Opslaan als Concept’ [5] om eerst het bericht te bekijken alvorens het definitief te
publiceren (zelf kijken of anderen ook laten kijken)
• Klik op ‘Publiceren’ [6] en het bericht staat direct op zijn plek, meestal op de homepage
• De zichtbaarheid ‘Openbaar’ [7] laten staan. Behalve als er afgeschermde stukken op de website staan
die alleen voor geregistreerde bezoekers is bedoeld
• De datum van publiceren kan veranderd worden naar verleden en toekomst
• Bij ‘Categorieën’ [8] aan vinken wat van toepassing is, op ‘Publiceren’ [6] of ‘Bijwerken’ klikken om te
bewaren
5
7
4
6
8
1
2
5

TIP
Een titel is belangrijk voor zoekmachines. Gebruik woorden waar mensen op zouden kunnen Googelen, dit kan
een complete zin zijn. Voor een ‘Pagina’ de titel kort houden, want dit wordt ook het woord dat in het menu geplaatst
wordt. De titel is nog belangrijker als de site SEF (Search Engine Friendly) gemaakt is. De titel genereert
de urls, het adres wat zichtbaar is in de browser.
Veel ‘Berichten’ met urls waarin woorden staan waarop mensen zoeken worden eerder gevonden dan artikelen
in de vorm van statische ‘Pagina’s’.
Je kunt de menu’s die bij de pagina’s ontstaan wel aanpassen, zodat je een kort menu hebt en toch een volledige
titel. Zie: Menu bewerken
ARTIKELEN OP DE JUISTE PLEK ZETTEN
I
n deze gebruiksaanwijzing hebben
we het over een artikel zoals
een artikel in verschillende media
kan verschijnen. In een krant, een
tijdschrift of een blog.
Een artikel als: een beperkte hoeveelheid
tekst met illustraties en foto’s.
In WordPress kun je ook artikelen
plaatsen op verschillende plekken en
in verschillende hoedanigheden. Je
kunt ze in je sidebar zetten, in een blog
of via je navigatiebalk laten vinden.
Als je een artikel in blogvorm wilt
laten verschijnen, als nieuwe items op
je homepage, dan moet je je artikel in
een ‘Bericht’ maken.
Als je een verhaal hebt wat gevonden
moet worden via je navigatiebalk
maak je een ‘Pagina’.
Je kunt ook een plaatje en wat tekst in
je sidebar zetten. In dat geval moet je
een ‘Widget’ in je sidebar zetten. Daar
is meer over te vinden in het hoofdstuk
over de widgets.
In alle gevallen gaat het maken van zo’n artikel
op dezelfde manier, met dezelfde editor
en dezelfde knop om plaatsje te uploaden.
Denk vooraf goed na hoe je gebruik
wilt maken van deze verschillende
manieren, want WordPress is oa populair
geworden door deze mogelijkheid.
Tegenwoordig willen mensen activiteit
op een website zien. De dagen
van een welkomswoord of wat voor
bedrijf je bent op de homepage is al
lang voorbij. Geregeld een bericht op
je homepage laten verschijnen maakt
je website en de informatie die je aan
je bezoekers bied interessanter. Het
‘About us’ knopje zit er nog wel, daar
vertel je dus in een statische ‘Pagina’
meer over je bedrijf of activiteiten.
Geregeld berichten plaatsen is ook
goed voor de zoekmachines. En nog
mooier, berichten die je schrijft kun je
met een speciale plugin automatisch
laten verschijnen op FaceBook.
6

Hfst 3 Een artikel bewerken
1
• Klik op ‘Berichten’ [1] ( of ‘Pagina’s)
• Klik op het bericht [2] wat je wilt gaan aanpassen
• Maak de aanpassing in de editor
• Klik op ‘Wijziging bekijken’ [3] om eerst het bericht te bekijken
alvorens het definitief bij te werken
• Klik op ‘Bijwerken’ [4]
Via het Berichten overzicht kun je ook naar ‘Snel bewerken’ [5] of snel een bericht in de ‘Prullenbak’ [6] gooien.
Je kunt er
• Tags toevoegen
• Reacties aan of uitzetten
• Datum van publiceren aanpassen (hier kun je mee sjoemelen)
• Klik op ‘Bijwerken’ [7]
5 6
2
LET OP: verander niet te snel de titel van een langer bestaand artikel. Zoekmachines en links naar dat artikel
kunnen dan de weg niet meer vinden (of je kunt redirecten)
7
7
3
4

Hfst 4 Media toevoegen aan een bericht of pagina / plaatje uploaden
We kunnen in WordPress verschillende media (afbeeldingen, filmpjes ed.) naar de website uploaden. Sinds
WordPress 3.3 kun je de bestanden direct vanuit je mappen naar de bibliotheek slepen.
WordPress heeft een Media Bibliotheek waarin je alles kunt terug vinden en verzamelen. Voor afbeeldingen en
filmpjes werkt het toevoegen ongeveer hetzelfde. Er kunnen meerdere bestanden tegelijk ge-upload worden.
Voor filmpjes via YouTube werkt het anders.
TIP
Afbeeldingen van anderen gebruiken blijft illegaal. Let goed op wat je doet, tenzij je het risico op een boete wilt
lopen. Zie je een afbeelding waarbij de naam van de fotograaf vermeld is lijkt het mij wel duidelijk. Je kunt contact
met de fotograaf opnemen. Je kunt ook even verder zoeken of gebruik maken van stock foto’s.
Stein zal in dit geval weinig risico lopen omdat iedereen gebaat is bij het promoten van deze boeken.
8

Een afbeelding toevoegen
• Ga naar het artikel waar je een afbeelding wilt invoegen
• Zet de cursor op de plek waar de afbeelding moet komen te staan
• Klik op de knop ‘Media toevoegen’ [1]
• klik op ‘Bestanden kiezen’ [2]
• Ga op je computer naar de plek waar je bestand staat > selecteer ze > klik op ‘open’
TIP
Ga geen hele grote afbeeldingen uploaden. Je afbeeldingen zullen nooit groter hoeven zijn dan 940 pixels breed
en 72 DPI. Je kunt wel groter uploaden, maar daarmee loopt je plek op de server snel vol.
• Als je al eerder een afbeelding hebt geupload kun je deze toevoegen via de ‘Mediabibliotheek’ [3]
• Klik dan op ‘Tonen’ [4] om de afbeelding te gaan invoegen
3
1
2
4
9

7
8
9
5
6
• Als je meteen je afbeelding op maat wilt maken > ‘Afbeelding bewerken’ [5] > ‘Schalen’.
Over deze mogelijkheden staat verderop nog meer
• Vul een ‘Titel’ [6] in. Zeker doen, zeer nuttige zoekmachine optimalisatie !!
• ‘Alternatieve tekst’ is voor mensen die de afbeeldingen niet zien of niet aan hebben staan
• Je kunt ‘Onderschrift’ invullen, deze tekst verschiijnt onder de afbeelding
• Vink de juiste ‘Uitlijning’ [7] aan. zie blz 11
• Kies een ‘Afmeting’ [8]. Indien je geschaalt hebt ‘Volledige grootte’ [8]
• Klik op ‘Invoegen in bericht’ [9]
• Bekijk je artikel en als het goed is klik je op ‘Bijwerken’
• Als de afbeelding niet goed is en je wilt hem weghalen klik dan op het symbool ‘Afbeelding
wijzigen’ [10]
Als je een groot beeldscherm hebt:
• Zet de map, waarin de bestanden met de afbeeldingen staan, naast je browser
• Sleep de bestanden naar het daarvoor bestemde veld. je kunt er meeredere tegelijk uploaden
TIP
Het kan even duren eer je
bestand op je server staat.
Dit is afhankelijk van je
internetverbinding en de
grootte van je bestand.
Bestanden mogen niet
groter dan 16 Mb zijn.
10
10

• Als je links uitlijnt komt de afbeelding op dezelfde hoogte als de tekst waar je de cursor plaatst. Zet de
cursor voor de tekst. Ook als je rechts wilt uitlijnen.
• Wil je de tekst niet naast de afbeeling, maar er onder > kies ‘geen uitlijning’
• Wil je meerdere afbeelingen naast elkaar kies dan ‘geen uitlijning’
• Wil je de tekst van het artikel naast de afbeelding, dan kun je kunt geen plaatjes naast elkaar zetten
• Om afbeeldingen naast elkaar in het midden te centreren plaats je eerst de cursor op de gewenste plek >
kies centreren > afbeeldingen invoegen zonder uitlijnen
TIP
Let ook bij afbeeldingen op de consistentie op je site.
Kies altijd voor eenzelfde breedte of hoogte.
Schaal vanuit de hoek om de verhouding hoogte breedte te bewaren.
11

Hfst 5 Afbeelding wijzigen
Schalen
• Klik op de afbeelding, er verschijnen ’vierkantjes’ [1]
Tenminste ... helaas heeft niet iedere browser deze mogelijkheid
Als je toch wilt schalen moet je dat direkt bij het invoegen doen of via de
Media bibliotheek (zie volgende bladzijde)
• Schaal je afbeelding met een vierkantje op een hoek, dan blijven de
verhoudingen gelijk. Je kunt de afmetingen zien in het venstertje dat verschijnt
bij de cursor.
• Klik op ‘Afbeelding bewerken’ [2] om nog meer aanpassingen te doen
5
3
4
Wil je ruimte rondom je afbeelding zodat de tekst niet tegen de afbeelding komt?
• Ga naar het tabblad ‘Geavanceerde instellingen’ [3]
• Hier kun je ook schalen door andere afmetingen in te vullen, maar je moet zelf uitrekenen wat de verhoudingen
zijn, je afbeelding behoud zijn originele afmetingen
• Vul bij ‘Afbeeldingseigenschappen’ [4] het aantal pixels in dat de tekst verwijderd moet zijn van de afbeelding.
Dit kan bij ‘Verticale-’ en ‘Horizontale spatie’. Je ziet in het voorbeeldvenster gebeuren wat je invult.
• Klik op ‘Bijwerken’ [5] om de wijziging te bewaren
• Daarna het artikel ‘Bijwerken’
4
1
2
12

1
Hfst 6 Afbeelding schalen, bijsbijden, roteren of spiegelen
WordPress heeft sinds versie 2.9 een echte Image Editor aan boord. Roteren,
uitsnijden, schalen, spiegelen zijn een paar van de mogelijkheden die de Image
Editor te bieden heeft. Door van deze mogelijkheden gebruik te maken kan je de
afbeeldingen nog beter bewerken zonder het gebruik van extra software.
Uitsnijden is een uitkomst, omdat er vaak veel te veel overbodige informatie in
een foto staat. Met schalen kun je afbeeldingen comprimeren tot kleinere bestanden.
Veel grote foto’s verlagen de snelheid van de site en zijn voor bezoekers
met een langzame internetverbinding (ook mobile internetters) zeer irritant. Voor
afbeeldingen van het internet hoeft het meestal niet, maar voor foto’s die van het
fototoestel komen is deze functionaliteit zeker handig.
• Ga via de ‘Media bibliotheek’ naar het bewerken van een afbeelding
• Je kunt hier ook naar toe als je net je afbeelding ge-upload hebt
• Klik op ‘Afbeelding bewerken’ [1]
5
6
4
• Klik op ‘Afbeelding schalen’ [2] en vul de gewenste breedte of hoogte in in pixels. Schalen gaat in verhouding,
je hoeft maar 1 tekstvak in te vullen.
• Klik op ‘Schaal’ [3]
Helaas verliest je afbeelding de originele grote maten, waardoor je geen gebruik kunt maken van een link naar
een grotere afbeelding (of de plugin lightbox)
• Trek met je cursor op het voorbeeld een ‘kader‘ [4]
• Vergroot/verklein of positioneer het kader precies zoals jij dat wilt
• Klik op ‘Bijsnijden’ [5]
• Je kunt een afbeelding ook ‘spiegelen’, maar of dat kom ik eerlijk gezegd zelf nooit tegen
• Afbeeldingsrotatie wordt helaas niet door iedere provider ondersteund.
• Als alles gedaan is ‘Opslaan’ [6]
2
3
13

Hfst 7 Een menu maken
WordPress maakt standaard een menu, maar deze wordt gegenereerd van de
Paginatitels. Dat kunnen te lange menu-items zijn. Om deze te kunnen
veranderen moet je een nieuw menu maken.
• Ga naar ‘Weergave’ > ‘Menu’s’ [1]
• Ga naar ‘Scherminstellingen’ [2]
• Vink aan waar je een menu van wilt maken, daarna kun je scherminstellingen weer dichtklappen
• Vul een mooie naam in voor je menu [3]
• Klik op ‘Menu aanmaken’ [4]
• Kies in ‘Primary Navigation’ [5] het aangemaakte menu > ‘Opslaan’ [6]
• Later kun je nog een side menu maken in de ‘Secundary navigation’
5
6
De Primary Navigation is in de regel het topmenu boven of onder je header.
Secondary Navigation kun je met een widget in je sidebar zetten.
3
4
2
1
14

3
Hfst 8 Een menu-item aan het menu toevoegen / knop aan je navigatie toevoegen
• Ga naar ‘Weergave’ > ‘Menu’s’ [1]
• Ga naar ‘Scherminstellingen’ [2]
• Vink aan waar je een menu van wilt maken > scherminstellingen dichtklappen
• Selecteer bij ‘Pagina’s’ [3] het artikel (of meerdere) waar je een menu-item van wilt hebben > ’Aan menu
toevoegen’ [4] > ‘Menu opslaan’ [5]
• Je menu-items verschijnen in je menu (ververs de pagina on je browser)
3
• Je kunt de menu-items verslepen. Van boven naar
beneden is van links naar rechts in de navigatiebalk.
• Als je een item schuin onder een ander item zet krijg je
automatisch een uitklapmenu.
• Als je het grijze uitklap driehoekje [6] gebruikt kun je de
naam van het item aanpassen > onder ‘navigatielabel’
[7] (niet Titelatribuut)
• Alles wel opslaan
TIP
Omdat je het menu-item een naam kunt geven kun je
evengoed de langere titel voor je artikel behouden. Goed
voor de SEO.
2
4
7
5
1
15
6

Hfst 9 Een link maken in een artikel
• Kopieër eerst de url waarnaar je wilt verwijzen
Je kunt het adres van de site of pagina waar je naar toe wilt makkelijk pikken uit de adresbalk van je browser.
• Ga naar het artikel waar je de link wilt plaatsen
• Selecteer het woord [1] of de combinatie van woorden waar je een link van wilt maken
• Klik op het koppelsymbool > ‘Link invoegen/bewerken’ [2]
1
• Plak de URL [3] in het invulveld
• Als je een nieuw venster of tabblad wilt laten openen
vink je ‘Open link in een nieuw venster/tab’ [4] aan
• ‘Link toevoegen’ [5]
Het is goed een nieuwe venster te laten openen als je
naar een andere website verwijst. Jou website is dan
niet helemaal verdwenen mochten bezoekers snel terug
willen keren.
Link naar een email adres
• Vul in achter URL: mailto:info@jewebsite.nl
let op: geen spaties hoofdletters ed, anders pakt hij hem niet
2
Link van een afbeelding
• Plaats of gebruik in je artikel een afbeelding en selecteer deze
• Klik op het koppelsymbool > ‘Link invoegen/bewerken’ [2] > plak de URL [3] in he invulveld
• Als je een nieuw venster of tabblad wilt laten openen vink je ‘Open link in een nieuw venster/tab’ [4] aan
• ‘Link toevoegen’ [5]
4
3
16
5

Hfst 10 Links in een widget plaatsen
Je kunt links naar andere site verwijzen en de anderes site hetzelfde terug laten doen. Heel goed voor de SEO.
Deze links kunnen in een widget worden geplaatst in de sidebar of meestal de footer.
• Ga naar ‘Links’ > ‘Nieuwe toevoegen’ [1]
• Vul ‘naam‘ [2] > ‘Webadres‘ [3] > en eventueel een ‘Beschrijving‘ [4] in
• Vink bij ‘Doel‘ _blank - nieuw venster of tabblad aan [5]
• Klik op ‘Link toevoegen’ [6] > De link verschijnt nu in de Link Widget
Het is beter _blank te kiezen als je niet wilt dat je bezoekers van je website verdwijnen.
5
2
3
4
1
6
17

1
3
Hfst 11 Reacties, keywords, auteur en samenvatting
Reacties:
• Vink ‘Reacties toestaan’ [1] aan bij ‘Reacties’ als je bezoekers van de site
een reactie wil laten geven
• Bij ‘Instellingen’ > ‘Reacties’ kun reacties toestaan uitvinken of en maximaal
aantal dagen dat er reacties gegeven kunnen worden invullen
• Onder ‘Berichten’ > ‘Snel bewerken’ kun je eenvoudig reactimogelijkheden
aan en uit zetten
Keywords:
• Type een woord in bij ‘Tags’ [2] > een volgende keer verschijnt het nieuw
ingevulde woord ook als knop. Woorden moeten gescheiden zijn door
komma’s (max 10)
• Klik op ‘Display click tags’ > je kunt op een knop klikken > deze verschijnt
bij ‘Tags (alleen als je de Plugin “Simple Tags” hebt geïnstalleerd)’
• Bij ‘Berichten’ > ‘Bericht tags’ zie je een overzicht en kun je tags maken
en verwijderen
Auteur:
• Kijk bij ‘Auteur’ [3] of de goede is gekozen
Als je ‘Posts’ zo hebt ingesteld dat er een auteur bij vermeld wordt is het dus mogelijk te
kiezen welke auteur het bericht heeft geplaatst. Het is mogelijk meerdere auteurs in een blog
te laten schrijven. Deze auteurs moeten wel eerst aangemaakt zijn.
• Voeg onder ‘Gebruikers’ [4] een nieuwe gebruiker toe.
Deze gebruiker kan apparte inloggegevens krijgen met met een eigen wachtwoord. Als je hier
niet bij kunt omdat je niet de juiste rechten hebt, vraag dan de beheerder van de site dit voor
je te doen.
Het kan zijn dat je niet alle
mogelijke instellingen kun zien.
• Ga naar ‘Bericht’
• Klik ‘Scherminstellingen’ [5]
aan > er verschijnen verschillende
opties die je standaard
kunt aan en uitzetten als je in
een bericht aan het werken bent.
Hier zie je de opties die we nu
standaard open hebben staan.
4
2
5
18

1
Samenvattingen:
• Vul bij ‘Samenvatting’ [1] een tekst in, deze komt in de overzichten te staan met een ’continue reading link’
Een bericht komt in de regel op de homepage samen met andere ‘posts’ te staan. Een bericht wordt ook op andere
plekken in overzichten geplaatst. Het is daarom belangrijk consistent te zijn in de opbouw van berichten.
- In een bericht kun je een ‘Continue reading link’ (meer-tag in de editor) [2] plaatsen. Op de plek van deze
link wordt het bericht afgebroken en kunnen bezoekers kiezen verder te lezen. Zo kun je meerdere berichten
kort onder elkaar op de homepage tonen en de nieuwsgierigheid van de bezoekers triggeren.
- In overzichten (via een onderwerp of het menu) worden berichten weergegeven die ook worden afgebroken
door zo’n ‘Continue reading’ link. Deze overruled de link die je zelf hebt gezet. In deze samenvattingen worden
geen afbeeldingen getoond. Begin een pagina dus niet met een boek en een titel onder een plaatje. Dit ziet er
in zo’n overzicht heel verwarrend uit.
• Als je klaar bent ‘Bijwerken’ [3]
2
3
19

Hfst 12 De informatie op je site organiseren / categoriën maken
Als je van plan bent geregeld met je site aan de slag te gaan en berichten toe te voegen. Als je al meteen heel
veel artikelen op je site moet hebben omdat je een uitgebreid aanbod van informatie, produkten of diensten
hebt. Dan is het raadzaam ‘Categorieën’ te maken. Die Categorieën bieden jou meer overzicht.
Ze kunnen getoont worden als widget in een sidebar of footer, waarmee je je bezoeker ook meer overzicht bied.
Het is zeer nuttig zowel voor gebruikersvriendelijkheid als voor SEO om op meerdere manieren de weg naar
Rome (informatie) te vinden.
• Om dit met je berichten te doen kun je de categorieën aanmaken onder ‘Berichten’ > ‘Categorieën’
• Je kunt het woord Categorieën aan passen door ‘Weergave’ > ‘Widgets’ > de widget voor Categorieën op te
zoeken en de Titel aan te passen
Standaard geld dit alleen voor Berichten en niet voor Pagina’s
Als de Categorieën widget niet meer recht in de Widget areas staat, kun je deze er zelf in schuiven.
Kijk voor een overzicht van de Widget Areas achter in deze handleiding.
20

Hfst 13 Een eenvoudige fotogalerij plaatsen
Als je veel foto’s tegelijk op een pagina wilt tonen
kun je een galerij toevoegen. Dat is een verzamling
verkleinde, vierkant uigesneden afbeeldingen. Als je
zo’n afbeelding of ‘thumbnail’ aanklikt verschijnt de
foto in vol formaat.
1
• Ga met je cursor op de plek staan waar je de
galerij wilt plaatsen, klik op ‘uploaden/toevoegen’ [1]
• Sleep (of bestanden kiezen) alle foto’s die je in de galerij wilt hebben tegelijk naar de Media bibliotheek
• ‘Sluit’ [2] het venster en klik opnieuw op ‘uploaden/toevoegen’, beetje vreemd, maar je ziet nu het tabblad
‘Galerij’ [3] > kies dit tabblad
3
2
21

• Onderaan dit tabblad vind je diverse instellingen.
• Als je, op je pagina, de foto’s met doorklik navigatie wilt
tonen kies dan ‘Bijlage pagina’ [4]
• Kies je ‘Afbeeldingsbestand’, dan verschijnt er in een
nieuw tabblad van de browser met alleen de grotere
afbeelding
• Kies hoe je afbeeldingen wilt sorteren en het aantal
kolommen
• Galerij toevoegen > ‘Bijwerken’
Je kunt de foto’s in een bepaalde volgorde laten verschijnen als de bestandsnamen van je afbeeldingen opeenvolgende
nummers hebben, maar de volgorde kun je ook veranderen door de bestanden in je gallerij te verschuiven.
• Ga naar de pagina of het bericht met de gallerij > ‘uploaden/toevoegen’ > ‘Galerij’ tabblad kiezen >
verschuif je bestand naar de juiste plek > alles bewaren en bijwerken, ook in het artikel
4
22

Hfst 14 Hoe krijg ik die elementjes in mijn sidebar of footer?
Wat is een widget of plugin?
Plugins zijn een soort software programmaatjes die je op de website installeert, net als apps.
Dat kan zijn voor zaken als diashows, nieuwsbrieven, kalenders, beveiliging, statistieken meten, enz enz.
• Ga naar ‘Weergave’ > ‘Widgets’ [1] om te kijken
Widgets zijn onderdeeltjes van een plugin die je zichtbaar kunt maken op de site.
Bijvoorbeeld een kalender. Achter de schermen heeft de plugin een heel systeem om data in te voeren maar de
widget laat de resultaten daarvan zien in de sidebar.
Zo’n widget uit het vak ‘Beschikbare widgets’ [2] schuif je op de gewenste plek op de site als ‘Primary (top)
Sidebar’ [3] of een andere Widget Area.
Niet iedere plugin hoeft een widget te hebben. De plugin voor nieuwsbrieven bijvoorbeeld.
1
2
Er is standaard een widget om een extra menu te maken in de sidebar van je site.
3
23

Hfst 15 Een Plugin installeren
We gaan de Plugin “Black Studio TinyMCE” installeren. Met deze plugin kun je plaatjes, filmpjes, hele artikelen
in je widget areas laten zien.
• Ga naar ‘Plugins’ > ‘Nieuwe Plugin’ [1]
• Vul de naam [2] van de plugin in als je die weet > ‘Plugin Zoeken’ [3]
• Klik op ‘Nu Installeren’ [4] > Weet je zeker dat je deze Plugin wilt installeren? OK
1
Klik op ‘Plugin activeren’ [5]
5
In het volgende hoofdstuk wordt deze Plugin in gebruik genomen.
4
2 3
Als je alleen tekst wilt gebruiken, maak dan gebruik van de Tekst Widget, deze zit standaard in WordPress.
Deze is minder gevoelig voor updates.
Als je WordPress gaat upgraden naar een nieuwere versie moet je dit zeker ook voor Black Studio TinyMCE
doen, anders heb je kans dat je artikel niet meer te zien is.
TIP
Het voordeel van deze Plugin is de Wysiwyg editor. Je hebt voor de widget “Tekst” html nodig als je meer wilt
plaatsen dan alleen tekst. Deze kun je uit de Black Studio TinyMCE ‘stelen’ (copy-paste), want de Plugin heeft
twee tabbladen: Wysiwyg en HTML. HTML code kun je uit het HTML tabblad kopiëren
24

Hfst 16 Plaatje met tekst in de sidebar plaatsen / widget gebruiken
Als je veel foto’s tegelijk op een pagina wilt tonen kun je een galerij toevoegen. Dat is een verzamling
verkleinde, vierkant uigesneden afbeeldingen. Als je zo’n afbeelding of ‘thumbnail’ aanklikt verschijnt de foto in
vol formaat.
• Ga naar ‘Weergave’ > ‘Widgets’ [1]
• Sleep de widget ‘Black Studio TinyMCE’ [2] naar de gewenste plek in de ‘Sidebar’ > in dit geval de ‘Primary
(top) Sidebar’ [3]
1
De editor en het toevoegen van afbeeldingen werkt hetzelfde als bij andere artikelen.
• Vergeet ‘Opslaan’ [4] niet
2
4
3
25

Hfst 17 YouTube filmpje in een artikel plaatsen
Hiervoor moet je bij een YouTube filmpje de embedded code kopieëren.
• Ga naar het filmpje op YouTube dat je wilt gebruiken
• Klik op ‘Delen’ [1] > ‘Insluiten’ [2]
• Kopieër de code die verschijnt [3]
• Maak een nieuw artikel waar je het filmpje wilt plaatsen < ga naar de ‘HTML editor’ [4]
• Plak de gekopieërde code in de editor op de plek waar je het filmpje wilt hebben
• Verander eventueel (met behoud van verhouding) de afmetingen van het filmpje bij ‘width’ en ‘height’ [5].
• Let er op dat je geen trema’s weghaalt, dus: width=’420’
5
5
1
3
2
4
Als je nu in de Wysiwyg editor [6] kijkt zie je een geel vlak.
• Dit is het filmpje, kijk maar in het voorbeeld. Als het naar je zin is > ‘Publiceren’ > ‘Bijwerken’
• Dit kan ook in de ‘Black Studio TinyMCE’ widget. Zo komt het filmpje in de sidebar te staan > Kies hier
onder de editor ‘Opslaan’
6
26

Hfst 18 De achtergrond en header van je site aanpassen
De achtergrond
• Ga naar ‘Weergave’ > ‘Achtergrond’ [1]
• Kies je achtergrond bestand ‘Bladeren’ [2] > ‘uploaden’ [3]
• Kies de juiste instellingen
Als je een structuur als achtergrond hebt, kun je ‘Herhalen’ [4]
Als je een vaste achtergrond hebt, een foto bijvoorbeeld, kun je de
afbeelding ‘Fixeren’ [5]
Een vaste achtergrond minsten 2000 pixels breed maken.
• ‘Wijzigingen opslaan’ [6]
6
4
5
2 3
27
1

De Header
Het slimste is je header 940 pixels breed te maken. Als mensen dan op een
mobile device de site bekijken is die al op de juiste maat.
Eigenlijk wordt de header vanzelf al 940 pixels breed, als je de instructies van
WordPress volgt.
Je kunt ook zelf al je header vooraf op maat maken. 940 x 198 pixels is de
standaard maat. De hoogte kun je aanpassen.
• Ga naar ‘Weergave’ > ‘Header’ [1]
• Kies je header bestand ‘Bladeren’ > ‘Uploaden’
• Kies het deel van de afbeelding wat je als header wilt gebruiken >
‘Bijsnijden en publiceren’ [2]
2
Je kunt je bedrijfsnaam als woord boven je Header plaatsen.
Maar als je een mooi logo hebt kun je dat in je Header plaatsen, daarvoor moet je wel beeldbewerken.
Je kunt zelfs alleen je logo in je header laten zien.
28
1

2
Hfst 19 Een event aanmaken in de widget ‘Event Calendar’
• Klik links in het menu op ‘Events Calendar’ [1]
• Vul alles in en klik op ‘Add Event’ [2]
1
Bij Link out staat in het voorbeeld van Boekhandel
Spijkerman een link naar de overzichtspagina. Je kunt voor
ieder event ook een bericht maken die in je blog verschijnt.
Vul je gegevens in de calendar consequent in
Bijvoorbeeld:
Title: Naam Schrijver (eventueel boektitel)
Location: Academisch Genootschap, Parklaan 93, Eindhoven
Link out: http://www.boekhandelspijkerman.nl/lezingen/
Description: Kom kennis maken met ...
Literaire lezingen van het AG
Toegang GRATIS
Start Date: 2012-09-23
Start Time: 17:00
End Time: 19:00
• Vink ‘Create post for event’ [3] aan
• Kies ‘Draft’ [4]
• Klik op ‘Add Event’ [5]
• Ga naar ‘Berichten’, daar vind je het event als concept bericht
terug
• De Event Calendar heeft een standaard opmaak gegenereerd.
Deze kun je bewerken, inclusief afbeeldingen
Deze pop-up verschijnt als je, met de muis, over de datum beweegt. Dit als je op de datum klikt.
5
4
3
29

Hfst 20 Een agendapunt aanmaken in de all-in-one event calendar
• Klik op ‘+ Nieuw’ [1] > ‘Agendapunt’ [2]
• Vul een ‘Titel’ [3] in, een omschrijving van het event
• Geef eventueel extra aanvulling op de titel in de editor [4]
• Vul Details in: Datum en tijd, Locatie, Kosten, contact info [5] > ‘Publiceren’ [6]
3
4
1
2
Er wordt altijd automatisch een Pagina aangemaakt voor deze kalender.
Je kunt deze kalender, met de widget, alleen in de sidebar tonen, maar ook in je menu. Daarvoor moet je de
pagina toevoegen als item in je menu.
5
Bij ‘Instellingen’ > ‘Kalender’ kun je o.a.
aangeven hoeveel Agendapunten je wilt
laten zien in de widget.
30
6

Hfst 21 Een nieuwsbrief versturen met ALO easy mail
• ‘Nieuwsbrieven’ > ‘Nieuwsbrieven’ > ‘Nieuwsbrief verzenden’ [1]
1
• Maak de nieuwsbrief, precies op dezelfde manier als een ander artikel
• Vink aan wie je een nieuwsbrief wilt sturen: ‘Gebruikers’ [2] en/of ‘Abonnees’ [3]
• Klik op ‘Publiceren’ [4] wees gerust, je verzend nog niets !
1
2
3
4
31

• Ga naar het overzicht van de ‘Nieuwsbrieven’ [5]
• Maak een lijst van geadresseerden [6] door er op te klikken
• Begin met verzenden door op ‘Toevoegen aan wachtrij’ [7] te klikken
• Dit kan even duren
• De nieuwsbrief wordt nu verzonden > ‘Sluiten’ [8]
• Nu wachten en je browser NIET uitzetten > Klik op ‘Refresh’ [9] om de voortgang te bekijken
9
5
7
6
8
32

• Als je op ‘Rapport’ [10] klikt kun je kijken of de verzending is geslaagd
10
Er staat ook een duidelijk filmpje op YouTube
http://www.eventualo.net/blog/wp-alo-easymail-newsletter-guide/
33

Hfst 22 Abonnee aan de nieuwsbrief toevoegen
Mensen kunnen zich via de site als abonnee aanmelden.
Je kunt ook zelf mensen toevoegen voor de nieuwsbrief.
• Ga naar ‘Abonnees’ [1] > je komt bij een overzicht
• Je kunt hier ‘Abonnees’ verwijderen of aanpassen
• Klik op ‘importeer / exporteer abonnees’ [2] om een nieuwe
abonnee toe te voegen
• Vul je juiste gegevens in en klik op ‘Toevoegen’ [3]
Je kunt heel veel abonnees bij elkaar verzamelen, dat is veel werk. Het zou zonde zijn als je deze zou verliezen.
Het is mogelijk de abonnees te exporteren, zodat je ze kunt veilig stellen. Je kunt ze ook importeren van een
andere WordPress site of een CSV-bestand (Outlook)
3
2
1
1
34

Hfst 23 Een tabel gebruiken
Als de lay-out van een pagina niet naar je zin is. Je wilt hem meer structureren, dan kun je dat doen mvb een
tabel. Je moet daarvoor wel de plugin TinyMCE advanced geïnstalleerd hebben.
Onder ‘Instellingen’ > ‘TinyMCE advanced’ kun je de tabel buttons toevoegen aan je editor.
Maar het kan zijn dat je deze al in je editor hebt zitten.
• Zet de cursor in de editor
• Klik op de knop ‘Nieuwe tabel invoegen’
• Vul achter ‘Columns’ het aantal vertikale cellen in en
achter ‘Rows’ de hoeveelheid rijen die je denkt nodig te
hebben. Ieder rij foto’s is een rij en een haarlijn is ook een
rij
• Vul achter ‘width’ bijvoorbeeld 100% in, dan vult de tabel
over de hele breedte uit, maar je kunt ook aantal pixels
geven. De meeste sites zullen 940 pixels breed zijn
• ‘Invoegen’
Onder ‘Advanced’ tabblad kun je de kleur van de tabelrand
aanpassen door een webkleur in te vullen achter ‘Border
color’. Het kan namelijk zijn dat je een grijze rand ziet.
Als je in de tabel nog lijnen ziet moet je ook voor alle cellen
de kleur aanpassen. Zorg er dan alleen wel voor dat alle cellen
in de tabel die kleur krijgen door ‘Update all cells in Table’ te
kiezen
Cellen aanpassen Rij toevoegen of weghalen Cellen samenvoegen of splitsen
35

Hfst 24 Widget Area overzicht
36