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 bent 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.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 een aantal algemene instellingen aanpassen. 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

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 het aan de front-end. 

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 vul 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

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

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 (m.u.v. de ‘copyright’ tekst) na te maken.

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

Foto 1 Widgets

6. De Customizer

Customizer selecteren

De WordPress customizer is een 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 de sitetitel, ondertitel, logo en een favicon (url icon) aanpassen, zodat je site een “identiteit” krijgt 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. De ‘header & footer achtergrondkleur’ is voor de header en footer. Met de primaire kleur kan je kleuren aanpassen voor de kopteksten. (H1-H6).

Via Thema opties kan je niet veel veranderen. Je kan een Searchbar in de header toevoegen en op de archiefpagina aangeven hoe berichten moeten worden getoond. 

In de cover template kan je een vaste achtergrondafbeelding aanpassen voor een parallax-effect als je scrollt.

Via de Overlay achtergrondskleur kun je de standaard accentkleur veranderen (kleur voor de linkjes).

Overlay tekstkleur is de kleur voor een overlay pop-up.

Hier kun je een achtergrondafbeelding in elke pagina zetten. Dit kan handig zijn zijn voor een one-page website of een webshop met een thema achtergrond.

Hier kan je je menu’s bekijken en je standaard hoofdmenu instellen.

Tip: Dit kan je beter doen via de backend: Weergave > Menu’s

De widgets sectie kan widgets toevoegen aan je website. Bijvoorbeeld een Search Bar in de Footer of een link naar het archief.

Tip: Het is makkelijker om dit doen via de backend: Weergave > Widgets.

Hier stel je de de homepagina en de blog/nieuws pagina in. Zorg dat je dit juist instelt voor je 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 deze code 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 snelst groeiende Page Builder!

Direct zien wat je doet

Elementor is een visuele page builder.  Dit betekent dat je meteen kan zien wat je aan het doen bent. De plugin is de laatste jaren heel populair geworden en wordt veel gebruikt vanwege gebruiksvriendelijkheid en de goede 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. Hiernaast hebben we een afbeelding gemaakt die laat zien wat het verschil is tussen een section, een inner sectie en een column.

Goed om te onthouden is dat je altijd begint met een sectie, vervolgens met een inner sectie en daarna voeg je pas een widget toe. 

Zelf aan de slag

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

Elementor Basis Widgets

Inner sectie

Met de Inner sectie kan je kolommen in een sectie maken.

Tekstbewerker/Kop

De standaard WordPress editor als widget

Afbeelding

Hiermee kan je een afbeelding in een sectie of kolom zetten, de grote wordt automatisch aangepast.

Video

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

Knop

De knop is een handige widget om een link mee te maken en stylen.

Scheiding/afstandhouder

Met de scheiding / afstandhouder kan je witregels geven aan widgets. Beter is om dit met ‘margin’ en ‘padding’ te doen.

Google Maps

Hieronder vind je een video die dit helemaal uitlegt!

Icoon

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

Standaard pagina instellingen

Standaard kleuren

Deze kleuren hoef je maar één keer in te stellen en alles wat 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 kleuren bijhouden die je bij je website het meest gaat gebruiken. Als je geen kleuren combinatie kunt bedenken, kan je altijd een kleuren palette online laten genereren:

Coolors Color palette generator

Globale instellingen

Daar stel je je standaard lettertype en breedte in. (Het zelfde als de pagina:  ‘Algemene Instellingen.)

Dashboardinstellingen

Stuurt je naar de pagina:  ‘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 🙂

Plaats je map bij je contact pagina.

Achtergrond afbeelding plaatsen

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

8. Handige info

8.1 Handige tools

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

De afbeeldingen zijn directe links naar de websites. 

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 je gratis kunt gebruiken.

Pixlr E

Pixlr is een online afbeeldingbewerker, die behoorlijk lijkt op Photoshop en is gratis te gebruiken. 

Leer hier hoe je foto’s bewerkt.

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 (gratis) lettertypen kan vinden.

Passpack

Passpack is een online password manager. Zoals de naam al doet vermoeden, is dit een plek waar je al je wachtwoorden kan opslaan. Nooit meer hoef je al die verschillende wachtwoorden te onthouden. (Deze gebruiken wij zelf ook!)

Coolors

Weet je niet welke kleuren je in je website wilt gebruiken? Coolors is een online kleuren palette generator die een set bijpassende kleuren voor je genereert. 

8.2 Handige Plugins

Gratis handige plugins voor je website!

Wij raden aan om met deze plugins te starten. Download deze via WordPress > Plugins > Nieuwe plugin.

WPBakery tutorial

Een veel gebruikte page builder voordat Elementor uitkwam.  Deze plugin wordt n ook nog redelijk veel gebruikt. 

Elementor Pro

Wij hebben het al over Elelemntor gehad, maar dit is de betaalde versie:  Elementor Pro.  Via Elementor Pro heb je beschikking of veel meer widgets, templates en coole functies. 

8.2 Overige Documentatie

Documentatie en video’s voor thema’s

Enfold

Enfold is een van de grootste en meest gebruikte WordPress thema’s. Enfold wordt veel gebruikt vanwege zijn gebruiksvriendelijke page builder, goede ingebouwde customizer en uitstekende support.

Documentatie

Astra

Astra is een populair thema omdat het goed werkt met Elementor. Astra heeft zelfs zijn eigen Elementor add-ons, beschikbaar met Astra Pro

Documentatie 

TwentyTwenty

Het nieuwe standaard thema van WordPress. Net als al zijn voorgangers, heeft dit thema een eenvoudige structuur om mee te starten.