Das brauchst du
Ein Ghost-Konto mit Administratorrechten. Dein Theme muss den Code-Injection-Bereich von Ghost im Footer ausgeben. Lege in Accessonaut zuerst ein Projekt mit deiner tatsächlichen Website-Domain an und öffne im Projekt die Einbauseite.
Schritt für Schritt
- Öffne im Ghost-Admin Settings → Advanced → Code Injection.
- Füge den unveränderten Einbaucode in den Bereich Site Footer ein. Ghost gibt diesen Code vor dem schließenden body-Tag aus.
- Speichere die Änderung. Code Injection in den Einstellungen eines einzelnen Beitrags gilt nur für diesen Beitrag.
- Öffne die öffentliche Website in einem privaten Fenster. Prüfe Startseite, Beiträge, Seiten und die mobile Ansicht.
So sieht die Einbindung aus
Verwende den fertigen Code aus deinem Projekt. Das Beispiel benötigt deine echte Projekt-ID und die öffentlich erreichbare Service-Adresse.
<script src="https://accessonaut.com/widget.js"
data-project-id="DEINE_PROJEKT_ID"
data-language="de" defer></script>Das Design an deine Website anpassen
Öffne im Accessonaut-Projekt „Lesehilfen-Widget“. Fünf Vorlagen und eine Live-Vorschau helfen dir beim Gestalten: Farben, Schriften, Menübreite, Ecken, Schatten, Symbol oder beschrifteter Öffner sowie eigene Texte. Position und Randabstände lassen sich für Desktop und Smartphone abstimmen. Nach dem Speichern übernimmt dein vorhandener Einbaucode das Projektdesign automatisch; die öffentliche Konfiguration wird bis zu einer Minute zwischengespeichert.
Im WordPress-Plugin kannst du stattdessen lokale Einstellungen wählen. Diese haben Vorrang vor dem Projektdesign. Die Gestaltung ist in allen Tarifen verfügbar. Im Free-Tarif bleibt der Accessonaut-Hinweis sichtbar. Persönliche Leseeinstellungen deiner Besuchenden haben Vorrang vor Designvorgaben.
Darauf achten
Eigene Themes müssen {{ghost_foot}} in default.hbs direkt vor dem schließenden body-Tag ausgeben, sonst fehlt der Code. Newsletter-E-Mails erreicht das Widget nicht. Entferne ältere Einbauten aus dem Theme, damit kein doppeltes Script entsteht.
Häufige Fragen zu Ghost
Bleibt der Code bei einem Theme-Wechsel oder -Update erhalten?
Ja, wenn er in Code Injection steht. Laut Ghost kannst du Themes wechseln, ohne diese Snippets zu verlieren. Ein Update eines offiziellen Themes überschreibt dagegen Änderungen an den Theme-Dateien. Lege den Einbaucode deshalb nicht direkt ins Theme.
Site Header oder Site Footer?
Nutze Site Footer. Ghost empfiehlt diesen Bereich für JavaScript. Site Header landet im head der Seite. Die Code-Injection-Felder einzelner Beiträge gelten nur für diesen Beitrag.
Was zeigt das Widget auf meiner ghost.io-Adresse?
Das Widget lädt deine Projektkonfiguration nur auf der Domain, die im Projekt steht. Auf einer anderen Adresse erscheint es mit Standarddesign und Accessonaut-Hinweis. Trage deine eigene Domain im Projekt ein und teste dort.
Funktioniert das Widget mit dem Mitgliederbereich?
Das Ghost-Portal für Anmeldung und Registrierung öffnet sich als Overlay über der aktuellen Seite. Prüfe Anmelden, Registrieren und Kontoseiten mit der Tastatur, auch bei geöffnetem Widget-Panel.
Kann ich auf Ghost(Pro) Starter ein eigenes Theme anpassen?
Nein. Laut Ghost kannst du im Starter-Tarif nur offizielle Themes verwenden. Ein Einbau über eigene Theme-Dateien fällt dort also weg. Prüfe in deinem Tarif, ob Code Injection zur Verfügung steht.
Wenn etwas nicht klappt
Der Code steht im Site Footer, aber das Widget fehlt.
Ursache: Dein Theme gibt {{ghost_foot}} nicht aus.
Lösung: Ergänze {{ghost_foot}} in default.hbs direkt vor dem schließenden body-Tag und lade das Theme neu hoch.
Das Widget erscheint nur in einem Beitrag.
Ursache: Der Code steht in der Code Injection des Beitrags statt in den globalen Einstellungen.
Lösung: Verschiebe ihn nach Settings → Advanced → Code Injection → Site Footer und lösche den Eintrag im Beitrag.
Du willst das Widget entfernen.
Ursache: Der Code bleibt im Site Footer aktiv.
Lösung: Lösche ihn dort, speichere und entferne Reste aus Beiträgen und Theme-Dateien.
Einbau prüfen
- Öffne die öffentliche Website in einem privaten Fenster. Das Widget wird genau einmal angezeigt.
- Erreiche den Button mit der Tastatur. Öffne das Panel, ändere die Textgröße und schließe es wieder.
- Prüfe Startseite, Unterseite, Formular und mobile Ansicht. Das Widget darf keine wichtigen Bedienelemente verdecken.
- Prüfe im Netzwerk-Tab, dass widget.js und die Projektkonfiguration von deiner Service-Adresse geladen werden. Bei Fehlern kontrolliere Domain, Projekt-ID und CSP.
- Bei Free-Projekten bleibt der sichtbare Accessonaut-Hinweis Bestandteil des Widgets. Berechtigungen kommen aus deinem Projekt.
Datenschutz und Grenzen
Beim Laden ruft der Besucherbrowser das Script und die Projektkonfiguration vom Accessonaut-Dienst ab. Dabei fallen IP-Adresse, Browser-Anfragedaten und Website-Hostname an. Darstellungswünsche werden lokal im Browser gespeichert. Berücksichtige die Einbindung in deinen Datenschutzhinweisen und prüfe deine konkrete Konfiguration.
Die Lesehilfen erzeugen keine Konformitätsgarantie. Prüfe Barrieren im Quellcode und vollständige Nutzerabläufe zusätzlich automatisch und manuell.