Inline Context

Beschrijving

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.

Bekijk het live voorbeeld

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

1. Markeer tekst in de blok-editor.
2. Klik op Inline Context.
3. Voer de inhoud van je notitie in (rich text wordt ondersteund).
4. Wijs optioneel een categorie toe met een aangepast icoon & kleur.
5. 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:

• NEW in v2.6: Five pre-configured color presets for one-click professional styling
• Choose from Modern Blue, Minimalist Gray, High Contrast, Warm Earth Tones, or Dark Mode
• All presets meet WCAG 2.1 AA accessibility standards
• 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