Inline Context
Inline Context is een krachtige uitbreiding van de blok-editor waarmee je overal in je inhoud inline uitvouwbare notities of overzichtelijke pop-ups in tooltip-stijl kunt maken. Het is ideaal voor inhoudrijke sites, waaronder redactionele platforms, onderzoekssites, online tijdschriften, documentatiehubs en educatieve blogs die afhankelijk zijn van duidelijke uitleg zonder de aandacht van de lezer te verstoren.
In plaats van lezers naar woordenlijstpagina’s of externe links te sturen, kun je met Inline Context definities, verwijzingen, verduidelijkingen en annotaties op hun plaats geven, waardoor lezers betrokken blijven en je inhoud gestructureerd blijft.
Notities kunnen herbruikbaar zijn, gecategoriseerd, opgemaakt, centraal beheerd en automatisch geüpdatet worden, waar ze ook verschijnen.
Waarom dit waardevol is voor content-rijke sites
Sites met veel tekst hebben vaak nodig:
- definities en terminologie
- bronverwijzingen
- achtergrondinformatie
- contextuele inline uitleg
- mini voetnoten zonder scrollen
- inline oproepen, tips of waarschuwingen
Inline context levert dit alles met een wrijvingsloze, toegankelijke gebruikerservaring. Het helpt lezers gefocust te blijven, vermindert navigatiemoeheid en verbetert het onthouden van kennis, vooral in lange artikelen of onderzoeksgerichte inhoud.
Hoe het werkt
- Markeer tekst in de blok-editor.
- Klik op Inline Context.
- Voer de inhoud van je notitie in (rich text wordt ondersteund).
- Wijs optioneel een categorie toe met een aangepast icoon & kleur.
- Publiceren — je notitie verschijnt inline of als tooltip, afhankelijk van de instellingen.
Je kunt ook herbruikbare notities maken vanuit een speciaal extra berichttype. Updaten van een herbruikbare notitie updatet alle instanties op de hele site.
Belangrijkste functies
Weergavemodi
- Inline uitbreiding (onthult een klein inhoudsscherm)
- Tooltip pop-overs (zwevende contextuele bubbels)
- Slimme tooltip plaatsing om weergave buiten het scherm te voorkomen
- Directe anker links (
#context-note-xxx) voor deep linking - Automatisch openen bij het laden van de pagina wanneer deze via een link wordt geopend
Productiviteit van redacteuren
- Herbruikbare notities met globale updates
- Notities bibliotheek met gebruik volgen (toont waar elke notitie wordt gebruikt)
- Snelle zoekopdracht in de editor om bestaande notities in te voegen
- Rich text ondersteuning via ReactQuill (vet, cursief, lijsten, links)
- Schone, geïntegreerde Rich Text toolbar
Categorieën & iconen
- Maak een onbeperkt aantal categorieën aan (Definitie, Referentie, Extern artikel, Tip, Waarschuwing, enz.)
- Kies uit zorgvuldig geselecteerde Dashicons of een van de meer dan 300 iconen
- Aparte iconen voor geopende en gesloten statussen
Styling & aanpassing
Volledige styling besturing vanuit Instellingen → Inline Context:
- Kleur van links, hoveren en focus statussen
- Notitie padding, spatiëring, randen, achtergronden, schaduwen
- Weergave van tooltip
- Chevron/indicator styling
- Live interactief voorbeeld van alle stijlaanpassingen
Toegankelijkheid & veiligheid
- ARIA ondersteuning, focus vergrendeling, Escape sleutel gedrag
- Met het toetsenbord te navigeren voor zowel links als notities
- DOMPurify opschonen van notitie inhoud
Internationalisering
Inline Context is volledig klaar voor vertaling.
Voorbeelden & inspiratie
Het idee voor deze plugin kwam voort uit een project met Renée Kool — een beeldend kunstenaar die werkt in publieke kunst, film en nieuwe media. Ze wilde een site maken waar een enkele link extra content kon onthullen met meerdere gerelateerde links. We keken naar het Nederlandse journalistieke platform De Correspondent, dat subtiele inline notities gebruikt om context te geven zonder de leeservaring te onderbreken. Je kunt voorbeelden van hun inline notities zien in dit artikel: Hoe Nederland kampioen deeltijdwerken werd
Broncode
Inline Context gebruikt @wordpress/scripts met webpack en npm om assets te bouwen.
De volledige broncode (inclusief niet-gecompileerde JS en CSS) is beschikbaar op: https://github.com/jooplaan/inline-context