De voordelen van WordPress

WordPress is gratis, groot en bekend. Het is een CMS (Content Management Systeem). Je kunt daarmee een website maken zonder kennis van HTML, CSS of andere code.

WordPress is ideaal voor allerlei websites, blogs en zelfs webshops. Eén op de drie websites is gemaakt in WordPress. Jij en je klant kunnen de site dan makkelijk zelf onderhouden. Je kan er voordelig en snel een professionele site mee maken.

Introductie-filmpje in 3 minuten:

WordPress.com of WordPress.org?

Met WordPress bedoelen we het gratis CMS dat iedereen op zijn eigen server kan installeren, zie wordpress.org. Bij de meeste webhosters (waar jouw website staat) zit een knop om deze WordPress gratis te installeren.

Er is ook wordpress.com: dat is een gratis kant-en-klare WordPress, maar wel met veel beperkingen, en met advertenties. Als je veel met WordPress gaat doen heb je al gauw de echte nodig, je eigen WordPress dus, en dat is die van wordpress.org.

Met een CMS als WordPress kan je overal, en op alle devices inloggen om pagina’s te wijzigen of toe te voegen, zelfs vanaf je telefoon. Als je inlogt kom je in het Dashboard, dat ziet er zo uit:

Je ziet hier al dat de editor voor je artikel er eenvoudig uitziet, als een gewone tekstverwerker. Je ziet ook al hoe je de tekst kan formatteren, met kopteksten, bold / italic enzovoorts. Als je op de knop Opslaan (de knop rechts) drukt, kun je de pagina daarna bekijken in jouw Thema (vormgeving / template), met de knop bovenaan.

Voor de vormgeving zijn er ontelbare thema’s verkrijgbaar (gratis of betaald). Je kan zo makkelijk een geschikt thema vinden, of later wisselen van design. Thema’s zijn al responsive, dus met een aangepast ontwerp voor telefoon en tablet. Je kunt thema’s ook zelf aanpassen, zelfs zó dat je met hetzelfde thema totaal verschillende websites kan maken. Als je veel aan het design wil veranderen, heb je ook kennis van HTML en CSS nodig, maar eenvoudige aanpassingen kunnen meteen in het thema.

Dankzij ontelbare plugins (gratis of betaald) kun je nog veel meer functies toevoegen, zoals webshop-modules, galeries, formulieren, polls, SEO-hulp, Google Maps en sliders.

Er zit ook een handige zoek-functie in WordPress.

Je kan users aanmaken en die rollen geven, zoals Contributor (alleen artikelen invoeren), Author (artikelen invoeren en publiceren), Editor (artikelen van anderen wijzigen/publiceren),  Admin (vormgeving veranderen, users aanmaken etc) en Super Admin (die kan alles).

Er zit versiebeheer op, dus je kan terug naar vorige versies. Je ziet precies wie wanneer wat heeft gedaan als je met meerdere personen aan de website werkt.

Per bericht kunnen bezoekers reacties plaatsen. In de Instellingen > Lezen kun je dit afstellen. Bijvoorbeeld dat reacties eerst goedgekeurd moeten worden voordat ze op de site komen.

Je kan de taal van je dashboard wisselen.

Op veel webservers (hosting) kun je WordPress met een druk-op-de-knop installeren, via het Control Panel. Een webserver heb je al vanaf zo’n 20,- per jaar. Gratis webhosting kan ook (bijvoorbeeld op wordpress.com) maar daar kun je niet alles doen: je kan geen plugins installeren of templates aanpassen, en er komen eventueel ook advertenties op je site.

Visual Editor

Er is een WYSIWYG-editor, zodat je tekst eenvoudig kan opmaken – net als in Word. In de balk boven elk artikel zitten de bekende knoppen zoals B en I voor vet en cursief, en een dropdown voor verschillende Koppen / Alinea. De opsommigsknop is net zoals andere teksteditors. De knop Ketting is om een link te maken (⌘-K). Met de Quote-knop kun je een Quote maken. Verder staan er knoppen voor een horizontale lijn  en voor inspringers. Plaatjes toevoegen kan via de knop “Media toevoegen“.

Meestal heb je niks meer nodig dan dit! Met een Enter of Return krijg je een nieuwe paragraaf, met een extra witregel. Met Shift-Enter krijg je GEEN witregel extra.

Zie hier meer tips over deze Visual Editor.

Via de knoppen rechtsboven kun je de preview bewerken (Visueel), of de HTML-code bewerken (Tekst) voor meer mogelijkheden.

Gutenberg editor of Page builder plugins

Van deze Visual Editor is er nu ook drastisch nieuwe versie: de Gutenberg Editor. Maar veel mensen zetten deze voorlopig nog uit. De oude editor heet Classic ofwel Klassieke editor. Er zijn ook Page Builder plugins, zoals Elementor of die van Site Origin. Werkt totaal anders dan de Classic Editor of de Gutenberg editor. Het loont de moeite om er een paar te proberen en te bestuderen, want steeds meer thema’s gebruiken zulke page builders. Maar het heeft ook nadelen: zie deze blog. Of in het kort:

1. De content is niet herbruikbaar (op andere pagina’s).
2. Het design is niet meer consistent.
3. De site is minder goed te onderhouden.
4. De content is moeilijk te onderhouden want staat niet in de database.
5. De performance gaat drastisch omlaag: de site is traag
6. Je mist altijd features (page builders kunnen niet al je problemen oplossen).
7. Page builders zijn vaak nodeloos ingewikkeld en je hebt al gauw developers en professionals nodig.

Afbeeldingen

Je kan plaatjes invoegen door ze in een bericht te slepen, of door op de knop Media toevoegen te klikken, of via de knop Media in het Dashboard. WordPress maakt automatisch de juiste resoluties voor thumbnail / medium / groot. Ook het origineel wordt bewaard, alhoewel je die ook automatisch kan laten verwijderen met de plugin Delete Original Images. Hier meer info over plaatjes en galeries.

Dashboard en Instellingen

Tik /login (of /wp-admin, of /admin) achter de url van je site. Dan kom je in de back-end waar je de site kan aanpassen. Bekijk dit Dashboard. Vul bij  Weergave > Aanpassen > Website titel en ondertitel in. Loop door de Instellingen, en vul daar later (als je Pagina’s en / of Berichten hebt gemaakt) ook Lezen > Startpagina in: dat is bijvoorbeeld je laatste Bericht, of een bepaalde pagina die je als Home wil gebruiken.

Berichten en Pagina’s

Bericht gebruik je voor blogs, en Pagina gebruik je voor statische pagina’s zoals Over mij, Contact, Portfolio. Berichten zijn dynamisch: ze worden automatisch gesorteerd getoond, bijvoorbeeld op datum. Je kunt oudere berichten ook op de homepage zetten via Publiceren > Zichtbaarheid > Sticky. Voor Berichten zijn er verschillende types zoals Afbeelding, Quote of Link. Elk type heeft dan zijn eigen vormgeving, afhankelijk van het gekozen Thema.

Pagina’s gebruik je voor statische pagina’s, zoals je in een gewone website zou doen. Denk aan Over mij, Contact, Portfolio, Home – dat soort dingen. Meestal zet je die dan ook allemaal in het menu, zodat je er direct naartoe kan klikken.

Je kan een complete bestaande website exporteren en importeren via Extra  > import. Dit kan ook vanuit andere CMS-platforms.

De inhoud van een bestaande webpagina kan je gewoon inplakken, de HTML-structuur en de plaatjes worden dan grotendeels overgenomen.

Categorieën en Tags

In het Dashboard zie je bij Berichten ook Categorie en Tag staan. Je kunt die daar aanmaken en beheren, zodat je ze per Bericht kan aanvinken. Tip: het is handig om meteen vanaf het begin categorieën en/of tags gebruiken. Je kunt daar later bijvoorbeeld menu-items van maken, via Weergave > Menu’s. Tags kun je later ook converteren naar categorie.

Widgets

Bij Widgets (Weergave > Widgets) kun je pagina-elementen (widgets) plaatsen in verschillende delen van pagina’s. Stel: je wil een Zoek-veld op de homepage en in alle sidebars. Sleep de Zoek-widget naar de Sidebar for Homepage en/of naar Common Sidebar, of naar welke pagina of sidebar dan ook. Is het niet goed, dan sleep je het weer terug. Of je wil een Widget met de recente blogs, maar dan alleen op alle blog-berichten. Of een widget waarin bezoekers zich kunnen aanmelden om je blog te volgen. Of een widget met een plaatje / audio / video naar keus in de zijbalk. Kan allemaal!

Weergave > Menu

Hier kun je menu’s aanmaken, en menu-items ordenen door ze te verslepen. Submenu’s kun je maken door ze OP een ander item te slepen, het item verschuift dan iets naar rechts. Je kan meerdere menu’s maken. Meestal staat hier ook een thema-specifieke knop om het menu als hoofdmenu in dat thema te activeren. Sinds 4.3 zit het beheren van menu’s ook in Weergave > Customizer.

Via de tab Locaties beheren kun je de menu’s plaatsen op specifieke pagina’s, of op delen van pagina’s, zoals in de sidebar of de footer. Hier een uitgebreide handleiding.

Bij het nieuwe thema’s  zijn de menu’s weer totaal anders:

In het kort: elke pagina heeft nu een “Volgorde”: met een getal zeg je de hoeveelste knop in het menu dit is. Om een Submenu te maken: geef aan wat de Hoofdpagina is. IN 6.2 is het weer anders:

 

Weergave > Thema

Hier kun je thema’s kiezen en aanpassen. Wat je hier allemaal kunt doen is afhankelijk van het gekozen thema. In deze WordPress cursus staan voor leerlingen een aantal moderne responsive templates ter beschikking. Veel thema’s maken gebruik van specifieke plugins. Die moet je dan ook installeren en activeren. Lees de info van het thema, of Google naar hulp, want er zitten vaak heel specifieke dingen in. Heb je je eigen hosting, dan kun je elk template installeren. Gratis templates kun je direct vanuit WordPress vinden, de betere betaalde templates kun je bijvoorbeeld vinden op themeforest. Twee tips zijn Avada en X, beide betaald, maar uitgebreid aanpasbaar, zodat je daar veel verschillende soorten sites mee kan maken.

There’s a plugin for that…

Met plugins kun je oneindig veel functies toevoegen zoals sliders, galeries, formulieren, polls, winkelmodules, social sharing en SEO. Zie meer info op deze pagina.

---

Geavanceerde dingen voor gevorderden

Hieronder een aantal meer geavanceerde dingen, tips en oefeningen. Kennis van HTML en CSS vereist!

Oefening: pas de vormgeving aan via Weergave > Thema, onder andere de header, zet er een foto in, en/of je logo, en bekijk en probeer alle andere opties. Al deze aanpassingen blijven OOK behouden na een update van het thema. Het kan ook (en veel uitgebreider) via Weergave > Aanpassen > Custom CSS. Soms kan dit via de thema-opties, maar het kan ook via de plugin Simple Custom CSS. Je hebt wel wat kennis van CSS nodig:

Tip 1: bekijk de site in een browser. Rechstklik op een element en kies Inspecteer element (in Safari: Voorkeuren > Geavanceerd > Toon Ontwikkel-menu). Klik op de tab Stijlen en je kunt de css van dat element direct zien, én editen. Dat is dan nog offline, maar als het goed werkt, kun je diezelfde css toevoegen aan de Custom css.

Tip 2: Zo kan je bijvoorbeeld afbreken uitzetten (dat staat standaard aan). Voeg dan deze CSS toe:

p, li {
    word-wrap: normal;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    hyphens: none;
}

Thema bewerken in HTML/CSS

Als je een eigen WordPress-site hebt (dus niet deze multisite of de gratis hosting bij WordPress zelf) en je bent admin dan heb je nog meer mogelijkheden om het thema te bewerken. Ga naar Weergave > Bewerker. In de rechterbalk zie je dan alle template-files, in PHP en CSS. In de PHP-files staat alle HTML, dus met kennis van HTML en CSS kun je de hele site inclusief het design hier volledig naar wens aanpassen. In principe kan je elk ontwerp maken. Zie deze handleiding om templates te maken. Of kijk dit Youtube filmpje van 40 minuten, waarin gedemonstreerd wordt hoe je met HTML5 BLANK template je bestaande HTML-site in WordPress kan zetten.

Je kunt HTML/PHP code knippen en plakken in je favoriete editor (tip: CodeAnywhere), bewerken en weer terugplakken, of je kunt via FTP deze bestanden openen en bewerken. Deze aanpassingen blijven NIET behouden na een update van het thema, tenzij je een child-theme maakt en gebruikt. Dat kan ook met een plugin zoals Child Theme Configurator.

HTML / CSS

In Berichten en Pagina’s kun je ook direct HTML-code en inline CSS gebruiken, via de knoppen rechtsboven: Visueel / Tekst. Alleen de elementen <p> en <br /> worden weggefilterd, dus die zie je in de code niet terug. In het artikel: 10-html-tags-you-must-know-to-blog meer uitleg.

CSS oefening: activeer een plugin voor Custom CSS en maak een stijl (class) voor KLEINKAPITALEN (SMALLCAPS, SC). Kleinkapitaal bestaat niet in HTML, maar op deze manier kan je dit typografische detail toch gebruiken:

.sc {font-size:85%; text-transform:uppercase;letter-spacing:1px}

En in de HTML van een bericht roep je dat aan met span class=sc:

Hier komt <span class=sc> een tekst in kleinkapitaal </span>

Je kan ook inline css gebruiken, bijvoorbeeld zo:

<blockquote style=margin:0 >

Of maak in de Custom CSS een stijl voor <abbr> om gestileerde Tooltips te kunnen maken:

abbr {position: relative;}
abbr:hover::after {
 position: absolute;
 top: 100%;left: 100%; width: 100px; display: block;
 padding: 10px; border-radius:10px; background:#FF9;
 content: attr(title);
}

In de HTML zet je dat dan zo neer:

<abbr title="De styling van deze tooltip staat in Custom CSS">Tooltips te kunnen maken</abbr>

Meer info over tooltips op http://www.menucool.com/tooltip/css-tooltip

Kolommen in HTML / CSS

Kolommen kan je met een plugin maken, maar het kan ook direct met HTML en CSS.
3 kolommen zet je dan zo in de HTML:

<div class="kolom"> Inhoud van Kolom 1 
</div>
<div class="kolom"> Inhoud van Kolom 2 
</div>
<div class="kolom"> Inhoud van Kolom 3 
</div>

En zo in de CSS:

.kolom {float:left; width:33%}

Dit kun je  responsive maken, zodat op kleine schermen de kolommen onder elkaar komen:

@media only screen and (max-width: 680px) 
   {
.kolom {float:none; width:100%}    
}

Twee plaatjes naast elkaar gezamenlijk centreren

Twee plaatjes in een gallery waarbij de .gallery op margin: auto staat (eventueel toevoegen aan de custom CSS)

---

WordPress cursus links

www.wordpress.org
easywpguide.com – WordPress cursus Introductie
simplybusiness.co.uk – WordPress cursus voor bedrijven
Udemy.com – complete WordPress cursus (goed en goedkoop, Engelstalig)

WordPress Themes, gratis en betaald:

• wordpress.org/themes 
• elegantthemes.com 
• themeforest.net
• templatemonster.com

---

Wacht altijd na het bewaren of updaten totdat de pagina weer geheel ververst is (zie de url-balk) voordat je iets anders doet.