WORDPRESS op de FourBottles manier
Pagina 1
Fijn dat je voor FourBottles hebt gekozen voor het realiseren van je website. Bij een website hoort natuurlijk een Content Management Systeem (CMS). Ik maak gebruik van Wordpress om dit mogelijk te kunnen maken. Echter is elke website anders, dus heb ik je Wordpress installatie helemaal op maat gemaakt, zodat je straks op een gemakkelijke en leuke manier je website kunt voorzien van nieuwe content. Niet alles zal dus van toepassing zijn op jouw website. Deze handleiding zal je wegwijs maken in de basisprincipes van Wordpress en eventuele extra functies die ik heb toegevoegd. Veel plezier! Dennis Scholten
Inhoudsopgave 3 Inloggen 4 Bestaande pagina’s bewerken 5 De Editor 6 Afbeeldingen toevoegen / bewerken 8 Website-specifieke velden 11 Pagina’s aanmaken 12 Berichten bewerken / aanmaken
Pagina 2
Inloggen
Om in te loggen typ je /admin achter je website-adres. Je krijgt het FourBottles logo te zien, zoals op de cover van deze gids. Vul hier je gebruikersnaam en wachtwoord in. ! Let op: Krijg je voordat je in het loginscherm knomt een pop-up te zien? Vul dan als gebruikersnaam en wachtwoord login in om verder te gaan. Dit dient als extra beveiliging tegen hackers.
Dashboard
Als je bovenin de grijze balk op je websitenaam klikt, kom je op het dashboard terecht, van daaruit kun je een aantal dingen handmatig aanpassen.
• (Nieuws)berichten aanpassen of maken • Pagina’s bewerken of aanmaken • Menustructuur aanpassen (Weergave > Menu’s)
Pagina 3
Bestaande pagina’s bewerken
Je ziet dat er een grijze balk is verschenen aan de bovenkant van je scherm. Dit is de admin bar. Ga naar de pagina die je wilt aanpassen en klik in de admin bar op Pagina bewerken. Je komt nu in de Editor terecht, in de basis ziet deze er overal hetzelfde uit, echter kan het per website en per type pagina verschillen welke opties er beschikbaar zijn. De basis zie je hieronder:
< Titel invullen
De teksten van de pagina kun je hier bewerken
Klik op Bijwerken om je pagina op te slaan
Overige opties Hoofd - Hier kun je aangeven onder welke hoofdpagina deze pagina valt. Dit is niet verplicht. Sjabloon - Websites werken met verschillende paginasjablonen. Indien van toepassing geef je hier aan of de pagina een bijzondere layout moet krijgen (homepage, contactpagina, etc.)
Pagina 4
De Editor
Nu je weet hoe de basis van een pagina eruit ziet, gaan we wat dieper in op de mogelijkheden voor tekstopmaak en het toevoegen van afbeeldingen.
Je zult ongetwijfeld een aantal dingen herkennen uit tekstverwerkingsprogramma’s. Laten we alles even snel doorlopen (vlnr, vbno): Media toevoegen - Voor het toevoegen van afbeeldingen of bestanden. Zie pagina 6 voor een uitgebreide uitleg. Bold / Italic / Doorstreept - Spreekt voor zich. Bullet lijst / Genummerde lijst- Spreekt voor zich. Quote - Wordt in principe niet gebruikt, tenzij aangegeven. Uitlijning Links / Midden / Rechts - Heel belangrijk in sommige gevallen. Link - Wordt klikbaar wanneer je een tekst selecteert. Klik op het schakeltje om een link te bewerken/toe te voegen, en klik op het knopje ernaast om een link te verwijderen. Tip: je kunt ook naar een bestaande pagina linken. More en Fullscreen - niet relevant Toon volledige toolbar - Een tweede rij opties, zoals in het voorbeeld Stijlen - Hier zet ik bepaalde aangepaste stijlen in, zodat je bijvoorbeeld een link er als een button uit kunt laten zien ‘Paragraaf’ - Hier kun je een stijl selecteren (paragraaf, koptekst 1, 2 en 3 zijn het belangrijkst). Ik stem vooraf vaak even af welke opties relevant zijn. Onderstrepen - Spreekt voor zich Uitvullen - Wordt zelden gebruikt, aangezien het vaak niet mooi wordt. Tekstkleur - Liever niet gebruiken, vanwege de vormgeving. Plakken vanuit Tekstverwerker / Word / Opmaak wissen - Deze 3 opties kun je gebruiken als teksten die je in de editor plakt opmaak meenemen die niet gewenst is. Bijzondere tekens - Als je éven niet meer weet hoe dat dakje erop moet ;) Tekst in laten springen - Liever niet gebruiken i.v.m. de opmaak. Undo / Redo / Help - Je kunt ook CTRL+Z of CMD+Z gebruiken. Pagina 5
Afbeeldingen toevoegen / bewerken
Het toevoegen van afbeeldingen is eigenlijk heel simpel, maar het is wel belangrijk om de basisregels te weten, zodat je pagina er goed uit komt te zien. Als je op Media Toevoegen hebt geklikt, krijg je een van deze schermen voor je:
Je kunt wisselen tussen de schermen door middel van de tabjes bovenaan. Het linkerscherm is voor het uploaden van nieuwe bestanden; Het rechterscherm is voor het gebruiken van bestaande bestanden. Een nieuwe afbeelding plaatsen Ga naar het uploadscherm en klik op bestanden selecteren, ga naar de map waar je afbeeldingen in staan en selecteer de gewenste afbeeldingen (1 of meerdere). Als je dat hebt gedaan, zullen de afbeeldingen worden geüpload naar de server. Ze worden tevens bijgesneden naar diverse formaten, afhankelijk van de website. Zoals je ziet, ben je nu overgegaan naar het tweede scherm. Dus voor verdere instructies, lees de volgende alinea’s. Een bestaande afbeelding plaatsen Ga naar het Mediabibliotheek scherm om alle afbeeldingen te zien, die op de server zijn geüpload en klaar zijn voor gebruik. Selecteer 1 of meerdere afbeeldingen die je wilt tonen op de pagina (of -in het geval van de voorbeelden op pagina 8- in de viewer / header / etc.).
Pagina 6
Als je een of meerdere afbeeldingen hebt geselecteerd, krijg je een aantal opties te zien aan de rechterzijde. Deze zijn alleen relevant bij het plaatsen van een afbeelding bij tekst, dus niet in een viewer/header/ gallery/etc. Het volgende moet je instellen: Vul een titel en alt-tekst in, dit is handig voor zoekmachine-optimalisatie. Een onderschrift is vaak niet aan te raden, vanwege de opmaak. Wat onderaan staat is het meest belangrijk. Geef bij uitlijning aan of het plaatje links, rechts of gecentreerd moet komen te staan. Bij afbeeldingen die ongeveer net zo breed (of breder) zijn als de tekst, kun je het best Gecentreerd kiezen. Link naar geeft aan wat er moet gebeuren als een bezoeker op het plaatje klikt. Zit er een ‘lightbox’ in de website verwerkt, dan kun je deze oproepen door Mediabestand te kiezen. Is de afbeelding groot genoeg en wil je deze niet klikbaar hebben, kies dan Geen. De afmeting van een bestand kent verschillende opties. Ik zal bij het opleveren van de website aangeven welke optie het meest geschikt is. Klik tot slot op deze button.
Het bewerken van een geplaatste afbeelding, doe je door op de afbeelding te klikken en op het linkerknopje te drukken.
Pagina 7
Website-specifieke velden
Om het beheren van je website voor jou zo simpel mogelijk te houden, creëer ik vaak website-specifieke velden. Een aantal voorbeelden: Afbeeldingen - Veelal gebruikt voor het bewerken van headers, achtergronden of specifieke afbeeldingen op de pagina.
Om een afbeelding te bewerken, ga je over het plaatje heen met je muis, waarna er 2 opties verschijnen. Klik op het kruisje om een afbeelding te verwijderen en een nieuwe te plaatsen. Je kunt nieuwe bestanden uploaden of een afbeelding kiezen uit de Media bibliotheek (zie ook pagina 6) Galleries - Vaak beschikbaar voor het toevoegen van afbeeldingen in viewers of fotoalbums.
Klik op Voeg afbeelding toe en upload of kies je foto’s. Door middel van vinkjes kun je aangeven welke afbeeldingen er in de gallery moeten verschijnen. (zie ook pagina 6)
Pagina 8
Tekst - Vaak zijn er op pagina’s verschillende teksten geplaatst. Een intro of een aantal kolommen bijvoorbeeld. Hier maak ik handige velden voor, zodat alles precies geplaatst wordt waar het hoort. Hieronder een aantal voorbeelden:
In sommige tekstvelden kun je alleen tekst kwijt, in andere kun je ook opmaak en afbeeldingen toevoegen. Kijk ook op pagina 6 voor een uitleg over opmaak-opties en het toevoegen van afbeeldingen.
Keuzemogelijkheden - Als je deze velden tegenkomt, betekent dat dat je een keuze kunt maken. Bijvoorbeeld: welke kleur een pagina moet krijgen, of er een fotoalbum te zien moet zijn en of er andere bepaalde elementen getoond moeten worden (of juist verborgen).
Pagina 9
Herhalers - Soms komt het voor dat je website een module bevat die zo nu en dan bijgevuld moet worden. Dit kunnen tabellen of lijsten zijn, of agenda’s, zoals in het voorbeeld hieronder:
Pas de bestaande velden aan, of klik op de knop onderaan om een nieuwe rij toe te voegen. Je kunt de volgorde aanpassen door met je muis op een van de cijfers in de eerste kolom te gaan staan en de rijen naar boven of naar beneden te slepen. In de herhalers kunnen alle eerder besproken velden terugkomen, afhankelijk van de functie die het op je website bevat. Een nog niet genoemde functie, is het linken naar een bestaande pagina binnen je website, zoals je in het voorbeeld ziet. In deze dropdown verschijnen alle pagina’s en berichten die er op je website bestaan. Je hoeft dus niet zelf een link te vergaren door te knippen en te plakken.
Pagina 10
Pagina’s aanmaken
Naast het aanmaken van pagina’s, is het natuurlijk ook mogelijk om nieuwe pagina’s aan te maken en in het menu weer te geven. Hier zie je hoe je dat moet aanpakken. Klik op + Nieuw en kies Pagina Doorloop alle stappen: titel, hoofd, sjabloon en natuurlijk de content zelf Naar wens? Klik op Publiceren Een pagina toevoegen aan het menu Met alleen het aanmaken van de pagina, ben je er nog niet helemaal. Je wilt natuurlijk de pagina in het menu weergeven. Dat is gelukkig niet moeilijk. Ga naar Weergave > Menu’s
Hier zie je de menustructuur. Aan de linkerzijde bij Pagina’s zul je je nieuwe pagina zien staan. Selecteer deze en klik op Aan menu toevoegen. Het item verschijnt in de structuur. Sleep hem nu op de juiste plek. Door het item een ‘tikje’ naar rechts te geven, zal deze in het submenu verschijnen (indien van toepassing op de website). Klik op Menu opslaan, je pagina is nu opgenomen in het menu.
Pagina 11
Berichten bewerken / aanmaken
Berichten zijn ook een soort pagina’s, echter hebben ze een speciale functie. Meestal worden ze gebruikt voor nieuwsitems. Om een bericht te bewerken of aan te maken, volg je dezelfde stappen als bij een pagina. De editor, specifieke velden en het plaatsen van afbeeldingen werkt precies hetzelfde als bij pagina’s. Echter zijn er een aantal extra opties: Categorieën - Als je website maar 1 gedeelte bevat dat bestaat uit berichten, dan zul je hier niets mee hoeven doen. Maar soms komt het voor dat berichten voor verschillende doeleinden worden gebruikt. Zoals in dit geval voor de nieuws, publicaties en referenties. Geef in dit geval aan onder welke categorie het bericht valt, zodat deze straks de juiste functie krijgt. Bij het veranderen van een categorie, kunnen er mogelijk extra velden verschijnen of verdwijnen. Doe dit dus altijd voordat je het bericht gaat opmaken Uitgelichte afbeelding - Deze wordt vaak gebruikt als thumbnail of header van een nieuwsbericht. Klik op Stel uitgelichte afbeelding in om een afbeelding te uploaden of te kiezen.
Staat er al een afbeelding? Dan kun je deze vervangen door eerst op Uitgelichte afbeelding verwijderen te klikken. Vergeet niet om na afloop op Bijwerken of Publiceren te klikken!
Pagina 12
