I n h o u d s o p g ave I n t ro d u c t i e 2 I n l o g g e n 3 D a s h b o a rd 4 Pa g i n a a a n m a ke n / b ewe r ke n
5
B e r i c h t to e v o e g e n / b e w e r k e n
6
Categorieën
6
Afbeeldingen 6
D e te ks t b ewe r ke r L i n k to e v o e g e n De opmaak
7
7
7
A f b e e l d i n g to e v o e g e n
8
Upload files 9 M e d i a L i b r a r y 9
A f b e e l d i n g b e w e r k e n 9 Ad va n c e d S e t t i n g s 9 Afbeeldingen aanpassen in de Mediabieb 10
G a l l e r ij to e v o e g e n
11
N e x t G E N G a l l e r y 1 2 Instellingen
12
G a l l e r ij a a n m a k e n 1 2 G a l l e r ij i n v o e g e n
12
M e n u to e v o e g e n / a a n p a s s e n 1 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
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.
• Posts: 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 • Pages: hier kun je pagina’s aanmaken en is een overzicht van alle pagina’s te zien. • Comments: een overzicht van alle reacties op berichten op de site. • Appearance: 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. • Users: een overzicht van de verschillende gebruikers van de site en hun kenmerken. • Tools: de mogelijkheid om informatie uit een database in te voeren en te exporteren. • Settings: 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 Pages op ‘Add new’ om een nieuwe pagina toe te voegen. Voer de titel van de pagina in (Enter title here). 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 ‘Page Attributes’ aangeven welke andere pagina de hoofdpagina is. Ook kun je hier de juiste template selecteren. De pagina kun je opslaan door aan de rechterkant op ‘Publish’ te klikken. Een pagina kun je bewerken door de aanpassingen door te voeren en op ‘Update’ te klikken. Het resultaat kun je gelijk bekijken door op de link ‘View Page’, 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 ‘Posts’ en klik op nieuw bericht aanmaken. Voer de titel en bericht in en vink de juiste categorie aan. Klik op ‘Publish’. Je kunt het bericht bekijken door op de link ‘View Post’ onder de titel of op ‘Preview Changes’ 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 Categories > Add New Category de naam in te voeren. Wordpress maakt zelf een slug (een url vriendelijke naam) aan.
Afbeeldingen Er kunnen ook afbeeldingen ingevoegd worden. Dit doe je door op ‘Add Media’ 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. 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
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 ‘Visual’ krijg je min of meer te zien hoe de tekst er uit gaat zien. Onder het tabblad ‘Text’ 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 ‘Paragraph’ 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.
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
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 ‘Add Media’. Insert Media - een afbeelding toevoegen Create Gallery - een gallerij toevoegen Set Featured Image - een uitgelichte afbeeldign toevoegen Insert from URl - hier kan een link naar een afbeelding op een andere website toegevoegd worden. Bij deze keuzes heb je de keuze om direct van de computer afbeeldingen op te halen ‘Upload files’ of om afbeeldingen te selecteren die reeds aanwezig zijn in de ‘Media Library’.
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
Upload files Je kan afbeeldingen vanaf je computer naar het uploadscherm slepen of klik op ‘Select files’. De afbeeldingen komen zo in de Mediabieb terecht.
M e d i a L i b ra r y Als de afbeelding al in de mediabieb staat vink je deze aan. Je krijgt de gegevens van de afbeelding aan de rechterkant te zien. Bij ‘Link to’ vul je in of de afbeelding moet kunnen vergroten in een pop up ‘media file’ of dat deze mogelijkheid er niet is ‘None’. Bij size selecteer je welke afmeting de afbeelding moet hebben. Deze grootte kan achteraf altijd aangepast worden.
A f b e e l d i n g b ewe r ke n Om de afbeelding na het invoegen te bewerken klik je op de afbeelding. In de linkerbovenhoek verschijnen twee icoontjes. KLik op het landschapicoontje om de afbeelding te bewerken. Klik op het rode teken om de afbeelding te verwijderen.
Je hebt twee tabbladen: Edit image en Advanced Settings.
Edit Image Hier zie je een voorvertoning van de afbeelding met de voorbeeldtekst ernaast. Bij size kun je gemakkelijk de afbeelding procentueel verkleinen. Geef bij Aligment de gewenste positie weer. Ook hier kun je de title, alternative text, caption en link aanpassen. Klik op ‘Update’ om de veranderingen op te slaan.
Ad va n c e d S e t t i n g s 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 border 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 vertical en horizontal space een gewenst cijfer in. Standaard is 10px onder en links of rechts van de afbeelding. Als je bij vertical en horizontal space 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.
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
• 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.
Afbeeldingen aanpassen in de Mediabieb 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
G a l l e r ij to e v o e g e n Om een afbeelding toe te voegen klik je boven de tekstverwerker op ‘Add Media’. Er opend een scherm met aan de linkerkant de keuze ‘Create Gallery’. Daarna maak je de keuze om direct van de computer afbeeldingen op te halen ‘Upload files’ of om afbeeldingen te selecteren die reeds aanwezig zijn in de ‘Media Library’. Vink de afbeeldingen aan die in de gallerij moeten. Voer bij ‘Title’ de omschrijving van de afbeelding in. Dan is deze te zien in de pop up. Klik op ‘Create a new gallery’. Je kan gemakkelijk de afbeeldingen anders neer te zetten door op een afbeelding te klikken en te verplaatsen. Voer bij Gallery Settings is: • Link to - Media file • Columns - 4 Klik op ‘Insert Gallery’. Je kan de gallerij aanpassen door erop te klikken in het Visual tabblad. Er verschijnen dan twee icoontjes • landschapje - hiermee bewerk je de gallerij • rood teken - hiermee verwijder je de gallerij
G a l l e r ij p l u g i n Als je veel gallerijen gaat toevoegen aan de website is het verstandig om hiervoor een plugin (Nextgen) te instaleren. WordPress maakt namelijk als je een afbeelding toevoegd aan de Mediabieb altijd drie verschillende groottes aan van de afbeelding. Dit neemt bij veel afbeeldingen veel ruimte op de server in. De Nextgen plugin maakt maar twee groottes aan. De orginele grootte en een thumbnail. Dit neemt veel minder ruimte in beslag.
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
NextGEN Gallery Heb je veel galerijen op je website dan is het aan te raden de NextGEN plugin te instaleren. Met deze plugin kan je zowel imagelisten als slideshows aan je website toevoegen.
Instellingen Vaak zal de plugin al ingesteld zijn maar is dit niet zo kan je zelf bij ‘Options’ verschillende kenmerken veranderen. General Options: hier hoef je niet te veranderen. Thumbnails: pas hier de grootte van de thumbnails aan. Images: vul de gewenste grootte in die de afbeeldingen moeten krijgen tijdens het uploaden. Gallery: door hier het vinkje weg te halen bij ‘Integrade slideshow’ komt er geen link bij elke gallerij. Effects: vink aan welke manier je wilt gebruiken om de afbeelding te vergroten. Bij custom kan je een eigen lightbox invoegen. Watermerk: hier voeg je een watermerk toe aan alle afbeeldingen. Niet gebruiken. Slideshow: de verschillende eigenschappen van de slideshow kan je hier aanpassen.
G a l l e r ij a a n m a k e n Klik op ‘Add gallery/Images’ > ‘Add new gallery’. Geef de nieuwe gallery een naam en klik op ‘Add gallery’. Upload images door op ‘Select files’ te klikken en de afbeeldingen vanaf de computer te uploaden. Vink desgewenst ‘scale images to max width or max height aan’ en kies de gallery aan waar je de afbeeldingen aan toe wilt voegen. Klik op ‘Upload Images’. De gallerij is nu aangemaakt. Je kan deze bewerken bij ‘Manage gallery’.
G a l l e r ij i n v o e g e n Ga naar de bewuste pagina of bericht waar de gallerij ingevoegd moet worden. Ga op de juiste plek in de tekstverwerker staan en klik op het ‘Add NextGEN Galery’ icoontje in de bovenbalk van de tekstverwerker. Selecteer de juiste gallerij die je in wilt voegen en vink je juiste vorm aan; • Imagelist: de thumbnails worden in een lijst naast elkaar en onder elkaar getoont. • Slideshow: geeft een slideshow weer op de pagina. • Imagebrowser: zo kan je in de pagina handmatig de afbeeldingen bekijken. Door op het pijltje onder de afbeelding te klikken ververst de pagina en laat de volgende afbeelding zien. Klik op ‘Insert’.
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
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 ‘Appearance > Menus’. Hier staan alle menu’s die in je website te zien zijn. Klik op het tabblad met het juiste menu om dee aan te passen. Voeg pagina’s toe door aan de linkerkant bij ‘Pages’ de juiste pagina aan te vinken en op ‘Add to menu’ 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 ‘Custom links’ de url in te vullen en de labelnaam van het menu-item. Klik op ‘Add to menu’.
Wil je een hoofdpagina die zelf niet aanklikbaar is maar die wel de subpagina’s laat zien? Vul bij ‘Custom Links’ een URL in bijv www.ns.nl. Geef het menuitem een labelnaam en klik op ‘Add to menu’. Maak suppagina’s aan door deze onder het nieuwe item te slepen. Zie afbeelding hiernaast. Klik nu bij de hoofdpagina op het pijltje naast ‘Page’ en verwijder de url link. Op deze manier is het menuitem zelf geen link meer maar bevat het wel links naar subpagina’s.
13 w w w. h e l l o w o r l d - w e b d e s i g n . n l