Zo bouw je je eigen website

Een website bouwen lastig? Welnee! Tenminste, niet als je kiest voor een makkelijk contentmanagementsysteem als WordPress. In twee delen laten we je zien hoe je zelf een website bouwt.

Tip 01: Wat is WordPress?

Grote kans dat je weleens van WordPress hebt gehoord. Het is één van de meest bekende en geliefde platforms om een website mee te maken. WordPress is een zogenaamd cms, wat staat voor contentmanagementsysteem. Het is opensource, wat betekent dat iedereen het gratis mag gebruiken, zowel voor persoonlijke als commerciële doeleinden. In den beginne was het systeem vooral gericht op bloggers, maar dit is allang niet meer zo. Je kunt er tegenwoordig bijvoorbeeld je eigen webshop mee maken, een site voor je zaak of restaurant ontwerpen of uitdragen waar je als designer of fotograaf voor staat. Er zijn twee versies van WordPress: WordPress.com en WordPress.org. De eerste is een commerciële versie van WordPress, hier kun je een eenvoudige website bouwen op de servers van moederbedrijf Automattic, je betaalt hiervoor een bepaald bedrag per maand. Wij focussen ons echter op WordPress.org, deze versie breng je zelf bij een host naar keuze onder. Dit biedt veel voordelen: je kunt zelf een provider kiezen, je kunt thema’s en plug-ins installeren en de website compleet naar je eigen hand zetten. Op https://nl.wordpress.org lees je meer informatie.

Tip 02: Webhost

Voordat je WordPress gaat downloaden moet je een webhost kiezen. Wij maken voor dit artikel gebruik van SoHosted, een Nederlands hostingbedrijf, maar je kunt natuurlijk iedere andere host gebruiken. De stappen die te maken hebben met de installatie kunnen daardoor wel afwijken. Je hebt twee dingen nodig van een webhost: een domeinnaam en ruimte op hun servers waar je je website op gaat zetten. De meeste hostingproviders bieden hiervoor een combinatiepakket aan. De eerste stap is onderzoeken of de gewenste domeinnaam nog beschikbaar is. De kosten van een domeinnaam per jaar liggen bij de verschillende hostingproviders vaak gelijk. Wel zit er verschil in het soort domeinnaam: voor .com betaal je zo’n 12 euro per jaar, voor een .audio, .auto of .hosting-domein kun je zo honderden tot duizenden euro’s per jaar kwijt zijn. Na de keuze voor het domein en de naam, klik je op Registreren en kies je welk hostingpakket je bij je domeinnaam wilt aanschaffen. De prijzen voor het hostingpakket worden weergeven per maand, vaak zo’n 5 tot 10 euro, afhankelijk van de provider en de aangeboden diensten. Belangrijk is dat de webhosting MySQL-databases ondersteunt, je er meerdere e-mailaccounts kunt inrichten, het SSL-ondersteuning biedt en dat je onbeperkt dataverkeer (of in ieder geval veel gigabytes) krijgt. Hoeveel serverruimte je mag gebruiken, is ook belangrijk. Voor een kleine website is 5 tot 10 gigabyte meer dan voldoende, alleen als je van plan bent veel audio- of videobestanden naar je website te gaan uploaden, heb je meer gigabytes nodig.

Tip 03: Voorbereidingen

Wanneer je alles hebt besteld, zul je binnen enkele uren alle gegevens van je hostingprovider krijgen. Dat gaat dan om de accountgegevens van de hostingprovider zodat je nieuwe mailadressen kunt aanmaken of WordPress automatisch kunt installeren, en een gebruikersnaam en wachtwoord voor de ftp-server zodat je bestanden van je pc naar je webserver kunt uploaden. Als je webhost automatisch WordPress voor je op de server kan installeren, krijg je ook hiervoor de toegangscodes, samen met een gebruikersnaam en wachtwoord van de gebruikte MySQL-database. Stuk voor stuk zijn dit allemaal gegevens die je goed moet opslaan! De backend van een website bij SoHosted wordt geleverd door Plesk, dit is een omgeving van waaruit je allerlei zaken omtrent je nieuwe website kunt instellen. Je vindt dit bij Mijn diensten / <je website> / Webhosting beheren. Klik op Plesk openen. Links onderaan klik je op WordPress en kies je voor Installeren om automatisch WordPress te installeren. Als je een andere hostingprovider gebruikt, kan dit er compleet anders uitzien, zeker als de host geen Plesk gebruikt.

Tip 04: Installeren

Plesk heeft automatisch een gebruiker en wachtwoord voor WordPress aangemaakt. Om het wachtwoord te bekijken, ga je naar Websites & Domeinen / WordPress / Installaties en klik je onder Toegangsinfo op Instellingen voor aanmelden wijzigen. Achter Huidig wachtwoord klik je op Tonen. Nu WordPress is geïnstalleerd, kun je voor de eerste keer inloggen op je site. Ga naar www.<jouwsite.nl>/wp-login.php en log in met je accountgegevens. Als het goed is, kom je nu op het Dashboard terecht, dit is de pagina waarvandaan je vrijwel alles voor je website gaat inrichten. Om de taal aan te passen naar het Nederlands, ga je naar Settings / General / Site Language. Klik op Save changes. Het is aan te raden om daar ook alvast wat andere dingen wijzigen, zoals de tijd- en datumnotatie, de tijdzone en het e-mailadres. Achter Sitetitel geef je de naam op van je website, bij Ondertitel kun je een subtitel opgeven. Om in te stellen welke informatie allemaal in het Dashboard wordt weergegeven, klik je links op Dashboard en vervolgens bovenin op Scherminstellingen. Wil je je site bekijken, klik dan links bovenin op de naam van je website.

Tip 05: Thema zoeken

Uiteraard wil je dat je site een persoonlijk tintje krijgt. Dat kun je heel gemakkelijk voor elkaar krijgen door een thema te installeren. Standaard heeft WordPress een thema geïnstalleerd dat je zo kunt gebruiken. Heb je liever een ander thema, dan moet je deze zelf toevoegen. Je kunt een gratis thema installeren door bij Weergave / Thema’s op Nieuw thema toevoegen te klikken. Bij ieder thema kun je op Voorbeeld klikken om te zien hoe het thema eruitziet. Als je speciale wensen hebt voor je website, zul je waarschijnlijk moeten uitwijken naar een betaald thema. Dat kost je eenmalig zo’n 40 à 50 euro. De beste en meeste thema’s vind je hier. Let erop dat een thema goede recensies krijgt en recentelijk nog is geüpdatet. Na betaling met je creditcard of PayPal-account kun je je thema als zip-bestand downloaden. In WordPress klik je nu bovenin op Thema uploaden en selecteer je het zip-bestand. Je kunt zoveel thema’s installeren als je wilt, het thema van je site wordt pas gewijzigd zodra je op Activeren klikt. Voor deze workshop hebben we voor het gratis thema Customizr gekozen.

Child-thema

Vrijwel alle betaalde thema’s bevatten naast een normaal thema ook een child-thema. De functie hiervan is dat je in het child-thema geavanceerde aanpassingen kunt maken die niet meegenomen worden in een thema-update. Het gebruik van een child-thema is niet nodig als je alleen aanpassingen doet in de Customizer.

Tip 06: Vormgeving

Zodra je je thema hebt geïnstalleerd, kun je op Weergave / Customizer klikken (wat verwarrend, maar de WordPress Customizer heeft niets met de naam van het thema Customizr te maken). Je ziet nu hoe je website eruitziet, met aan de linkerkant een heleboel opties om de vormgeving te veranderen. Welke instellingen je kunt aanpassen, is per thema verschillend, maar in de meeste gevallen vind je in ieder geval opties om de kleuren en lettertypes te veranderen en kun je kiezen hoe je header of footer eruit moeten komen te zien. De header is de bovenste strook van je site waar het menu zich bevindt, de footer is het onderste gedeelte met je contactgegevens. Bij ons gekozen thema kunnen we op Globale instellingen klikken en bij Site Identity een logo uploaden. Onder Favicon upload je een variant van je logo die in de browserbalk wordt weergegeven. Alle geüploade bestanden worden centraal in de Mediabibliotheek opgeslagen. Heb je iets in de Customizer aangepast, klik dan op Publiceren om de verandering door te voeren. De weergave van je site is een tijdelijke weergave, het is noodzakelijk om je wijzigingen op te slaan via de publicatie-knop.

Google Fonts

Vrijwel elk thema ondersteunt tegenwoordig Google Fonts. Dit zijn speciaal door Google gecureerde lettertypen die er op elke website goed uitzien. Voor een overzicht van alle Google Fonts ga je hiernaartoe. In een thema kun je meestal niet uit alle Google Fonts kiezen, maar wel een selectie van 100 tot de 200 meest populaire.

Tip 07: Pagina creëren

Je kunt te allen tijde de vormgeving nog aanpassen, maar we gaan nu eerst wat inhoud plaatsen. In principe zijn er twee manieren om informatie op je site te zetten: via een bericht of via een pagina. Een pagina is informatie die je meestal direct vanuit het menu benadert. Denk aan een informatiepagina over je bedrijf, een contactpagina of een portfolio-overzicht van je werk. Een bericht is iets vluchtiger, dit kan bijvoorbeeld een blogbericht zijn, een nieuwsbericht of een andere mededeling. Deze berichten zijn meestal niet via het menu te bereiken. Om een pagina te maken, klik je op Pagina’s / Nieuwe pagina. Geef de naam op van je pagina en typ in het tekstveld eronder de tekst die je op de pagina wilt hebben. Klik op Media toevoegen als je een foto aan je pagina wilt toevoegen. Om je pagina zichtbaar te maken op de site kies je voor Publiceren. Het kan zijn dat er boven of onder het tabblad Publiceren nog meer opties zichtbaar zijn, dit is afhankelijk van het geïnstalleerde thema. In ons thema Customizr kun je bijvoorbeeld kiezen of de pagina sidebars moet krijgen; kolommen naast de pagina. Om de pagina te bekijken, klik je bovenin op Pagina bekijken.

Tip 08: Bericht plaatsen

Een bericht plaatsen gaat op dezelfde manier als een pagina. Klik nu op Bericht en kies voor Nieuw bericht. Ook hier kun je weer een afbeelding toevoegen, iets wat we kunnen aanraden als het om een blog- of nieuwsbericht gaat. Onder de titel zie je een zogenaamde permalink. Als een andere website een koppeling naar jouw artikel wil plaatsen, is daar een permalink voor nodig: een permanente url die naar dit bericht leidt. Standaard ziet een permalink in WordPress er zo uit: www.jewebsite.nl/pagina/jaar/maand/dag/titel-met-verbindingsstreepjes. Als je de structuur van zo’n permalink wilt veranderen, ga je naar Instellingen / Permalinks. Kies de structuur die jij handig vindt. Als je wilt dat mensen meteen kunnen zien op welke datum een bericht is geplaatst, is het handig om te kiezen voor een structuur met tijdsaanduiding. Een structuur met alleen een cijfercode voor het bericht, zoals www.jewebsite.nl/?p=123 is onhandig, Google indexeert deze veel minder goed. Bij je bericht kun je overigens ook de naam van je permalink aanpassen. Als WordPress van jouw berichttitel de permalink de-15-beste-android-apps-van-oktober-2018 heeft gemaakt, kun je dit bijvoorbeeld wijzigen in beste-android-apps-oktober-2018.

Tip 09: Testen

Tegenwoordig is het belangrijk dat een website adaptief (responsive in het Engels) is, hiermee past de vormgeving zich aan het apparaat aan waar het op wordt weergegeven. Zodra je een website op een smartphone opent, zie je bijvoorbeeld dat het menu wordt weergegeven als drie streepjes, terwijl dezelfde website in een browser op de pc gewoon een menu heeft met woorden. Tegenwoordig zijn de meeste thema’s zijn adaptief, je kunt het testen door het thema op je tablet of smartphone te openen en te kijken of het menu uit streepjes bestaat en of de tekst op een pagina goed te lezen is. Ook kun je in sommige browsers snel testen of je website er ook nog goed uitziet in een andere schermresolutie. In Chrome bijvoorbeeld ga je naar Weergave / Ontwikkelaar / Ontwikkelaarstools en klik je op het icoontje links naast Elements (de optie heet Toggle Device Toolbar). In Safari klik je op Ontwikkel / Schakel over naar adaptieve ontwerpmodus.

Tip 10: Menu aanmaken

Als je een paar pagina’s hebt aangemaakt, is het tijd om een menu samen te stellen. Er zijn meerdere mogelijkheden om een menu aan te maken, maar de makkelijkste manier is via de Customizer, mits je thema dit ondersteunt. Wij laten deze manier zien. Ga naar Weergave / Customizer en kijk of je de optie Menu’s ziet. Klik erop en selecteer Nieuw menu aanmaken. Geef je menu een duidelijke naam, bijvoorbeeld Hoofdmenu. Onder Menulocaties selecteer je waar je menu op je website getoond moet worden. In ons thema hebben we vier opties, deze zijn standaard aangevinkt. Klik op Volgende en selecteer + Items toevoegen. Je kunt nu zelf pagina’s aan je menu toevoegen door op het plusje voor de naam van de pagina te klikken. Het is ook mogelijk om berichten aan je menu toe te voegen, maar in de meeste gevallen is dat niet nodig. Klik op Publiceren wanneer je menu compleet is.

Privacybeleid

Sinds mei dit jaar is het noodzakelijk om een goed privacybeleid op je website weer te geven als je data van anderen opslaat en verwerkt, dit heeft te maken met de General Data Protection Regulation (GDPR)/Algemene Verordening Gegevensbescherming (AVG). Als je als privépersoon een blog maakt, is er niet zo veel aan de hand. Zodra je echter dingen verkoopt of e-mailadressen voor een nieuwsbrief verzamelt, is het verplicht een statement op je site te hebben. Maak een privacypagina aan met informatie over wat je verzamelt en hoe je deze gegevens verwerkt en ga vervolgens naar Instellingen / Privacy. Selecteer je pagina met privacy-informatie en klik op Gebruik deze pagina.

235W PW116 R224M H235P-00 laptop adapter voor Dell Optiplex 760 780 SFF Power Supply
DELL JWPHF R795X voor DELL XPS L401x L501x L701x serie Li-ion 56WH/ 6Cell 11.1V
ADS-40FSG-19 laptop adapter voor LG E1948S E2242C E2249 E1948 PC
LENOVO 45N1702 45N1703  voor Lenovo ThinkPad New X1 Carbon 14 serie Li-ion 3.04AH/45WH 14.8V
DELL 6MT4T  voor Dell Latitude E5450 E5550 E5570 Notebook 15.6 Li-ion 62Wh 7.6V(compatible with 7.4V)
633196-001 PS-6221-7 PCA222 laptop adapter voor HP Power Supply s5-1321cx D10-220P PSU 220W