Kop 1

Werken met WordPress

In deze tutorials werken we met de nieuwe editor Gutenberg, welke gebaseerd is op een blokstructuur.

Instructie

Maak een site met WordPress met

1. tenminste 15 blog-items ook wel berichten of posts genoemd;
2. tenminste 3 categorieën gebruiken waar de posts aan toegekend zijn;
3. elk bericht heeft tags
4. ergens is de lees-meer plugin toegepast;
5. de lees-meer-plugin is ook aangepast;
6. er zijn berichten met een afbeelding;
7. in een van de berichten is een span met inline stijl toegepast, of is er op een andere wijze met de HTML-editor gewerkt;
8. er zijn 3 pagina's toegevoegd;
9. Er is een menu toegevoegd, waarbij de categorieën in het submenu zitten;
10. de laatste berichten staan niet op de openingspagina, maar zijn via een menu-item te bereiken;
11. de URL's zijn door permalinks geoptimaliseerd;
12. de toevoeging 'ondersteund door WordPress' is uit de footer verwijderd;
13. widgets aangepast, verwijderd en toegevoegd

Site met WordPress 1: installatie en configuratie (00:13:49)

WordPress is trots op zijn snelle manier van installeren en configureren. Deze instructie laat zien dat het minutenwerk is.

Een WordPress installatie bestaat grofweg uit de volgende stappen:
(zie eventueel ook: https://topdesk.ma-net.nl/tas/public/ssp/content/detail/knowledgeitem?origin=newsSidebar&unid=8ac2a1a80f0f439ab5a5476e14d05c4d&news=true)

1. downloaden van https://nl.wordpress.org/download/
2. de enorme hoeveelheid bestanden uploaden naar jouw gewenste plaats op hosts1.ma-cloud.nl of hosts2.ma-cloud.nl
3. database user en database aanmaken
4. op het automatische scherm de gegevens van de database en de gebruiker goed invullen
5. de hoofdgebruiker van de site met wachtwoord aanmaken

Site met WordPress 2: wp-config (00:03:05)

Om iets te begrijpen wat er op de achtergrond is gebeurd bekijken we het wp-config.php bestand in de editor.
Deze is automatische uit wp-config-sample.php gegenereerd en bevat alle gegevens om de WP-site te laten communiceren met de aangemaakte database.

Site met WordPress 3: bericht aanpassen (00:04:42)

WordPress heeft al een bericht geplaatst. Met Gutenberg wordt zowel de titel als de inhoud aangepast en uitgebreid.
We maken kennis met het paragraaf-blok en het kop-blok. Zie ook: https://www.wplounge.nl/gutenberg-handleiding/ en
Link naar een tweede presentatie

Site met WordPress 4: beschrijving site, categorie,
tag en afbeelding (00:05:14)

Standaard wordt de site voorzien van een beschrijving 'En nog een WordPress site'. Via het Dashboard bereik je de Instellingen waar onder de algemene instellingen deze beschrijving is aan te passen.

Ook het bericht moet nog worden voorzien van een categorie en van tags. Een categorie is een van de rubrieken, waar alle berichten bij ingedeeld kunnen worden. Een tags zijn kernwoorden in het bericht zodat deze uit de vele berichten uit te filteren is.
Een afbeelding is langs meerdere wegen in te voegen. Hier wordt deze in de mediabibliotheek geplaatst voorzien van een alt-beschrijving en vandaar uit in een block in het bericht geplaatst.

Site met WordPress 5: een nieuw bericht (00:05:37)

Er wordt een nieuwe bericht geplaatst. Nu met een opsomming, ofwel een ongeordende lijst.
De afbeelding wordt nu via een URL-link aan het bericht toegevoegd. Natuurlijk worden categorie en tags niet vergeten.

Site met WordPress 6: lees-meer plugin (00:07:47)

De lange berichten komen op een pagina niet goed tot hun recht. Daarvoor kan een lees-meer knop een oplossing zijn. Met een plug-in kan dit met short-code worden toegepast in het document. Je ziet hier hoe een plug-in wordt gedownload en geactiveerd. De short-code kan in de html-weergave worden toegevoegd.

Gratis en betaalde plug-ins worden door allerhande ontwikkelaars gemaakt. Een heel bekende is bijvoorbeeld Woo-Commerce waarmee je van je site een webshop maakt. Slecht geprogrammeerde plug-ins kunnen onderling conflicten veroorzaken een een gevreesd white screen genereren.
Bekijk daarom de informatie van de plug-in en de maker. Automattic zijn de makers van WordPress zelf, dat schept wel vertrouwen.

In de volgende instructie, zie je ook dat er een lees-meer-knop zonder plugin gemaakt kan worden in Gutenberg.

Site met WordPress 6b: lees-meer-knop in Gutenberg (00:06:24)

Als je een lang artikel schrijft dan is het wel wenselijk dat in de weergave van de blog-items (overzichtweergave) de andere items ook in beeld blijven.
Daarom kun je aangeven dat er een verkorte versie wordt getoond. Het lange artikel wordt gekopieerd uit een ander bericht en om de opmaak niet mee te nemen, geplakt in de code-editor van WordPress. Je kunt in de code-editor met een nieuwe regel (zonder br-tag een nieuwe regel invoeren. In de visuele editor zal een druk op de Enter-toets een nieuwe paragraaf geven. Wil je geen nieuwe paragraaf, maar een nieuwe regel, gebruik dan de Entertoets in combinatie met de Shift-toets.

Voor de lees-meer knop wordt het geheel eerst omgezet naar losse blokken. Vervolgens wordt er een nieuw blok toegevoegd en de paragraaf-type omgezet naar het Meer-element.

Site met WordPress 7: eigen CSS met Customizer (00:03:29)

Om een element in een eigen stijl te geven onderzoeken we eerst welke class dit element heeft. Dit kan via de inspector van de browser. Als je de class-naam gevonden is kun je naar de Customizer gaan. Daar is erg veel aan te passen maar in dit filmpje kijken we naar de eigen toe te voegen CSS.
Met wat CSS-kennis is er al resultaat.

Site met WordPress 8: bewerken in HTML-editor (00:02:45)

Ook in Gutenberg, kun je de HTML bewerken.
In dit voorbeeld wordt een span-tag toegevoegd met een inline stijl.

Site met WordPress 9: Publiceer-dit knop (00:07:35)

Om het publiceren nog handiger te maken is er een plug-in 'Press this'.
Als deze actief is (wellicht kan ij daarna ook uitgeschakeld worden) kun je een JavaScriptje kopiëren en deze als bookmark (ook wel favoriet) in je browser toevoegen.
Als je op een website een stukje selecteert, kun je via met een druk op deze bookmark omzetten naar een WordPress-bericht!
Als je niets geselecteerd hebt zal deze bookmark een bericht met een link genereren.

Site met WordPress 10: Pagina's maken (00:04:20)

Nog sneller dan een bericht maak je in WordPress een pagina.
Er zijn nu geen tags of categorieën toe te wijzen. Er worden maar liefst 3 pagina's in dit korte filmpje gemaakt! De pagina's zie je echter nog niet, dat doen we hierna met het gereedschap voor menu in WordPress.

Site met WordPress 11: Een menu maken (00:03:42)

Hoewel het ook via de Customizer mogelijk is, maken we hier het menu nog via het Dashboard. Kijk bij Weergave > Menu's.
Maak eerst een menu aan en geef aan waar deze moet worden geplaatst in het document. Daarna kun je onder andere pagina's en links naar buiten toevoegen.

Als extraatje start dit filmpje met het plaatsen van een afbeelding, die zo breed is als de hele pagina.

Site met WordPress 12: Een sub-menu maken (00:02:35)

De site wordt zo aangepast dat deze niet opent met de laatste berichten, maar met een van de pagina's.
De laatste berichten worden dan geplaatst in de pagina 'Blog'. Je kunt dit instellen via Dashboard > Instellingen > Lezen.
Het zou zelfs mogelijk zijn een site zonder berichten te maken, door de site met berichten niet in het menu op te nemen.

De categorieën lenen zich uitsteken om in een submenu op te nemen. Nadat ze aan het menu zijn toegevoegd, kun je met drag en drop niet alleen de volgorde bepalen maar door inspringing er ook sub-menu-items van maken.

Site met WordPress 13: Permalinks (00:04:19)

Als er naar pagina's, categorieën of berichten wordt genavigeerd, blijkt de URL's er niet semantisch uit te zien. Het is ten sterkste aanbevolen zowel voor zoekmachines als voor gebruikers die jouw pagina bookmaker, dit betekenis te geven.
Dit kan via de instellingen onder Permalinks. Je vind ze onder Dashboard > Instellingen > Permalinks. Kies daar voor de optie Berichtnaam.

Site met WordPress 14: Thema wisselen (00:01:40)

WordPress is ook zo veelzijdig omdat er hele thema's door ontwikkelaars gemaakt worden. Hierbij gelden dezelfde mogelijkheden en valkuilen als bij de plug-ins. Ze kunnen ook net als de plug-ins worden gezocht, geïnstalleerd en geactiveerd. Je hebt ze vast al gezien onder Dashboard > Thema's en onder Dashboard > Weergave > Thema's, maar onder Customizer vind je de geïnstalleerde thema's net zo goed.

Site met WordPress 15: Footer tweaken (00:04:24)

Langs Dashboard > Weergave > Thema editor kun je de php-bestanden, die het thema vormen, bewerken. Dit is een hachelijk klusje, dat aan vakkundige ontwikkelaars moet worden overgelaten. Een foutje maakt je hele WordPress-site stuk. Je kunt er dan misschien ook niet meer in werken! Zorg dus altijd voor een back-up van het thema en weet hoe je deze met FileZilla kunt herstellen!

De bewerking van de footer blijkt in de video niet verwerkt te kunnen worden. Misschien heeft dat met de schrijfrechten op de server te maken.
Om dit probleem te omzeilen wordt het lokale fouter.php bestand bewerkt en ge-upload. Binnen je thema vind je hem in wpTheo/wp-content/themes/twentynineteen/

Site met WordPress 16: Widgets (00:04:20)

WordPress beschikt ook over widgets, dat zijn kleine modules, die je op je WP-pagina kunt plaatsen. Het thema twenty-sixteen biedt zelfs 3 plaatsen voor deze wijdheid. In het Dashboard kun je de Widgets bewerken, verwijderen, verplaatsen. Je kunt deze naar eigen inzicht aanvullen.

Hier staat ook nog een oudere versie van deze opdracht.

Inleveren

• Alles staat nu al online.
• Lever een de URL van jouw WordPress training in op ELO Magister. (als je dat nog niet gedaan hebt na de installatie.)