WordPress cursus

DOOR AART JAN BERGSHOEFF – UPDATE 2016

Tip: doorzoek deze WordPress cursus met Ctrl-F (Cmd-F op de Mac)
of doorzoek de gehele site met het Zoekveld rechts.

De voordelen van WordPress

In deze WordPress cursus leer je van alles over dit grootste en bekendste gratis CMS (Content Management Systeem). Je kunt met een CMS een site maken en onderhouden zonder enige kennis van HTML en CSS.

Van oorsprong is WordPress bedoeld voor blogs, maar het is inmiddels ook ideaal voor allerlei websites, tot en met winkels aan toe. Eén op de zes websites is tegenwoordig gemaakt  in WordPress. Meestal omdat de klant of het personeel de site dan makkelijk zelf kan onderhouden, zodat je niet steeds een webbureau nodig hebt om je site te onderhouden. Of om zelf gratis en snel een professionele site te maken. Of omdat je toch al eerder met WordPress hebt gewerkt, of dat in de toekomst wil gaan doen. Reden genoeg om een WordPress-cursus te doen!

Je kan inloggen om pagina’s te wijzigen en toe te voegen. Die omgeving heet het Dashboard ofwel de Backend, en ziet er zo uit:

wordpress cursus

Dankzij ontelbare plugins (gratis of betaald) kun je veel functies toevoegen zoals galeries, formulieren, polls, winkelmodules, social sharing, SEO, Google Maps en sliders.

Voor de vormgeving zijn er ontelbare thema’s verkrijgbaar (gratis of betaald) waardoor je makkelijk van design kan wisselen en een geschikt thema kan vinden. Thema’s zijn vaak responsive, dus die doen het ook perfect op mobiel en tablet. Je kunt thema’s volledig aanpassen, zelfs zó dat je met hetzelfde thema totaal verschillende websites kan maken. Als je erg veel aan het design wil veranderen, heb je wel kennis van HTML en CSS nodig, maar eenvoudige aanpassingen kunnen zonder meer.

Er zit een zoek-functie in elke WordPress-site. Dat is in gewone HTML lastig.

Je kan users aanmaken en die specifieke 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 (alles).

Er zit versiebeheer op, dus je kan terug naar vorige versies.

Per bericht kunnen bezoekers reacties plaatsen. In de Instellingen > Lezen kun je dit afstellen. Een forum kan ook, met plugins. Je kan de taal van de back-end wisselen via Instellingen.

Op veel webservers kun je WordPress met een simpele druk-op-de-knop installeren. Leerlingen van deze WordPress cursus kunnen meteen inloggen. Ben je geen  leerling, dan kun je de hosting van je website zelf regelen. Dat kan al vanaf zo’n 10,- per jaar. Google op webhosting en check of WordPress wordt ondersteund. Gratis hosting kan ook (bijvoorbeeld op wordpress.com) maar daar kun je niet alles doen, zoals plugins installeren of templates aanpassen, en er komen dan eventueel ook advertenties op je site.

Visual Editor

Deze extra opties kan je beter altijd aanzetten.

Deze extra opties kan je beter altijd aanzetten.

Er is een WYSIWYG-editor, zodat je tekst eenvoudig kan opmaken – net als in Word. In de knoppenbalk boven elk artikel zitten de bekende knoppen zoals B en I voor vet en cursief. De laatste knop daar (Kitchen sink) geeft nog meer opties, bijvoorbeeld om een Koptekst maken.

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 “Visueel” en “Tekst” rechtsboven kun je een visuele preview zien en bewerken (Visueel), of direct de HTML-code (Tekst). Om die code makkelijker te kunnen lezen is er een plugin HTML Editor Syntax Highlighter

Sinds 4.3 kan je ook dit doen in de Visuele editor:

  • Tik * met een spatie erachter voor een bulleted lijst. Of Ctrl-Alt-U
  • Tik 1) met een spatie erachter voor een genummerde lijst. Of Ctrl-Alt-O
  • Tik ## voor een H2, ### voor een H3, et cetera. Of Ctrl-Alt-2, Ctrl-Alt-3 et cetera.

Afbeeldingen

Je kan plaatjes inplakken door ze in een bericht te slepen. Het kan ook via de knop Media toevoegen bevenaan de editor, of via de knop Media, in de linker menubalk. Bij plaatjes genereert WordPress automatisch de juiste resoluties voor thumbnail / medium / groot, en ook het origineel wordt bewaard, als je dat wil. 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 vullen of wijzigen. Bekijk dit Dashboard. Vul bij  Weergave > Aanpassen > Website titel en ondertitel in. Loop door de Instellingen, en vul daar later ook Lezen > Startpagina in: dat is bijvoorbeeld je laatste blog/Bericht, of juist je Home of Over mij-Pagina. Wijzig hier eventueel de taal van deze back-end.

Berichten en Pagina’s

Bericht gebruik je voor blog-posts, en Pagina gebruik je voor statische pagina’s zoals Over mij, Contact, Portfolio. Berichten zijn dynamisch: ze worden automatisch gesorteerd getoond. Je kunt een bepaald bericht eventueel bovenaan 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.

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

De inhoud van een bestaande webpagina kan je gewoon inplakken, de HTML-structuur en de plaatjes worden dan grotendeels overgenomen. Sample content kun je hier downloaden en via het menu Extra importeren.

Categorieën en Tags

In het Dashboard zie je bij Berichten ook Categorie en Tag staan. Je kunt die daar aanmaken en beheren, en per Bericht toevoegen. 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) zie je een editor om pagina-elementen (widgets) te 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 je maar wil. Is het niet goed, dan sleep je het gewoon weer terug. Je kan ook per pagina of pagina-type eigen sets met widgets maken – of uitzonderingen – via de Widgetzichtbaarheid-plugin in Jetpack.

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 en tegelijkertijd op je site gebruiken. 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.

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: Avada en X, beide betaald maar uitgebreid aanpasbaar.

There’s a plugin for that…

Met plugins kun je oneindig veel functies toevoegen zoals sliders, galleries, 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.

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.

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%}    
}

 


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:

Overige links wordpress cursus

Infographic: stappenplan Hoe maak je een website


Known issues / bugs
Soms zie je bij het bewerken onderaan ook nog eens de HTML-code staan, dubbel,  of juist maar 1 regel. Bewaren werkt dan niet. Het is op te lossen door op Wysiwyg / Tekst te klikken.

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

Een gedachte over “WordPress cursus

Geef een reactie

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