Zo bouw je je eigen website

Door: richard-veenstra | 10 september 2018 18:01

script, laptop, programmeren, code
Apps & Software

Inhoudsopgave

  1. Inleiding
  2. Pagina 2
  3. Pagina 3

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.

Tip 06 In de Customizer verander je kleuren, lettertypes en andere vormgevingselementen.

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 07 Voeg afbeeldingen aan je pagina toe voor een wat visueler uiterlijk.
Er zijn twee manieren om informatie op je site te zetten: via een bericht of via een pagina

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 08 Het is slim om de permalinks te wijzigen.

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.

Een adaptieve website past de vormgeving van de site aan het apparaat aan waarop het wordt weergegeven

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.

Tip 10 De pagina’s Home en Over mij zijn aan het menu van de website toegevoegd.

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.

Tip 11: Plug-ins

Om de functionaliteit van je website uit te breiden, kun je gebruikmaken van plug-ins. Standaard zijn er twee plug-ins geïnstalleerd, Hello Dolly is vrij nutteloos, maar Akismet zorgt ervoor dat spam minder kans heeft om als commentaar op berichten terecht te komen. Tenminste, als je toegestaan hebt dat er gereageerd kan worden op je berichten (bij Instellingen / Reacties / Sta toe dat bezoekers kunnen reageren op nieuwe artikelen).

Je kunt duizenden plug-ins gratis installeren als je op Plugins klikt en voor Nieuwe plugin kiest. Bij elke plug-in zie je twee belangrijke zaken: hoe de plug-in door gebruikers wordt gewaardeerd en wanneer de laatste update was. Vooral dat laatste is enorm belangrijk: installeer nooit plug-ins die langer dan zes maanden geen update hebben gehad of die slecht gewaardeerd worden, deze plug-ins kunnen een veiligheidsrisico voor je site opleveren. Een goede plug-in voor de veiligheid van je website is All In One WP Security & Firewall, hierover lees je meer in tip 3. Heb je een contactformulier nodig, dan is Contact Form 7 de beste plug-in, voor een tweetalige site installeer je het beste Polylang of WPML en voor een webshop wordt WooCommerce het meeste gebruikt. Klik op Populair om te zien welke plug-ins vaak geïnstalleerd worden. Achter de naam van de plug-in die je wilt installeren, kies je voor Nu installeren. Daarna moet je hem nog activeren door op Activeren te klikken. In sommige gevallen wordt de plug-in ook in je menu aan de linkerkant van je WordPress Dashboard toegevoegd.

Tip 11 Plug-ins breiden de functionaliteit van je website uit.
Om de functionaliteit van je site uit te breiden, kun je gebruikmaken van plug-ins

Tip 12: Updates installeren

Je zult zien dat er na verloop van tijd rode bolletjes achter bepaalde menuopties verschijnen, wat betekent dat er voor dat item een update beschikbaar is. Updates kunnen verschijnen voor WordPress zelf, voor plug-ins of voor thema’s. Het is belangrijk om deze updates uit te voeren en je site volledig bijgewerkt te houden om minder gevoelig te zijn voor hackersaanvallen of andere fouten. Klik op Updates en zet vinkjes voor de dingen die je wilt updaten. Kies vervolgens voor Thema’s bijwerken of Plugins bijwerken. Ga je je thema updaten, wees je er dan van bewust dat er mogelijk wijzigingen verloren gaan als je geen gebruik hebt gemaakt van een child thema. Dit geldt echter alleen als je zelf in de php-bestanden hebt lopen sleutelen of css-code aan de zogenaamde stylesheet hebt toegevoegd. Heb je alleen maar wijzigingen gedaan via de Customizer, dan kun je veilig je thema updaten.

Tip 12 Er zijn vijf updates die je kunt uitvoeren om je site up-to-date te houden.

Tip 13: Veiligheid

Internetcriminaliteit viert hoogtij, reden te meer om ervoor te zorgen dat je site goed beveiligd is tegen allerhande aanvallen. Het belangrijkste is uiteraard dat je een wachtwoord en gebruikersnaam kiest die niet te makkelijk te raden zijn (‘admin’, ‘Jan’ of ‘beheerder’ zijn erg gemakkelijk te raden, ‘gv76t7gb75’ bijvoorbeeld is niet zo eenvoudig) en dat je je website up-to-date houdt. Installeer vervolgens de plug-in All In One WP Security & Firewall. Na activering zie je een nieuwe menuoptie genaamd WP Security. De plug-in geeft een compleet overzicht van alle elementen op je website die je kunt beveiligen. Onder Critical Features zie je dingen die je eigenlijk allemaal op ON moet zetten. Klik op Login Lockdown om ervoor te zorgen dat gebruikers een uur worden geblokkeerd als ze drie keer een fout wachtwoord opgeven. Zet vervolgens een vinkje voor Check this if you want to enable the login lockdown feature and apply the settings below en zet het cijfer 3 achter Max Login Attempts. Vinkjes achter Display Generic Error Message en Instantly Lockout Invalid Usernames zorgen ervoor dat speciale bots meteen worden buitengesloten als derden je site proberen te hacken.

Tip 13 Een goede plug-in is All In One WP Security & Firewall.
Login Lockdown blokkeert gebruikers die een aantal maal een verkeerd wachtwoord opgeven

Tip 14: Contactformulier

Door een contactformulier kan een bezoeker gemakkelijk contact met je opnemen, maar ook hiervoor is een plug-in vereist. Verreweg de bekendste is Contact Form 7. Installeer en activeer de plug-in, je ziet dat de optie Contact toegevoegd wordt in het WordPress-menu. Klik erop en selecteer Contactformulier 1. Verander eventueel de naam bovenin en klik op Opslaan. Je ziet dat de code eronder is veranderd. Deze code is belangrijk, want deze moet je straks op een contactpagina plakken. Het contactformulier bevat vijf tabbladen, waarvan Formulier en E-mail de belangrijkste zijn. Onder Formulier bepaal je hoe je contactformulier eruit komt te zien. Wil je bijvoorbeeld een optie voor een telefoonnummer toevoegen, dan typ je <label> Je telefoonnummer [tel your-phone] </label>, waarbij je Je telefoonnummer kunt veranderen in een eigen tekst. Plaats je een * achter tel, dan zeg je ermee het opgeven van een telefoonnummer verplicht is. Voor de duidelijkheid kun je in dat geval (verplicht) achter Je telefoonnummer zetten. Vult een bezoeker geen telefoonnummer in, dan zal het contactformulier dit aangeven en alsnog vragen om een telefoonnummer. Onder E-mail moet je zorgen dat je achter Aan je eigen e-mailadres opgeeft. Voor meer opties klik je op E-mail instellen of lees je de documentatie van Contact Form 7 door. Sla alles op en maak een nieuwe pagina aan met de naam Contact. In het tekstveld geef je de code op en klik je op Publiceren. Vergeet je nieuw aangemaakte pagina niet aan het menu toe te voegen, hoe je dat doet, heb je kunnen lezen in deel 1 bij tip 10.

Tip 14 Maak een contactformulier aan.

Tip 15: Categorieën en tags

Gaat jouw website straks veel berichten bevatten, een blog bijvoorbeeld, dan is het slim om een onderverdeling in categorieën te maken. Dat lijkt misschien niet heel belangrijk als je maar tien berichten hebt, maar zo gauw je honderden berichten op je site hebt geplaatst, had je gewenst dat je veel eerder met het aanmaken van categorieën was begonnen. Categorieën maken is heel simpel en kun je gewoon doen als je een nieuw bericht schrijft. Open een bericht of maak een nieuw bericht door op Berichten / Nieuw bericht te klikken. Aan de rechterkant zie je dat er een vinkje voor Uncategorized staat. Een nieuwe categorie maak je aan door voor Nieuwe categorie aanmaken te kiezen. Kies een naam en klik op Nieuwe categorie toevoegen. Overigens kun je de categorieën onderverdelen in hoofd- en subcategorieën door in het menu eronder gewoon een categorie te selecteren, de nieuwe categorie wordt als subcategorie onder deze hoofdcategorie geplaatst.

Eronder kun je tags toevoegen aan een bericht. Dit maakt het voor bezoekers gemakkelijk te zien over welke onderwerpen een bericht gaat. Het verschil tussen categorieën en tags is dat een bericht meestal maar één of twee categorieën heeft, maar tientallen tags kan bevatten. Er bestaan plug-ins of widgets waarmee je op een pagina een tag cloud kunt plaatsen. Deze laat alle gebruikte tags op je site zien, bezoekers kunnen op een tag klikken waarna de relevante berichten worden getoond.

3 Reactie(s) op: Zo bouw je je eigen website

  • Om te reageren moet je ingelogd zijn. Nog geen account? Registreer je dan en praat mee!
  • 4 september 2018 04:32 WPbeveiligen
    WordPress is een geweldig cms. De mogelijkheden zijn eindeloos met de 55.000+ gratis plugins.
    Toch heeft WordPress ook een zwak punt, omdat WordPress zo populair is en gratis te downloaden hebben veel hackers zich gericht op het cms.
    Ze zoeken naar lekken in het cms en de plugins die door derden geprogrammeerd worden.
    WordPress heeft standaard geen beveiliging.
    Hou het aantal plugins beperkt, denk aan 8-15 maximaal. Het liefst zo min mogelijk aangezien plugins regelmatig lek raken. Een paar dagen geleden is nog bekend geworden dat WooCommerce (de webshop plugin) een mogelijk.veiligheidsrisico had.
    Hou de website en de plugins daarom goed up-to-date en laat geen ge-deactiveerde plugins en thema's staan.
    Ps: de login pagina is standaard /wp-admin en dat weten hackers ook.
    Kies daarom een goed wachtwoord!
    Wanneer je een reactie plaatst ga je akoord
    met onze voorwaarden voor reacties.
  • 12 september 2018 20:02 Kasander1
    Weet je toevallig ook een site waar een lijst staat van plug-ins met een veiligheidsrisico?
    Wanneer je een reactie plaatst ga je akoord
    met onze voorwaarden voor reacties.
  • 11 september 2018 15:40 jimwarcraft
    Toch krijg ik een beter gevoel bij als ik een website helemaal van scrap maakt. (Met behulp van code.)
    Wanneer je een reactie plaatst ga je akoord
    met onze voorwaarden voor reacties.

Wanneer je een reactie plaatst ga je akoord
met onze voorwaarden voor reacties.