De nieuwe website van Stichting De Inrichting draait op WordPress (WP). WP is een blogging-platform – een basissysteem wat je zelf een uiterlijk kunt geven en dat dient om korte berichten in antichronologische volgorde weer te geven. Zo is jullie nieuwe website ook tot stand gekomen: Een standaardinstallatie van WP, een bestaand ’thema’ (uiterlijk), dan handmatige aanpassingen in de code van dit thema.

In de basis hoeven jullie dan ook weinig onderhoud te doen en niet bang te zijn dat je iets sloopt. Er wordt tweemaals daags een backup gemaakt van de website, die altijd teruggeplaatst kan worden. De belangrijke beveiligingsupdates gebeuren automatisch. Er is een ‘maar’: Omdat WP een veelgebruikt platform is en ook door overheden gebruikt wordt, is het een aantrekkelijk doelwit voor staatshackers. Daarom vier algemene adviezen:

• Gebruik lange wachtwoorden voor jullie gebruikersaccounts:
  • Ofwel iets willekeurigs, zoals 312jklgdx-09342d.
  • Of een volzin zonder spaties met een getal of twee, die niet direct aan je persoon of De Inrichting te relateren is.
• Voeg gerust gebruikers toe, maar dan bij voorkeur als ‘Redacteur‘ (kan berichten plaatsen, wijzigen en verwijderen). Wijs de ‘Beheerder‘-rol toe aan een enkele persoon, log bij voorkeur niet standaard in met een beheerdersaccount. Dit voorkomt vervelende foutjes.
• Verwerk persoonlijke informatie van klanten of relaties niet via de website:
  • Plaats – ook op een ‘verborgen’ pagina als deze – geen link naar Google Sheets met de telefoonnummers van heel Ankeveen.
  • Ticketverkoop of reserveringen: een reserveringsformulier dat als mail bij jullie binnenkomt is prima. Als je het meer wil automatiseren moet je de betaaloplossing en kopersgegevens goed scheiden van de WP-database.
• Plaats geen verwijzingen naar landen die veel geld steken in cyberoorlogsvoering. (Don’t poke the bear.)

Als je deze adviezen in acht neemt, is het restrisico dat een puberale onverlaat een vies plaatje achterlaat. En dáárom heb ik de mogelijkheid om reacties onder nieuwsberichten te plaatsen alvast uitgeschakeld. Dergelijke functionaliteit vereist dat iemand tijd in moderatie steekt, dus is het raadzaam om dat aan lokale Facebookgroepen en ditiswijk.nl over te laten.

---

Hoe gebruik je de site?

De volgende secties geven algemene instructies voor regulier gebruik aan de website. Voor moeilijke vragen weet AvZ mij wel te vinden. De volgende onderwerpen zullen besproken worden:

• Inloggen in de beheerdersomgeving.
• Nieuwsberichten plaatsen en teksten aanpassen.
  • De Gutenberg-tekstverwerker.
  • Een nieuw bericht plaatsen.
  • Een nieuwe pagina maken.
• Administratieve taken.
  • Media beheren.
  • Tags beheren.
  • Bestaande berichten en pagina’s beheren.
  • Het menu aanpassen.
  • Aanmaken, verwijderen en beheren van gebruikersaccounts.
• Uitleg over shortcodes.
  • De ‘Laatste Nieuws’ shortcode.
  • WPforms en het contactformulier.
  • Het contactformulier aanpassen.

Wil je er snel doorheen? Kijk dan even naar de secties over tekstverwerking en het plaatsen van een nieuwsbericht.

---

Inloggen in de beheerdersomgeving

De beheerdersomgeving wordt ook wel het dashboard genoemd en is te vinden op:

https://www.de-inrichting.nl/wp-admin/
https://de-inrichting.nl/wp-admin/

Om op het dashboard in te loggen heb je een gebruikersnaam en wachtwoord nodig. Deze moeten door een beheerder aangemaakt worden voordat je in kunt loggen. Eenmaal ingelogd ziet het dashboard er als volgt uit:

Vanuit het dashboard kun je schakelen naar de website door op Stichting De Inrichting (groen) te klikken. De bovenbalk blijft staan, dus je kunt ook weer snel terug naar het dashboard. In het Profiel (blauw) kun je instellingen zoals je emailadres, wachtwoord, naam en biografie aanpassen. Indien je een idee hebt dat je later misschien wel als nieuwsbericht wilt plaatsen kun je een concept (paars) maken. Het beheer van berichten, pagina’s en afbeeldingen (rood) wordt in de volgende secties gesproken.

---

Nieuwsberichten plaatsten en pagina’s aanpassen

WP-sites kennen twee soorten pagina’s: Pagina’s met statisch en met dynamische inhoud. Dynamische pagina’s tonen berichten.

• Statisch: De thuispagina, ‘Leden’ en ‘Contact’-pagina kennen deze vorm. Een pagina met een reserveringsformulier is ook een vorm van statische inhoud. Je schrijft niet alleen de inhoud, je moet ook bedenken waar je de pagina op de site wilt tonen, hem aan een menu toevoegen, links op andere pagina’s zetten… De doorzoekbaarheid is matig en als je de inhoud op datum wilt sorteren moet je dit zelf in de tekstverwerker doen.
• Dynamisch: De ‘Nieuws’ en ‘Projecten’-pagina – evenals een inzetje op de thuispagina – zijn voorbeelden van dynamische inhoud. Een onderliggend systeem zorgt ervoor dat berichten in de gewenste volgorde en op de juiste plaats verschijnen. Bovendien zijn berichten automatisch doorzoekbaar op onder andere plaastingsdatum en inhoud.

Op sommige pagina’s die je bewerkt zul je een shortcode tegen komen. Dat ziet er ongeveer zo uit:

---

Over (nieuws)berichten

In praktijk zul je slechts incidenteel een statische pagina willen wijzigen. Als je snel een nieuwtje of een leuk stuk beeld online wilt plaatsen, is het schrijven van een bericht een stuk makkelijker, want je hoeft alleen maar het bericht te schrijven. Bij het plaatsen van het bericht is het belangrijk om de categorie goed in te stellen en slim tags te kiezen.

• Categorie: Wordt gebruikt om te bepalen op welke pagina’s het bericht getoond moet worden. Als je geen categorie instelt komt het bericht automatisch in de categorie ‘Ongesorteerd‘ terecht. Het bericht wordt dan enkel in de ‘recente berichten’ lijst (zijbalk van berichtenpagina) getoond. Ik heb de volgende categorieën aangemaakt:
  • Nieuws: De recentste 3 nieuwsberichten worden op de thuispagina getoond. Alle nieuwsberichten zijn op de pagina ‘Nieuws’ te doorzoeken.
  • Projecten: Deze berichten worden op de ‘Projecten’-pagina getoond. Zo kun je een etalage creëren waarin je het vroegere werk van de stichting kunt tonen, door projecten een voor een toe te voegen.
• Tags: Beschrijven de inhoud van een nieuwsbericht in steekwoorden. Ze verhogen de vindbaarheid van berichten op de website en in zoekmachines zoals Google. Deze tags komen ook in de zijbalk op berichtenpagina’s te staan. Adviezen voor het gebruik van tags:
  • Voorkom wildgroei. Gebruik tags zo consistent mogelijk. (Bijv. ‘Tickets’, in plaats van ‘verkoop’, ’ticketverkoop’, ‘kaartjes’, ‘kaartje’ en ’toegangsbewijs’.)
  • Gebruik 2 tot 5 tags voor een nieuwsbericht, bijvoorbeeld ’tickets’, ‘eenakter’, ‘melk’ voor informatie over de kaartverkoop van de eenakter ‘Ik heb enkel melk te geven‘.
  • Schrijf je een langer nieuwsbericht over meerdere onderwerpen, waar dus meer tags bij horen? Splits het bericht dan om de vindbaarheid, leesbaarheid en deelbaarheid op de mobiele telefoon te verbeteren.
  • Schoon af en toe een beetje op, zie ‘Tags beheren‘.

---

Teksten schrijven in de Gutenberg-tekstverwerker.

Gutenberg is een block-based WYSIWYG (What-You-See-Is-What-You-Get) editor. Dat betekent dat je een bericht schrijft door blokken met titels, tekst en afbeeldingen onder elkaar te plakken, en dat het er ongeveer net zo uit ziet als je eindresultaat.

Links zie je twee gereedschapsmenu’s voor dit blok. Met het paars omlijnde balkje verplaats je het blok omlaag en omhoog. De blauwe balk biedt een aantal opties zoals uitlijning. In het rechtermenu worden extra opties voor het blok getoond, zoals de mogelijkheid om een andere achtergrondkleur te kiezen. Het is goed om deze opties te bestuderen, de eerste keer dat je het blok gebruikt. Zo heeft dit blok een optie (groen) die de weergave op de mobiele telefoon verbetert. Handig, maar niet als je in je tekst naar ‘het plaatje, links’ verwijst.

Om het belang van het bestuderen van de opties te bekrachtigen, zie het groene kader. Je kunt anders lang zoeken, als je een beetje inspringing wilt.

Nog een voorbeeldje van hetzelfde blok. Je ziet nu dat het blok als een ‘groep’ opereert, en een ‘afbeeldingsblok’ met een ’tekstblok’ combineert. Als je het tekstblok selecteert zie je de opties die daar bij horen in de zijbalk (rood). Dit werkt vaker zo: een aantal blokken kunnen andere blokken bevatten en als geheel verplaatst of verwijderd worden. Zie de ‘Groep’ en ‘Kolommen’, hieronder.

Soms wil het wel eens gebeuren dat elementen vervelend dicht op elkaar geplaatst worden – een tekstregel onder een afbeelding die nét te dicht tegen het beeld aanschurkt. Meestal is er wel een blok waarmee je dit soort dingen op kunt lossen, zoals het ‘Vulelement’.

---

Een nieuw bericht plaatsen.

Het plaatsen van een nieuw bericht begint vanuit de linker menukolom in het dashboard. Hier klik je op ‘Berichten‘ en dan op ‘Nieuw bericht‘. Je komt dan in een lege Gutenberg-tekstverwerker terecht. Het schrijven van het bericht is hierboven afdoende behandeld, maar me moeten het nog even hebben over het plaatsen van het bericht.

Je kunt een nieuw bericht beschrijven middels een samenvatting. Als je hiervoor kiest dan verschijnt in de berichtenlijst (bijvoorbeeld de ‘nieuws’-pagina van de site) enkel de samenvatting. Het WordPress-thema maakt niet goed duidelijk dat je op dat korte bericht kunt klikken om een langer verhaal te zien, dus is dat niet zo’n toffe oplossing. Je kunt in plaats daarvan ook gebruik maken van een blok: ‘Meer’ of ‘Read More’ onder ‘Layout-elementen’. Als je een bericht begint met een inleidende alinea, dan kun je dit blok tussen deze inleiding en de rest van het bericht plaatsen.

---

Een nieuwe pagina maken.

Het plaatsen van een nieuwe pagina begint vanuit de linker menukolom in het dashboard. Hier klik je op ‘Pagina’s‘ en dan op ‘Nieuwe pagina‘. Je komt dan in een lege Gutenberg-tekstverwerker terecht.

---

Administratieve taken

De website is relatief onderhoudsvrij. Complexere taken zoals het terugzetten van backups gebeuren buiten WP om. AvZ en TvZ hebben hier toegang toe. De hoofdmoot van het beheer van de website betreft het incidenteel opschonen van de media-bibliotheek of tag-lijst. Er zijn twee marginaal complexere taken: Nieuwe pagina’s toevoegen aan en verwijderen uit het menu en het beheren van de gebruikersaccounts van leden van De Inrichting.

---

Media beheren

Afbeeldingen die je upload bij berichten en pagina’s worden samen in de Mediabibliotheek geplaatst. Hier kun je een overzicht zien van alle afbeeldingen die door gebruikers geüpload zijn.

Waarschuwing vooraf: Er is geen manier om te zien in welke pagina’s en berichten een afbeelding gebruikt wordt. Te voortvarend opruimen is dan ook af te raden – er is een reëel risico dat je een afbeelding verwijderd die nog ergens gebruikt wordt. Dat zou lullig zijn. De kolom ‘Uploadlocatie‘ toont enkel de pagina of het bericht van waaruit de afbeelding aan de mediabibliotheek toegevoegd is. Niets weerhoud redacteurs en auteurs ervan om een afbeelding elders opnieuw te gebruiken.

---

Tags beheren

Als meerdere gebruikers berichten schrijven en publiceren voor de website is er bijna niet aan te ontkomen dat de tags wat rommelig worden. Dit kun je eventueel voorkomen door een aantal relevante tags alvast handmatig toe te voegen, zodat deze bij het schrijven van een bericht als suggestie getoond wordt. Indien het noodzakelijk is kun je ook bestaande tags hernoemen.

Het beheer van categorieën werkt ongeveer gelijk aan het beheer van tags. Omschrijvingen van tags en categorieën zijn niet noodzakelijk, maar worden getoond waar er op tag of categorie gefilterd wordt. (De categorieën ‘Nieuws‘ en ‘Projecten‘ hebben opzettelijk geen beschrijving, want die worden anders op je nieuwspagina getoond.)

---

Bestaande berichten en pagina’s beheren.

Door in de linker menukolom van het dashboard op ‘Berichten‘ -> ‘Alle berichten‘ of ‘Pagina’s‘ -> ‘Alle pagina’s‘ te klikken krijg je een overzicht van de berichten en pagina’s die eerder aan de site toegevoegd zijn. Dit overzicht zal je meestal gebruiken om een bestaand bericht of bestaande pagina terug te zoeken zodat je een tekstuele aanpassing kunt doen. Ook het verwijderen van berichten en pagina’s gebeurt vanuit deze lijst.

Deze functionaliteit zul je vooral nodig heb om incidenteel te controleren of berichten wel in de juiste categorie en met de juiste tags geplaatst zijn. Indien iets aangepast moet worden kun je op de titel van een bericht of pagina klikken om deze te openen. De aanpassing werkt dan niet anders dan het plaatsen van een nieuw bericht of nieuwe pagina.

Indien je acties op meerdere berichten wilt uitvoeren maak je eerst een selectie van berichten. Daarna kies je een actie en voer je deze uit door op toepassen te klikken. Je kunt eventueel een selectie van berichten maken middels de filteropties. Je kunt meerdere berichten tegelijk bewerken. Zo kun je filteren op berichten met de tag ‘kaartverkoop‘, deze tegelijk bewerken en ze allemaal de tag ‘tickets‘ geven, zodat je daarna in het tagbeheer de tag ‘kaartverkoop‘ kunt verwijderen.

---

Het menu aanpassen.

Je hebt net een nieuwe pagina aangemaakt, en die moet in het menu terechtkomen. Ofwel in het hoofdmenu, of als subpagina onder een pagina als ‘Contact‘. Dit soort wijzigingen hebben impact op het uiterlijk en functioneren van de website. Daarom kan alleen een beheerder deze wijzigingen doorvoeren.

Links in het dashboard-menu vind je ‘Appearance‘ -> ‘Menus‘. Als je daarop klikt opent het menubeheer zich.

• Toevoegen doe je door de nieuwe pagina op te zoeken en te selecteren. Druk op de knop om hem toe te voegen.
• Aanpassen doe je door de pagina te verslepen. Houd de pagina iets meer naar rechts om hem als sub-pagina toe te voegen.
• Om een pagina te verwijderen druk je op het driehoekje. Dan worden er een aantal opties getoond, waaronder ‘remove item’.

Vergeet niet om je wijzigingen op te slaan met de save-knop.

---

Aanmaken, verwijderen en beheren van gebruikersaccounts.

Net als andere organisaties zal er binnen Stichting De Inrichting af en toe een kleine stoelendans plaatsvinden. Dan is het noodzakelijk dat er een nieuwe account aangemaakt wordt en dat een oude account op non-actief gesteld wordt. Voor het aanpassen van accounts moet je als beheerder ingelogd zijn. Iedere account heeft een set rechten:

• Beheerder– Kan gebruikers aanmaken, menu’s aanpassen en het uiterlijk van de website veranderen. Kan eigenlijk overal bij.
• Redacteur– Kan alle berichten en pagina’s aanpassen en verwijderen. Kan zowel berichten plaatsen als pagina’s maken.
• Auteur– Kan alleen eigen berichten aanpassen en verwijderen, kan dus enkel berichten plaatsen.
• Schrijver– Kan een bericht schrijven, maar dit bericht moet door een Editor worden geaccordeerd.
• Abonnee– Kan alleen het eigen profiel wijzigen.

Ik zou adviseren om alle leden van de inrichting die berichten gaan plaatsen van een account met ‘Redacteur‘-rol te voorzien. Accounts met ‘Beheerder‘-rol wil je eigenlijk alleen gebruiken als het noodzakelijk is om een account of menu te wijzigen. Mijn advies is tevens dat accounts van oud-leden op non-actief gesteld worden door hun rol naar ‘Abonnee‘ te veranderen. Het is niet wenselijk de accounts te verwijderen, omdat berichten die door deze persoon geplaatst zijn dan ook verwijderd moeten worden, of aan een andere auteur gekoppeld moeten worden.

Een nieuwe gebruiker kun je toevoegen door op ‘Add new’ te drukken. Dan kom je in het onderstaande formuliertje terecht. Verder bevat het accountbeheer-menu de mogelijkheid om één of meerder gebruikersaccounts tegelijk aan te passen. Eenmaal geselecteerd kun je deze accounts verwijderen, of de set met rechten aanpassen door de gebruiker een andere rol toe te wijzen.

Waarom is het niet wenselijk om accounts van oud-leden te verwijderen?
Bij verwijdering moet je hun berichten ook verwijderen, of een andere auteur aan de berichten koppelen. Beide vind ik niet kies, ik zie geen reden om bij verwijdering hun naam van de site te poetsen.

Voor het aanmaken van een nieuwe gebruiker heb je eigenlijk alleen een gebruikersnaam en emailadres nodig. Het is raadzaam de volledige naam van de persoon alvast in te vullen, zodat deze bij berichten die de gebruiker schrijft komen te staan. Ik raad aan om hen de rol ‘Redacteur‘ te geven.

De gebruiker ontvang vervolgens een keurige email met een link. Als de gebruiker op deze link klikt, moet er een nieuw wachtwoord ingesteld worden. Na het instellen van dit wachtwoord is de account te gebruiken.

---

Uitleg over shortcodes.

Op sommige pagina’s die je bewerkt zul je een shortcode tegen komen. Dat ziet er ongeveer zo uit:

Een shortcode is een stukje programmacode dat in de achtergrond door de website geladen wordt, als jij daar om vraagt middels het juiste commando. Eigenlijk is het een laagdrempelige manier voor ontwikkelaars om foefjes aan de website toe te voegen die de gebruiker dan naar wens in kan zetten. Jullie bevat ondersteuning voor ten minste twee shortcodes: ‘Laatste Nieuws’ en het contactformulier.

---

De ‘Laatste Nieuws’ shortcode.

Deze shortcode heb ik zelf ontwikkeld. Onder de motorkap start het ding een query – een zoekopdracht. De code doorzoekt alle berichten die jullie geplaatst hebben en selecteert alle berichten die tot een categorie behoren. Deze berichten sorteert de code op plaatsingsdatum, in aflopende volgorde. De shortcode toont 1 tot 10 berichten, maar de standaard is 3.

[laatste aantal=3, categorie='nieuws']

Je kunt de shortcode invoegen middels het type laatste en je mag daarbij de twee variabelen number en category meegeven. Let op: category moet een valide ‘slug’ (zo heet de korte url-vriendelijke benaming) van een bestaande categorie (niet tag!) zijn.

---

WPforms en het contactformulier.

Het contactformulier heb ik niet zelf ontwikkeld. In plaats daarvan heb ik een plugin geïnstalleerd genaamd WPforms-lite. De betaalversie varieert van EU40 tot EU600 per jaar en of het dat geld waard is hangt af van je gebruik. Drie voorbeeldjes van wat betaalversies kunnen:

1. EU40-80: Apart geformuleerde bevestigingen sturen naar de invuller van het contactformulier en ontvanger van dat bericht. Of, een selectieveld waarmee de invuller kan kiezen welk lid van de inrichting het bericht moet krijgen.
2. EU80-160: Integratie met MailChimp maillijst-beheer voor als je nieuwsmails wilt sturen met een mooie sign-up page en een unsubscribe link.
3. EU200-400: Integratie met een paar betaalplatforms en gebruikersregistratie. (Bouw-je-eigen-facturatiesysteem.)

Ik heb een gratis versie geïnstalleerd – met extreem beperkte functionaliteit. In feite hebben jullie nu een beperkt aanpasbaar formulier dat simpelweg in een van jullie mailboxen land. Vermoedelijk is dit voor jullie gebruik toereikend.

Een WPforms-formulier beheer je in WPforms, waarna je het middels een shortcode aan een pagina toe kunt voegen. Voor jullie contactformulier gebruik ik onderstaande shortcode:

[wpforms id="381" title="false" description="false"]

Je leest hierin het type wpforms, formuliernummer (een willekeurig getal) 381, waarvan ik besloten heb de titel en formulierbeschrijving niet te tonen. Die informatie had ik al op de contact-pagina staan.

---

Het contactformulier aanpassen.

WPforms is een pakket met veel mogelijkheden. De Lite-versie niet. Ik ga hieronder dan ook niet op de fijne kneepjes van het formulierbeheer in, daar hebben anderen al meer dan genoeg over geschreven. In plaats daarvan stip ik even kort aan hoe je bij de instellingen van het formulier komt en hoe je in kan stellen wie formulier-mail ontvangt.

Links in het dashboard vind je ‘WPforms’. Als je hierop klikt kom je op een overzicht van alle formulieren uit. Klik op ‘Bewerk’ om naar de formulier-editor te gaan.

De formuliereditor heeft een eigen zijbalk, van waaruit je naar een vijftal pagina’s kan.

1. Setup – is nuttig als je een nieuw formulier wil maken en met een standaardsjabloon wil beginnen.
2. Velden – is de editor waarin je de invulvelden van je formulier aan kunt passen.
3. Instellingen – hier pas je de werking van het formulier aan.
4. Marketing – N(u n)iet relevant voor De Inrichting.
5. Betalingen – N(u n)iet relevant voor De Inrichting.

Het blokje Instellingen zullen jullie af en toe nog wel eens nodig hebben, en dan met name meldingen. Als AvZ besluit om zonder laptop of telefoon drie maanden in noordoost-Groningen op sabbatical te gaan, is het verstandig om berichten even bij een ander lid van de inrichting binnen te laten komen. Dat kun je hier instellen. Het stukje {field_id=”1″} geeft aan dat de melding ook, ter bevestiging, naar het door de bezoeker ingevulde mailadres gestuurd wordt.