WordPress Cursus

De basis cursus

Inleiding

  • Doel: de basisfuncties van WordPress leren te gebruiken,
         met als resultaat een (1e) website!
  • Eerst starten met de structuur, daarna design
  • Pro actief!
  • Door: Tim of Erik Duppen
  • Duur: tot +- 17:00u
  • De site die we gaan maken: cursus-wordpress.com

Voorbereiding

1. Wat is WordPress?

De krachtige motor

Wat is WordPress?

WordPress is het meest gebruikte content management systeem van dit moment.

Verschillen tussen .com en .org

WordPress.com   

  • blogwebsite
  • minder vrijheden
  • jouwdomein.nl/wordpress
  • minder technische kennis noodzakelijk
  • gratis hosting via WordPress.com
  • commercieel: tonen van advertenties en betalen voor “kern diensten”

WordPress.org

  • je bnet zelf eigenaar
  • gratis in gebruik
  • veel meer mogelijkheden (installeren wat je wilt)
  • Google Analytics te gebruiken “track waar bezoekers naar kijken op je site”
  • hosting noodzakelijk
  • vraagt meer technische kennis

Voorbeelden

https://www.bbcamerica.com/
https://www.autoblog.nl/
https://www.mtv.com/news/
https://www.starwars.com/news

2.0 Inloggen & Gebruikers

De achterkant en gebruikers aanmaken

Zelf aan de slag!

Ga naar naam.wpcursus.net/wp-admin/ en vul de onderstaande gegevens in.

  • naam.cursus-wpcurus.net/wp-admin/
  • wp-swipemedia
  • WPcrss2020

2.1 De Achterkant

Van front-end naar back-end

WP Achterkant

  • dashboard
  • toolbar
  • overzicht
  • updates
  • scherminstellingen 
  • hulp
Video afspelen

2.2 Gebruikers aanmaken

Eigen gebruiker & gebruiksrollen

Video afspelen

Een gebruiker toevoegen

Voeg een nieuwe gebruiker toe en let op de volgende zaken:

  • voeg iets toe aan je gebruikersnaam bijv: jouwnaam_WP
  • gebruik een e-mailadres waar je direct toegang tot hebt
  • gebruik altijd een sterk wachtwoord!

Gebruikersrollen

  • Beheerders hebben toegang tot alle administratieve eigenschappen.
  • Redacteuren kunnen alle berichten op de website beheren en publiceren.
  • Auteurs kunnen publiceren, eigen berichten beheren en bestanden uploaden.
  • Schrijvers kunnen eigen berichten beheren maar niet publiceren en geen bestanden uploaden.
  • Abonnees kun reacties lezen/reacties geven/nieuwsbrieven ontvangen, enz. maar ze kunnen geen normale siteberichten schrijven.
  • Klanten zijn geregistreerde personen die iets besteld hebben op de website, zij kunnen alleen hun profiel en bestelde producten zien.
  • Winkelmanagers kunnen de winkel (vaak WooCommerce) beheren en producten wijzigen of toevoegen.

3. De website gereed maken

Thema’s | plugins & algemene instellingen

3.1 Thema kiezen en activeren

Een thema zoeken 

  1. Ga naar Weergave > Thema’s
  2. Zoek het thema TwentyTwenty
  3. Selecteer en activeer het thema

Zie onderstaande foto. 

 

3.2 Plugins kiezen en activeren

Een plugin is een module waarmee je een WordPress site kan uitbreiden. Zie het als een soort App als op je mobiel. WordPress heeft hiervoor ook een eigen “App-Store” binnen je website. Er zijn heel veel goede, maar ook slechte plugins. Hoe weet je nu welke goed zijn? We leggen het je uit!

Installeren van de plugins

Ga naar Plugins  > “Nieuwe plugin” en installeer onderstaande plugins (foto 1).

Bij “plugins toevoegen” kan je rechts in het zoekveld de plugin opzoeken (foto 2).

Voldoet de plugin aan de onderstaande criteria dan is het een goede plugin:

  1. De plugin is recent bijgewerkt.
  2. Er zijn veel actieve installaties (100.000+).
  3. Veel goede en recente reviews.

Voldoet de plugin niet aan bovenstaande punten, dan is ons advies deze niet te installeren. Of je hebt onderzoek gedaan en het is een bewust keuze.

Het kan namelijk voorkomen dat een nieuwe plugin van een goede developer nog niet zoveel installaties en reviews hebben.

foto 1
foto 2

3.3 Algemene instellingen

Aanpassen van de instellingen

We gaan nu een aantal algemene instellingen aanpassen, dit is beter voor het ontwerp van de cursussite.

Dit doen we aan de hand van de foto’s. Waar een pijl staat kun je de ingevoerde gegevens overnemen.

4.1 Pagina’s & Berichten

Pagina’s aanmaken

Video afspelen

Pagina’s aanmaken

Ga naar de back-end, pagina’s en klik op nieuwe pagina. Je ziet een groot tekstvlak, dit is de tekst editor van WordPress. 

Deze werkt bijna hetzelfde als Microsoft Word. In het vlak kan je content toevoegen. Via de tab “tekst” kan de HTML van de tekst bekeken worden. Handig ter controle! In onderstaande foto 1 worden de belangrijkste functies weergegeven.

Meer weten?

Wil je meer weten over de andere instellingen? Klik dan op hulp (rechts boven zie groene pijl) en ga naar “Documentatie over pagina’s bewerken“. Hier staat alle uitleg over pagina’s (pages). 

Zelf aan de slag

Probeer nu zelf onderstaande handelingen uit te voeren. Gebruik de foto’s als hulp.

Kladtekst – foto 1
Schrijf een kladtekst en probeer de verschillende tools uit.  Publiceer de pagina en bekijk aan de front-end. Vervolgens verplaats je de pagina naar de prullenbak.

Voeg een interne & externe link toe (zie video)

Pagina structuur – foto 1 & 2
Maak nu alle pagina’s van de voorbeeld site na. Geef de goede structuur m.b.v. pagina-attributen. Zie Excel foto 2 voor uitleg en volgorde. Let op (!) Per pagina vul je alleen de titel en de pagina-attributen in.

Overzicht – foto 3

Check of jouw paginaoverzicht hetzelfde is als foto 3. Indien nodig, pas je nog een aantal zaken aan.

Foto 1. Belangrijke functies in de WP editor
Foto 2. Navigatie uitgewerkt in Excel
Foto 3. opgeruimd staat netjes

4.2 Pagina’s & Berichten

Berichten

Video afspelen

Bericht aanmaken

Een bericht maak je op dezelfde manier aan als een pagina. Het verschil is dat berichten actueel en dynamisch zijn en direct worden gepost op de blogpagina. Pagina’s daarentegen zijn statisch.

Tevens kan een bericht gelabeld worden met Categorieën en/of Tags zodat deze makkelijk gevonden kunnen worden door de bezoekers van de site. 

» Categorieën

Categorieën zijn bedoeld om een groot aantal berichten te groeperen. Ze zijn de hoofdonderwerpen van je berichten, vergelijkbaar met de inhoudsopgave
van een boek. 

Voorbeeld: Breaking News, Pop Culture, Album Reviews, Music Events.

» Tags

Tags zijn bedoeld om specifieke details van je inhoud te omschrijven. Tags zijn de kernwoorden van je website, vergelijkbaar met de index van een boek.

Voorbeeld: Coldplay, Jay Z, Lowlands, Spotify.

» Uitgelichte afbeelding

Tevens is het mogelijk een uitgelichte afbeelding in te stellen, deze afbeelding wordt gebruikt in het news-overzicht en in het bericht zelf (in ons thema boven de content). Dit is dus een ander soort afbeelding dan een afbeelding geplaatst in de editor!

Meer weten?

Wil je meer weten over de andere instellingen?  Ook hier (zoals bij alle instellingen) kun je op hulp klikken voor meer informatie.

Voorbeeld van een nieuws bericht

Zelf aan de slag

Maak zelf 3 berichten aan met verschillende categorieën en geef elk bericht een uitgelichte afbeelding. In de gratis stockfoto site Pexels.com kun je hiervoor geschikte foto’s vinden. 

Foto 1. Belangrijke functies in de WP editor

Menu “De navigatie”

Met het menuscherm kan de gebruiker een menu maken (ook wel navigatiemenu of hoofdmenu genoemd). 

Het is een gedeelte van de site waarmee bezoekers op de site kunnen navigeren. Ons thema heeft 1 navigatie menu. Dit kan verschillen per thema.

We gaan nu de juiste pagina’s in de navigatie zetten. 

Zelf aan de slag

Voer m.b.v de  foto’s de onderstaande handelingen uit om het menu te maken.

Menu aanmaken:  stap 1 (foto 1)
Ga naar Weergave > Menu en maak een menu aan d.m.v. foto 1:

  1. Selecteer “Maak een nieuw menu” en typ een naam voor je nieuwe menu in het vak “Menunaam”. Klik op de knop “Menu maken”.
  2. Je kunt verschillende items toevoegen: pagina’s, berichten, links en categorieën. Check of pagina geselecteerd is en zet het tabblad op “alles tonen”.
  3. Selecteer de pagina’s die je wilt toevoegen door op het selectie vakje naast de titel van elke pagina te klikken. klik op de knop “aan menu toevoegen” om de pagina’s toe te voegen in het menu-blok.

Menu met submenu’s maken: stap 2 (foto 2)
D.m.v. drag and drop kan je een menu item “child” een submenu van zijn “parent”maken. Doorloop de stappen van foto 2,  zodat je menu hetzelfde is als het voorbeeld en sla je menu  daarna op! Je kan aan de voorkant van je site bekijken of het gelukt is.

Aanpassen of verwijderen: foto 3
Om een item aan te passen of te verwijderen klik je op het pijlpictogram, zie foto 3 nr 1. Je kan de foto verwijderen door op “verwijderen” te klikken of een andere instelling aanpassen. Zie dat niet alle instellingen automatisch aan staan, zie foto 3. 

5. Widgets

Video afspelen

Widgets toevoegen

WordPress widgets zijn een soort modules die inhoud en functies aan de sidebar en footer toevoegen. Voorbeelden zijn: Zoeken, Nieuws overzicht, Categorieën overzicht en Tekst widgets. Deze gebruiken we ook voor de cursussite.

Zelf aan de slag

Probeer de sidebar en de footer (muv copyright tekst) na te maken.

Ga naar weergave > Widgets  verwijder widgets die niet nodig zijn. Sleep de widgets op de goede plek en pas ze naar het voorbeeld aan. Zie foto 1 en video voor uitleg.

Foto 1 Widgets

6. De Customizer

Video afspelen

Customizer selecteren

De WordPress customizer is een fijne tool om de “weergave” van je website aan te passen. De customizer is op 2 manieren te bereiken:

1: Via de achterkant (admin gedeelte), zie foto 1.
2: Als je bent ingelogd aan de voorkant van de site. Klik linksboven op het kwastje met “customizer” erachter, zie foto 2.

Hoeveel instellingen in de customizer staan is afhankelijk van het geïnstalleerde thema. Het thema dat wij gebruiken heeft heel weinig instellingen, zodat het overzichtelijk blijft. In de costimizer staan standaard WordPress instellingen en thema instellingen, zoals je hieronder ziet. 

WordPress Instellingen:

  • Thema veranderen (al gedaan)
  • Site-identiteit (logo, sitetitel, ondertitel)
  • Menu’s (al gedaan)
  • Widgets (al gedaan)
  • Homepage-instellingen
  • Extra CSS (onder header instellingen)

Onze thema instellingen

  • Kleuren (header-, footer- & achtergrondkleur)
  • Thema opties (zoek in header, archief)
  • Cover template (overlay voor achtergrond & tekst)
  • Achtergrond afbeelding (voor elk pagina)

Zelf aan de slag

Ga naar de customizer en pas de instellingen hieronder aan. We starten met de standaard WordPress customizer instellingen.

Zoals je inmiddels gemerkt hebt kan je op verschillende plekken, dezelfde instellingen aanpassen.  “Thema, Menu en Widget” aanpassingen hebben we al gedaan, in de video-uitleg wordt uitgelegd hoe dit is aan te passen. “Homepage section settings” en “naar PRO upgraden” is niet nodig, zie foto 3. 

Hier kan je normaal  de sitetitel, ondertitel, logo en een favicon (url icon) aanpassen, zodat je site een “identiteit” heeft en direct duidelijk is waarover de site gaat. Het logo  staat in ons thema onder de header-instellingen. Pas dit aan voor jouw website.

Bij de kleuren kan je de achtergrondkleur voor elke pagina bepalen. Header & footer achtergrond kleur is voor de header en footer. Met de primaire kleur kan je kleuren aanpassen voor de kopteksten. (H1-H6).

In deze Thema opties kan je niet heel veel veranderen. Maar hier kan je een Zoekbar in de header toevoegen en op de archiefpagina hoe ze berichten tonen.

In de cover template kan je een vaste achtergrondafbeelding aanpassen voor een parallax-effect als je scrollt.
Overlay achtergrondskleur kunt u de standaard accentkleur veranderen (kleur voor de linkjes).
Overlay tekstkleur is de kleur voor een overlay pop-up.

Hier kunt u een achtergrondafbeelding in elke pagina zetten. Dit kan fijn zijn voor een 1pager of een webshop met een thema achtergrond.

Hier kan je je menu’s bekijken en je standaard hoofdmenu instellen. Dit kan beter gedaan worden in de backend: Weergave > Menu’s

De widgets sectie kan je widgets toevoegen aan je website, dit kan zijn van Search Bar in je Footer of een link naar je archief. Dit kan je makkelijker doen in de backend: Weergave > Widgets.

Hier stel je de de home pagina en blog/nieuws pagina in. Zet dit goed voor jouw website.

In het CSS vlak kan je code zetten om de weergave van je site aan te passen. Je kan bijvoorbeeld de tekst rood maken door dit erin te zetten: p {color: red;}. Wil je meer weten over CCS kijk bij w3schools.com of neem contact met ons op :). CSS gaan we namelijk niet verder behandelen tijdens deze cursus.

voor de cursus zet deze code in de ‘Extra CSS’ van de customizer:

section
{
padding: 0px;
}

h1,h2,h3,h4,h5,h6
{
margin-top: 10px!important;
margin-bottom: 10px!important;
}

7. Elementor

Elementor, de snelste groeiende Page Builder!

Video afspelen

Direct zien wat je doet

Elementor is een visuele page builder.  Dit betekent dat je meteen kan zien wat je maakt.

Normaal zie je dit niet maar een heleboel lijnen met HTML code. Met Elementor hoef je zelf niet te coderen want dat doet Elementor nu voor je.

Met Elementor kan je meteen zien wat je gemaakt hebt. De plugin is de laatste jaren heel populair geworden en wordt veel gebruikt vanwege gebruiksvriendelijkheid en de UX. 

Elementor activeren in een pagina

Bewerken met Elementor

Na het installeren van de plug-in kunnen we elke pagina bewerken met Elementor.

Dit doe je door te klikken op de pagina in de dashboard en dan de blauwe knop “Bewerk met Elementor” te drukken.

Elementor
Algemene Instellingen

 

Algemeen:
Standaardkleuren uitschakelen – uit

Standaard lettertypen uitschakelen – uit

Stijl:
Breedte inhoud – 1200px

Vergeet niet je wijzingen op te slaan!

De Elementor structuur

Met het “+” icoontje kan je een sectie toevoegen en met het “folder” icoontje kan je een gratis Elementor Template of je eigen Template toevoegen.


Het Elementor structuur kan verwarrend zijn als je er nog niet aan gewend bent. hier naast hebben we een afbeelding gemaakt dat laat zien wat het verschil is tussen een section, inner section en een column.

Goed om te onthouden is altijd te beginnen met een sectie, vervolgens met een inner sectie en daarna pas je widget toe te passen.

Zelf aan de slag

Maak de onderstaan de structuur na. Gebruik hiervoor de standaard kleuren, padding en marge. 

Elementor Basis Widgets

Inner Sectie

De inner sectie zorgt ervoor dat je meerdere widgets kan plaatsen, de inner sectie kan ook meer dan 2 secties hebben en je kan de grootte per sectie aanpassen.

Tekstbewerker/Kop

De tekstbewerker laat je teksten schrijven zoals deze die je nou leest. De koptekst is vaak gezien als de titel. Je kan ook de kopteksten (h1 t/m h4) plaatsen met de tekstbewerker.

Afbeelding

Hiermee kan je een afbeelding in je sectie of kolom zetten, de grootte ligt aan de grootte van de sectie of kolom.

Video

De video widget laat je een video plaatsen van YouTube, Vimeo of je eigen MP4 bestand.

 

knop

De knop is een handige widget om een link op te maken.

Scheiding/Afstandhouder

Met de Scheiding of Afstandhouder kan je witregels geven aan widgets, maar dit kan je beter doen met “Margin” en “Padding”.

Google Maps

Hieronder vind je een video die het helemaal uitlegt!

Icoon

Hier kan je beeld geven aan een kopje, je kan een klein plaatje (SVG) met een kopje en tekst zetten.

Standaard Pagina Instellingen

Standaard kleuren

Deze kleuren hoef je maar een keer in te stellen en alles dat je maakt zal deze kleuren aanhouden.

Primair –  koptekst (h1 t/m h6)
Secundair –  standaard koptekst van widgets
Tekst – paragraaf(p)
Accent – links

Standaard lettertype

Net als bij de standaard kleuren kan je hier alvast alles instellen zodat je niet bij elke sectie de lettertype en grote hoeft aan te passen
 

Primaire kopregel – koptekst (h1,h2)
Secundaire kopregel – koptekst (h3, h4)
Body-tekst – paragraaf (p)
Accent-tekst – voor Knoppen, Tabjes, etc.

Kleuren kiezer

De kleuren kiezer kan 8 kleuren bijhouden die je bij jouw website het meest gaat gebruiken. Als je geen kleuren combinatie weet kan je altijd een kleuren palette online laten genereren:

Daar stel je je standaard lettertype en breedte in (het zelfde als vanaf de Algemene instellingen pagina).

Dashboardinstellingen

Stuurt je naar de Algemene instellingen.

Belangrijke Info Elementor

Alle belangrijke documentatie kun je vinden op:
https://elementor.com/learn/.

Hieronder een aantal linkjes uit dit overzicht, met informatie die tijdens de cursus is behandeld.

Elementor activeren in een pagina.
Beknopte uitleg van de onderdelen sections, kolommen en widgets.
Weergave aanpassen voor mobile devices.
Het verhuizen van een Elementor website naar een ander domein.

Templates van de cursus site
Shortcuts van Elementor weten? –  [Windows Toets] / [CMD] + [/] of [?]

Elementor Pro

Wil je alle functies van Elementor kunnen gebruiken?

Koop hier Elementor PRO
Elementor PRO installeren

Starten met Elementor

De eerste stappen van het werken met Elementor. Goede basis video. Duidelijke uitleg over sections, kolommen en widgets. Bekijk deze video zeker!

Anker Widget

Uitleg over de “anker widget” (scrollen/linken op 1 pagina). In de video wordt ook uitgelegd, hoe te linken is naar de “anker ID”.

Google Maps Widget 🙂

Deze zit wel standaard in Elementor en werkt zonder Api in te voegen!

Achtergrond afbeelding plaatsen

Hoe voeg je een afbeelding toe als achtergrond, binnen een sectie.

8. Handige info

Video afspelen

Bedankt en succes!

Leuk dat je de cursus WordPress hebt gevolgd! In de volgende alinea’s vind je alle documentatie die behandeld is tijdens de cursus.

8.1 Handige tools

Hier delen we graag leuke tips & tricks met je en vullen deze af en toe aan!

Deze afbeeldingen zullen jullie naar hun website sturen.

Pexels

Pexels is een plek waar je gratis stock HD stock foto’s kan vinden, allemaal gratis zonder copyright te gebruiken!

Unsplash

Unsplash is ook een plaats waar je stock foto’s kan vinden, deze is behoorlijk bekend en het is ook helemaal gratis!

Flaticon

Flaticon heeft een gigantische bibliotheek vol met icoontjes die gratis kunt gebruiken van; mail, personen, microfoon etc. 

Pixlr E

Pixlr is een online afbeelding bewerker, dat behoorlijk lijkt op photoshop en is helemaal gratis!

Leer hier hoe je foto’s berwerkt

W3schools

W3 schools is de meest bekende gratis online tutorial voor HTML/CSS waar ook live jou code kunt testen! Ook kan je hier Javascript en andere programmeer talen leren.

Subtlepatterns

Subtlepatterns zijn mooie rustige patronen  die je kunt gebruiken als achtergrond voor je website.

Google Fonts

Google Fonts is een plek waar je allemaal verschillende lettertypen kan vinden en gratis gebruiken voor je site, er zijn veel handige manieren om jou ideale lettertype te vinden!

Passpack

Passpack is een online password manager, als het al zegt is dit een plek waar je al je wachtwoorden kan opslaan & aanmaken. Nooit meer hoef je al die verschillende wachtwoorden te onthouden. (Deze gebruiken wij ook!)

Coolors

Weet je niet welke kleuren je in je website wilt hebben? Coolors is een online kleuren palette generator die voor je een setje kleuren voor je genereren.

8.2 Handige Plugins

Gratis Handige Plugins voor je website!

Onze aanrader om met deze plugins te starten, download deze via WordPress > Plugins > Nieuwe plugin.

Pro (betaalde) Plugins!

Geweldige plugins die je website beter en makkelijker maken!

WPBakery tutorial

Een veel gebruikte page builder voordat elementor uitkwam, het wordt nou ook nog redelijk veel gebruikt. Het is nog een goeie plugin doordat het goed werkt, support en updates uitkomen.

Elementor Pro

Wij hebben al eerder over Elementor gepraat, maar dit is Elementor Pro. Hier komen veel meer extra Widgets en Templates bij!

8.2 Overigen Documentaties

Documentaties en videos voor Thema’s

Enfold

Enfold is een van de grootste en meest gebruikte wordpress thema’s. Enfold wordt veel gebruikt door zijn gebruiksvriendelijke page builder, goeie ingebouwde customizer en support.

Hiernaast hebben we een video dat alle elementen van de Enfold Page Builder laat zien.

Documentatie

Astra

Astra is een behoorlijk populaire thema nou dat het geweldig werkt met Elementor. Astra heeft zelfs zijn eigen Elementor add-ons. Beschikbaar op Astra Pro. Zelfs zonder de pro versie kunt u veel met deze thema.

Documentatie 

TwentyTwenty

Het nieuwe standaard thema van WordPress na. Deze thema is geweldig om mee te starten, uit al de oudere varianten heeft deze een mooi en simpele structuur, een simpele customizer en haast alles om mee te starten.