01. Websites maken met WordPress

Met WordPress kan je zonder enige programmeer ervaring simpel je eigen websites en webshops maken. Van simpele websites zoals een blog of portfolio (CV) tot complexe webshops of reserveringssystemen.

Vandaag leren we de basis van WordPress door het maken van een eigen portfolio/CV website. Aan het einde van de les moet je de volgende taken in WordPress kunnen gebruiken en uitvoeren:

– WordPress Dashboard beheren
– WordPress thema’s veranderen en customizen
– Homepage instellen en aanpassen
– Headers instellen
– Featured images toevoegen
– Pagina’s en berichten aanmaken
– Plug-in gebruiken (Resumes)
– Resumes aanmaken
– Shortcodes gebruiken en invoegen
– Media importeren en invoegen

Verdieping

‘WordPress is een Content Management Systeem (CMS) waarmee je heel gemakkelijk een website kunt maken én onderhouden. WordPress begon ooit als simpel CMS om een weblog mee te maken. Inmiddels is WordPress veel meer dan alleen een blogging-platform en wordt het door steeds meer grote merken en bedrijven gebruikt om een website te bouwen.’ MEER INFORMATIE >

PLAN VAN AANPAK

0. Inloggen

0.0 Je hebt vanaf vandaag je eigen website. Je kan deze bezoeken op: *jouwNAAM.TwaanLab.academy

 

0.1 Inloggen
– Ga naar jouw persoonlijke wordpress inlog url (*jouwNAAM.TwaanLab.academy/wp-admin)
– Log in met het algemene klassenwachtwoord
– Je bevind je nu op het Dashboard van je eigen WordPress website. Aan de linkerkant vind je het WordPress Menu

 

0.2 Veranderen gebruikersnaam, email en wachtwoord
– Ga naar Gebruikers > Je profiel
– Wijzig het Schermnaam naar jouw eigen naam
– Wijzig het E-mail adres naar jouw eigen E-mail
– Klik op Wachtwoord genereren en voer je eigen wachtwoord in
– Sla je gewijzigde informatie op door te klikken op Profiel bijwerken (voortaan log je in met je eigen gegevens)

 

– Wil je *jouwURL wijzigen naar een makkelijkere link zoals jan.TwaanLab.academy? Aan het einde van de les kan je bij Toine je persoonlijke URL aan laten passen.

Website aanpassen

1. Thema switchen

WordPress websites bestaan uit een frontend (de zichtbare website) en een backend (het WordPress Dashboard). In de WordPress backend heb je volledige controle over de functionaliteit van je website, het uiterlijk en de inhoud. Wij gaan vandaag beginnen met het maken van een portfolio of CV pagina. Vandaag beginnen we met een ‘Fake’ invulling van de uitstraling en inhoud van jouw (niet bestaande) rockband website. In de loop van het jaar passen we dit aan met eigen thema en inhoud zodat je eindigt met een persoonlijke portfolio.

 

Elke wordpress website bestaat uit Pagina’s en Berichten. Door de scripttaal PHP is het mogelijk deze pagina’s en berichten omhoog te roepen in de frontend zodat ze zichtbaar zijn voor onze website bezoekers. Gelukkig neemt WordPress dit programmeren van een eigen website met deze informatie uit handen. WordPress werkt met Thema’s die het uiterlijk van onze website beheert. Standaard staat deze op het blog-thema Twenty-Seventeen. Alle thema’s zijn aan te passen naar wens, het makkelijkste via ingebouwde tools van het thema, het uitgebreidst via scripten van een child-thema.

 

1.0 Verander de weergave van jouw website naar het thema: Ignis
Google change WordPress theme; antwoord

 

1.1 Open *jouwURL.TwaanLab.academy in een apart tabblad en kijk of het gelukt is

2. Thema's customizen

Ga in de WordPress Backend naar: > Appearance > Customize

 

2.0 Frontpage aanpassen
Verander de titel (*JouwNAAM Pagina) van je website in je rockband naam
Verander de ondertitel van ‘Een andere TwaanLab sites site’ naar een passende onderschrift voor jouw rockband
Verander de Header tekst (tekst over foto) naar een passende omschrijving van jouw rockband
Vervang de Header foto met een passende foto van jouw rocoband
Verander de ‘Continue Reading’ tekst naar ‘Lees Meer’
– Wil je graag een logo voor je rockband plaatsen? Of wil je andere kleuren gebruiken? Voel je vrij om rond te kijken wat er allemaal aan te passen is in het customize menu.
– Sla je aanpassingen op door op Publish te klikken

 

2.1 Bekijk op de frontpage of de wijzigingen zijn opgeslagen

Inhoud maken

3 Berichten maken (Posts)

Nu we het uiterlijk hebben aangepast kunnen we verder gaan met de inhoud. De inhoud van een website is in WordPress verdeeld in meerdere segmenten. Standaard bestaat een WordPress website uit Pages (Pagina’s) en Posts (Berichten). Maak je een webshop? Dan wordt een deel van de inhoud gemaakt door een Plug-in zoals WooCommerce (Producten). Op jouw rockband pagina willen we de bezoeker laten weten wie jullie zijn, waar jullie gespeeld hebben en wat jullie muzikale invloeden zijn. Door gebruik te maken van Pages en Posts kunnen we goed onze inhoud verdelen zodat dit getoond en gebruikt kan worden op de juiste locaties.

  • Een page is één enkele pagina met vaste inhoud. De inhoud kunnen Posts zijn, vaste informatie, afbeeldingen, inschrijfformulieren enz. Elke pagina kan een eigen vormgeving hebben en wordt gebruikt voor een eigen boodschap. De homepage is een voorbeeld van een pagina.
  • Posts zijn lossen berichten. Deze berichten worden opgeroepen op pagina’s en zijn losse artikelen zoals blogposts.

 

3.0 Berichten maken (Posts)
– Verwijder de Post: Hallo Wereld
Maak twee nieuwe bericht aan. Één fictief bericht over een fictief band optreden en één over jullie muzikale invloed of inspiratiebron
– Het bericht met het fictieve optreden geef je een Featured Header Image mee en krijgt de Categorie: Optredens
– Het bericht over een inspiratiebron bevat geen header image maar heeft wel twee foto’s ingevoegd bij de tekst. Dit bericht krijgt als Categorie: Invloeden.
Publish (Publiceer) beide berichten
– Als je alles goed hebt gedaan zie je op de Homepage je jouw twee berichten staan met een Lees Meer knop

 

* Kom je er niet helemaal achter hoe je werkt met Posts, Media, Headers of Categories? De WordPress Support pagina is de bijbel voor beginnende WordPress developers en voorziet je van alle antwoorden: https://wordpress.org/support/
** Benieuwd hoe je bericht eruit ziet? Klik op View Post in de zwarte bovenbalk

 

3.1 Pagina’s maken (Pages)
– Verwijder Voorbeeld pagina
– Maak een nieuwe pagina aan genaamd CV
– Om de pagina te vullen met informatie over de gedane optredens, muzikale invloeden, instrumenten, opleidingen en persoonlijke band informatie gaan we gebruik maken van een Plug-in genaamd Resume.
– Ga in de menubalk naar de plug-in Resumes en maak een nieuwe CV (Resume) aan
– Vul alle gegevens in onder het tabblad Information
– Maak een fictieve band CV onder het tabblad Experience, Education, Etc
– Vul de talenten en expertises van je rockband in onder het tabblad Skills
– En voorzie je CV met een selfie als Featured image
Publish je Resume en voeg hem toe door de Shortcode (voor full resume) uit het laatste tabblad te kopieren en te plakken in je pagina genaamd CV

 

3.2 Debuggen
– Test nu je Frontend van je pagina. Kan je alles terugvinden op je website zoals je berichten en je CV?
– Werkt er iets niet? Kijk terug naar de gemaakte stappen en onderzoek wat er fout is gegaan

4 Portfolio maken

4.0 Portfolio maken

– Maak 3 nieuwe berichten en vul ze met (fictieve) verslagen van 3 optredens van jouw band
– Zorg ervoor dat minimaal 1 bericht geen Sidebar heeft
– Publiceer je berichten zodat ze zichtbaar worden op de Homepage. Het werkt het mooiste als meerdere berichten voorzien zijn van een Featured image

SEO regels

5 Media voorzien van SEO

Om onze website zo vindbaar mogelijk te maken voor Google is het verstandig om tijdens de bouw rekening te houden met ‘Google-regels’. Een van deze regels is dat wij onze inhoud zoveel mogelijke moeten voorzien van doorzoekbare tags en meta gegevens. Een van de belangrijkste hiervan zijn doorzoekbare afbeeldingen. Door de geuploade afbeeldingen te voorzien van deze tags word onze website Google vriendelijk en zal eerder én hoger zichtbaar worden via zoekmachines zoals Google.

 

5.0 Media voorzien van SEO
– Ga naar Media > Library
– Klik op een afbeelding en vul een titel in bij Title, een informatieve ondertekst bij Caption, een vervangende tekstregel voor de afbeelding als hij niet geladen kan worden bij Alt Text en een korte omschrijving bij Description.

Volgende week gaan we verder met het maken van onze wordpress website door het toevoegen van een menu, webshop en portfolio pagina. In de tussentijd is de website van jou, geef hem vorm, verander de inhoud en maak hem zo groot als jij wilt. Note: kom je erachter dat je een specifieke plugin of thema nodig hebt voor jouw wensen? Dit kan via Toine.

HET VOORBEELD

CV portfolio pagina

Startpunt

Hieronder vind je een mobile versie van de website. Full desktop weergave klik hier.

Eindresultaat

Hieronder vind je een mobile versie van de website. Full desktop weergave klik hier.

Volg ons!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *