I n h o u d s o p g ave Introductie
2
Inloggen
3
Dashboard
4
Pagina aanmaken / bewerken
5
Bericht toevoegen / bewerken
6
Afbeelding toevoegen De tekstbewerker
7
11
Menu toevoegen / aanpassen
12
w w w. h e l l o w o r l d - w e b d e s i g n . n l
I n t ro d u c t i e WordPress is een Content Management Systeem. Een systeem om de content van je website te managen. Dat betekent dat je zelf de afbeeldingen, tekst en vaak ook de vormgeving van de site kan aanpassen. Op deze manier blijft de inhoud van je site up to date en aantrekkelijk voor bezoekers. WordPress is van oorsprong een blogplatvorm maar uitgegroeid tot een volwaardig CMS. Doordat het open source is, is dit systeem altijd in beweging en komen er elke dag nieuwe plugins bij en blijft door de updates de veiligheid van je website gewaarborgd. In deze handleiding vind je basisregels hoe met WordPress om te gaan. De functionaliteit verschilt per website, dus let goed op de eventuele extra handleiding die speciaal voor jouw website geschreven is.
2 w w w. h e l l o w o r l d - w e b d e s i g n . n l
Inloggen Nadat de website is opgeleverd heb je een mail met gebruikesnaam en wachtwoord onvangen. Hiermee kun je inloggen in WordPress. www.sitenaam.nl/wp-admin Gebruikersnaam: Wachtwoord: In het Dashboard kan je bij Gebruikers het wachtwoord veranderen.
3 w w w. h e l l o w o r l d - w e b d e s i g n . n l
D a s h b o a rd Na het inloggen kom je op het Dashboard terecht. Dit is het controlpanel van je site. Aan de linkerkant van het scherm zie je de verschillende onderdelen van de site. Bovenaan de onderdelen om de inhoud van je site te bewerken. Daaronder de onderdelen om het uiterlijk en de werking van je site te bewerken.
• Berichten: hier maak je blog- of nieuwsberichten aan en heb je een overzicht van alle berichten en categorieën. • Media: een overzicht van alle afbeeldingen op de site en de mogelijkheid tot uploaden van nieuwe afbeeldingen. • Links: links naar andere websites • Pagina’s: hier kun je pagina’s aanmaken en is een overzicht van alle pagina’s te zien. • Reacties: een overzicht van alle reacties op berichten op de site. • Weergave: hier bevinden zich verschillende mogelijkheden om je site vorm te geven. Zo bevinden zich hier de thema’s, widgets en menu’s. • Plugins: een overzicht van alle geïnstalleerde plugins en de mogelijkheid om plugins te installeren. • Gebruikers: een overzicht van de verschillende gebruikers van de site en hun kenmerken. • Extra: de mogelijkheid om informatie uit een database in te voeren en te exporteren. • Instellingen: hier zijn de instellingen van de website zoals de titel en de permalinks aan te passen.
4 w w w. h e l l o w o r l d - w e b d e s i g n . n l
Pa g i n a a a n m a ke n / b ewe r ke n Klik bij Pagina’s op ‘Nieuwe pagina’ om een nieuwe pagina toe te voegen. Voer de titel van de pagina in. Deze komt in de meeste gevallen bovenaan de pagina te staan. In de tekstverwerker voer je de content in. De tekstverwerker heeft veel overeenkomsten met Word en is daarom gemakkelijk te begrijpen. Je kan tekst bold, italic maken en onderstrepen. De tekstverwerker staat uitgebreid uitgelegd op bladzijde 11.
Is de pagina een subpagina dan kun je bij ‘pagina-attributen’ aangeven welke andere pagina de hoofd-pagina is. Ook kun je hier de juiste template selecteren. De pagina kun je opslaan door aan de rechterkant op ‘Publiceren’ te klikken. Een pagina kun je bewerken door de aanpassingen door te voeren en op ‘Bijwerken’ te klikken. Het resultaat kun je gelijk bekijken door op de link ‘pagina bekijken’, onder de titel te klikken.
5 w w w. h e l l o w o r l d - w e b d e s i g n . n l
B e r i c h t to e v o e g e n / b e w e r k e n Berichten zijn van oorsprong de basis van een Wordpress site. Het zijn de blog of nieuwsartikelen die regelmatig worden aangevuld en waarvan altijd de laatste bovenaan verschijnt. Ga naar Berichten en klik op nieuw bericht aanmaken. Voer de titel en bericht in en vink de juiste categorie aan. Klik op publiceren. Je kunt het bericht bekijken door op de link ‘bericht bekijken’ onder de titel te klikken.
Categorieën Voordat je berichten gaat schrijven is het handig om de categorieën aan te maken. Dit zijn de verschillende onderdelen waarin je de berichten kunt onderverdelen. Zo blijft alles overzichtelijk. Standaard staat er een ‘geen categorie’ categorie in de lijst. Het is aan te raden deze te laten staan maar de naam kan veranderd worden in bijvoorbeeld ‘Algemeen’. Berichten zonder categorie of waarvan de categorienaam is verwijderd zullen altijd in de deze categorie te vinden zijn. Voeg categorieën toe door bij Categorieën > Nieuwe categorie toevoegen de naam in te voeren. Wordpress maakt zelf een slug? aan.
Afbeeldingen Er kunnen ook afbeeldingen ingevoegd worden. Dit doe je door op uploaden/toevoegen te klikken. Er verschijnt een scherm waar je kan kiezen een afbeelding vanaf je computer te uploaden of een afbeelding uit de mediabibliotheek toe te voegen. Zodra de afbeelding geselecteerd is kun je kiezen uit links of rechts uitlijnen. Ook kun je de titel aanpassen en er voor kiezen een onderschrift bij te voegen. Klik bij link url ‘geen’ aan en klik op invoegen. Je kunt de afbeelding altijd weer aanpassen door op de afbeelding te klikken en op het afbeeldingsicoontje te klikken. Meer over het toevoegen van afbeeldingen op de volgende pagina.
6 w w w. h e l l o w o r l d - w e b d e s i g n . n l
A f b e e l d i n g to e v o e g e n Afbeeldingen in je website zijn onmisbaar. Door afbeeldingen wordt de tekst op je website leesbaarder en duidelijker. Let erop dat de afbeeldingen die je op je website plaatst, wel of geen copyright hebben. Als je een afbeelding met copyright gebruikt vraag dan vooraf toestemming en/of vermeld de bron. Het beste is om de afbeelding van te voren op de juiste afmeting te maken. Dit kan online http://pixlr. com/editor/ of met Paint of Photoshop. Te grote afbeeldingen nemen onnodig veel ruimte in op de server en maken je website langzamer. Let er in ieder geval op dat de afbeelding niet groter is dan de breedte van de website zelf. De afbeelding kan in WordPress altijd nog in formaat aangepast worden. Ook is het belangrijk om op de grootte en van afbeeldingen te letten. Afbeeldingen op het net zijn altijd 72 dpi. Ook kan je de afbeeldingen in verschillende kwaliteiten opslaan. Zorg ervoor dat afbeeldingen op je site (achtergrond afbeeldingen uitgezonderd) ongeveer 100kb zijn. Je kan er voor kiezen om afbeeldingen van betere kwaliteit op je site te zetten. De laadtijd van de website wordt dan langer. Is de doelgroep van de website jongeren dan is dit geen probleem omdat veel ven hen tegenwoordig snel internet hebben. Veel ouderen hebben nog geen toegang tot snel internet. Zijn zij je doelgroep dan is het aan te raden om afbeeldingen van 100kb te plaatsen.
Er zijn verschillende mogelijkheden om een afbeelding toe te voegen in WordPress. Je kan een afbeelding direct toevoegen aan de Mediabibliotheek en deze later gebruiken in berichten en pagina’s. Ook kun je in pagina’s en berichten een afbeelding uploaden en/of toevoegen. Om een afbeelding toe te voegen klik je boven de tekstverwerker op uploaden/toevoegen. In het popup scherm heb je verschillende mogelijkheden: Van computer - op deze manier kan je afbeeldingen die zich op je computer bevinden uploaden naar de server. Van url - hier kan een link naar een afbeelding op een andere website toegevoegd worden. Mediabibliotheek - in de mediabibliotheek staan alle afbeeldingen die al naar de server zijn geupload. Een afbeelding kun je op verschillende plekken op de website (in verschillende afmetingen) laten zien. Het is dus ook mogelijk om eerst de afbeelding te uploaden in de mediabibliotheek en daarna aan een bericht of pagina toe te voegen.
7 w w w. h e l l o w o r l d - w e b d e s i g n . n l
Als de afbeelding al in de media bibliotheek staat klik je op ‘ Tonen’ achter de juiste afbeelding. Je ziet nu een voorvertoning van de afbeelding met daarnaast de kenmerken zoals bestandsnaam en -type, uploaddatum en de afmeting van de afbeelding. Ook is hier de mogelijkheid om de afbeelding te bewerken. Zo kun je de afbeelding spiegelen of draaien en ook de afmeting veranderen. Dit kan ook nadat de afbeelding is toegevoegd.
• Titel - de titel van de afbeelding. • Alternatieve tekst - dit is niet te zien op de website maar komt alleen in de code terecht. Dit is belangrijk voor de zoekmachines. • Onderschrift - hier kun je een onderschift bij de afbeelding toevoegen. • Beschrijving - hier kun je een beschrijving van de afbeelding toevoegen (optioneel). • Link URL - voeg hier een link in als je wilt dat de afbeelding naar een andere locatie linkt. • Uitlijning - hier kun je aanvinken waar de afbeelding ten opzichte van de tekst moet komen te staan. • Afmeting - kies uit Thumbnail, gemiddeld, groot of de volledige grootte. De eerste drie keuzes zijn per website verschillend. Je kunt ook de volledige grootte kiezen en later de afmeting aanpassen. Klik op invoegen in bericht.
8 w w w. h e l l o w o r l d - w e b d e s i g n . n l
Nadat je de afbeelding in het bericht of pagina hebt ingevoegd kun je deze nog bewerken door op de afbeelding te klikken. Er verschrijnen twee icoontjes. De linker om de afbeelding te bewerken en door middel van de rechter verwijder je de afbeelding uit het bericht of pagina.
Klik op het icoontje met het landschap om de afbeelding te bewerken. Je hebt twee tabbladen: afbeelding bewerken en geavanceerde instellingen.
A f b e e l d i n g b ewe r ke n Hier zie je een voorvertoning van de afbeelding met de voorbeeldtekst ernaast. Bij afmeting kun je gemakkelijk de afbeelding procentueel verkleinen. Geef bij uitlijning de gewenste positie weer. Ook hier kun je de titel, alternatieve tekst, onderschrift en link aanpassen. Klik op bijwerken om de veranderingen op te slaan.
9 w w w. h e l l o w o r l d - w e b d e s i g n . n l
G e a v a n c e e rd e i n s t e l l i n g e n In dit tabblad kun je de gewenste afmetingen in pixels zelf invoeren. Tip: als je alleen de breedte invult en de hoogte leeg laat, dan schaalt de afbeelding in verhouding. Doe je dat niet dan krijg je een vervormde afbeelding. Ook kun je hier aangeven of je een rand om de afbeelding wilt. 0 is geen rand, 1 is 1px. Als je de ruimte tussen de tekst en de afbeelding niet voldoende vindt, vul je bij verticale en horizontale spatie een gewenst cijfer in. Standaard is 10px onder en links of rechts van de afbeelding. Als je bij verticale of horizontale spatie een getal invoert zal dat een ruimte aan beide zijden van de afbeelding geven. Dit kun je oplossen door de regel aan te passen die bij ‘ Styles’ verschijnt als je de afbeeldingseigenschappen hebt ingevuld. Als je de afbeelding links uitlijnt en meer ruimte aan de rechterkant van de afbeelding wil, vul je bij horizontale spatie 20 in. Bij ‘Styles’ verschijnt dan de regel margin-right: 20px; margin-left: 20px;. Haal margin-left: 20px; weg en de marge wordt alleen toegepast aan de rechterkant. • Of vul bij ‘Styles’ meteen de gewenste margin in. margin-top: ?px; margin-right: ?px; margin-bottom: ?px; argin-left: ?px; • Of margin: ? ? ? ?; (top, right, bottom, left) Bijvoorbeeld: margin: 0 20px 20px 0: Dit geeft rechts en onder van de afbeelding een marge van 20 px.
Ook in de Mediabibliotheek kun je de afbeeldingen aanpassen. Klik bij de juiste afbeelding op bewerken en onder de afbeelding op afbeelding bewerken. Hier kun je de afbeelding in formaat aanpassen, spiegelen en draaien.
10 w w w. h e l l o w o r l d - w e b d e s i g n . n l
D e te ks t b ewe r ke r De tekst die je invoert in de tekstverwerker kun je gemakkelijk bewerken met de sneltoetsen. In het tabblad Wysiwyg (‘What you see is what you get’) krijg je min of meer te zien hoe de tekst er uit gaat zien. Onder het tabblad HTML staat de code van de tekst. Veel icoontjes van de tekstverwerker komen overeen met die in Word en zijn dus gemakkelijk toe te passen.
L i n k to e v o e g e n Selecteer de tekst die je gelinkt wilt hebben en klik op . In het venster wat zich opent geef je de URL op waar naartoe gelinkt moet worden of kies een pagina of bericht uit de website.
De opmaak Voor de leesbaarheid van de site is het belangrijk dat je de tekst goed opmaakt. Je begint een tekst met een titel. Selecteer deze titel en klik bij ‘Paragraaf’ op het pijltje Selecteer ‘Koptekst 1’. Gewone tekst is ‘Paragraaf’ en subheaders ‘Koptekst 2’. Deze opmaak is ook belangrijk voor de SEO. Zoekmachines zoals Google doorzoeken de tekst en letten vooral op tekst die eruit springt zoals koppen en tekst die strong is enz. Verder is het mogelijk om tabellen in te voegen en tekst een bepaalde style te geven. Deze styles zijn vooringesteld via de stylesheet van de website.
11 w w w. h e l l o w o r l d - w e b d e s i g n . n l
M e n u to e v o e g e n / a a n p a s s e n Klik aan de linkerkant van het scherm op ‘Weergave > Menu’s’. Hier staan alle menu’s die in je website te zien zijn. Klik op het tabblad met het juiste menu om deze aan te passen. Voeg pagina’s toe door aan de linkerkant bij ‘Pagina’s’ de juiste pagina aan te vinken en op ‘Aan menu toevoegen’ te klikken.
Verander gemakkelijk de volgorde van het menu door met de onderdelen te slepen. Door een menuonderdeel inspringend onder een ander menu-onderdeel te plaatsen maak je een submenu. Klik op het pijltje naast de ‘Pagina’ op een menu-onderdeel om de naam aan te passen of deze te verwijderen. Je kunt een externe pagina aan het menu toevoegen door bij ‘Aangepaste links’ de url in te vullen en de labelnaam van het menu-item. Klik op ‘Aan menu toevoegen’.
12 w w w. h e l l o w o r l d - w e b d e s i g n . n l
