Bewertungen in WordPress einbinden

Voraussetzungen

• Ein Space in Mocha mit mindestens einer freigegebenen Bewertung. Ohne freigegebene Bewertung bleibt das Widget unsichtbar.
• Der Einbettungscode aus dem Mocha-Dashboard (siehe Schritt 1).
• Ein WordPress-Konto mit der Rolle Administrator oder Redakteur, bei Multisite ein Super-Admin. Nur diese Rollen dürfen Skripte einfügen. Bei anderen Rollen entfernt WordPress das Skript beim Speichern.
• Auf WordPress.com hängt es vom Tarif ab: Script-Tags sind dort laut WordPress.com-Hilfe nur in kostenpflichtigen Tarifen mit aktivierten Hosting-Funktionen erlaubt.
• Das Widget gibt es in beiden Mocha-Tarifen. Free zeigt bis zu 50 freigegebene Bewertungen und den Hinweis „Powered by Mocha“, Pro zeigt alle Bewertungen ohne diesen Hinweis.

Schritt für Schritt

1. Code in Mocha kopieren

   Öffnen Sie in Mocha Ihren Space und klicken Sie in der Space-Navigation unter „Einbinden“ auf „Widget“. Wählen Sie unter „Widget wählen“ ein Widget aus, zum Beispiel die Bewertungswand. Passen Sie bei Bedarf „Erscheinungsbild“ und „Layout“ an und klicken Sie auf „Code kopieren“.

   Der Code ist ein einzelner Script-Tag. Ihr Code enthält statt „ihr-space“ die Kennung Ihres Spaces:

   HTMLCode kopieren

   <script
     src="https://mocha.de/api/embed/ihr-space/widget.js"
     data-mode="wall"
     async></script>

2. Seite im Block-Editor öffnen

   Öffnen Sie in WordPress unter „Seiten“ die Seite, auf der die Bewertungen erscheinen sollen, und klicken Sie auf „Bearbeiten“. Überlegen Sie, wo das Widget stehen soll: Es erscheint genau an der Stelle, an der später der Code steht.

3. Block „Individuelles HTML“ einfügen

   Klicken Sie an der gewünschten Stelle auf das Plus-Symbol („Block hinzufügen“), suchen Sie nach „HTML“ und wählen Sie den Block „Individuelles HTML“. Schneller geht es, wenn Sie in einem leeren Absatz /html tippen und die Eingabetaste drücken.

4. Code einfügen

   Fügen Sie den kopierten Code in das Textfeld des Blocks ein. Neuere WordPress-Versionen öffnen dafür über „HTML bearbeiten“ ein eigenes Fenster: Setzen Sie den Code dort in den Tab „HTML“ (nicht in einen Tab für JavaScript) und bestätigen Sie mit „Aktualisieren“.

5. Speichern und prüfen

   Klicken Sie oben rechts auf „Veröffentlichen“ oder „Speichern“. Im Editor sehen Sie je nach Version nur den Code oder eine Vorschau. Maßgeblich ist die fertige Seite. Öffnen Sie sie am besten in einem privaten Browserfenster, dann sehen Sie sie so wie Ihre Besucher.

6. Cache leeren

   Nutzen Sie ein Caching-Plugin, leeren Sie jetzt den Cache, meist über die obere Werkzeugleiste (bei WP Rocket zum Beispiel „Cache leeren und vorladen“). So bekommen Besucher die Seite mit dem neuen Code. Welche Einstellungen Sie außerdem prüfen sollten, steht im Abschnitt „Caching und Optimierung“.

Im Footer oder in der Seitenleiste

Soll das Widget auf allen Seiten erscheinen, etwa ein Badge im Footer, setzen Sie denselben Block an zentraler Stelle ein:

• Block-Themes (zum Beispiel Twenty Twenty-Five): Öffnen Sie „Design“ > „Editor“, dann unter „Vorlagen“ das Template-Teil „Footer“. Fügen Sie dort den Block „Individuelles HTML“ ein und speichern Sie. Die Änderung gilt für alle Seiten mit diesem Footer.
• Klassische Themes: Öffnen Sie „Design“ > „Widgets“, klappen Sie einen Widget-Bereich auf (die Namen hängen vom Theme ab), fügen Sie über das Plus-Symbol den Block „Individuelles HTML“ ein und klicken Sie auf „Aktualisieren“.
• Klassischer Editor: Arbeiten Sie noch mit dem klassischen Editor, fügen Sie den Code im Tab „Text“ ein, nicht im Tab „Visuell“.

Caching und Optimierung

Den Seiten-Cache müssen Sie nicht abschalten. Die Bewertungen lädt das Widget erst im Browser Ihrer Besucher, deshalb bleiben sie auch auf zwischengespeicherten Seiten aktuell.

• WP Rocket: Unter „Einstellungen“ > „WP Rocket“ im Tab „Datei-Optimierung“ gibt es bei „JavaScript minifizieren“, „JavaScript verzögert laden“ und „JavaScript-Ausführung verzögern“ jeweils ein Feld „JavaScript-Ausnahmen“. Tragen Sie mocha.de/api/embed in jedes dieser Felder ein. Die Ausnahme bei „JavaScript minifizieren“ gilt auch für „JavaScript zusammenfassen“.
• LiteSpeed Cache: Unter „LiteSpeed Cache“ > „Seitenoptimierung“ im Tab „Beschleunigen“ (englisch „Tuning“) gehört mocha.de/api/embed in die Felder „JS schließt aus“ (JS Excludes) und „JS Deferred / Delayed Excludes“. Sie gelten für „JS minimieren“, „JS kombinieren“ und „Load JS Deferred“ im Tab „JS-Einstellungen“.
• Autoptimize: Unter „Einstellungen“ > „Autoptimize“ im Tab „JS, CSS & HTML“ ergänzen Sie mocha.de/api/embed im Feld „Folgende Skripte von Autoptimize ausschließen:“, mit Komma getrennt von den vorhandenen Einträgen.
• W3 Total Cache: Beim Minimieren bezieht W3 Total Cache externe Skripte nur ein, wenn sie unter „Leistung“ > „Minimieren“ im Feld „Externe Dateien/Bibliotheken einbeziehen:“ stehen. Tragen Sie das Mocha-Skript dort nicht ein, ebenso wenig in die Verzögerungsliste von „Skripte verzögern“ (Pro-Version).
• SiteGround Speed Optimizer: „JavaScript-Dateien kombinieren“ unter „Speed Optimizer“ > „Frontend“ bezieht auch externe Skripte ein. Die Liste „Von der JavaScript-Kombination ausschließen“ zeigt nur Skripte von Theme und Plugins, das Mocha-Skript steht dort nicht. Schalten Sie die Kombination aus oder lassen Sie mocha.de über den Filter sgo_javascript_combine_excluded_external_paths ausnehmen (Aufgabe für Ihre Webentwicklung).
• Cloudflare Rocket Loader: Ergänzen Sie im Mocha-Code direkt nach <script das Attribut data-cfasync="false". Es muss vor src stehen, dann lässt Rocket Loader das Skript in Ruhe:

<script data-cfasync="false" src="https://mocha.de/api/embed/ihr-space/widget.js" data-mode="wall" async></script>

Leeren Sie nach jeder Änderung an diesen Einstellungen den Cache des Plugins.

Wenn das Widget nicht erscheint

• Keine freigegebene Bewertung: Das Widget bleibt leer, bis mindestens eine Bewertung freigegeben ist.
• Skript entfernt: Öffnen Sie den Block erneut. Fehlt der Script-Tag, hatte Ihr Konto keine Berechtigung für Skripte. Fügen Sie den Code mit einem Administrator-Konto erneut ein.
• Alte Seite im Cache: Leeren Sie den Cache Ihres Plugins und, falls vorhanden, den Ihres Hosters oder CDN. Prüfen Sie die Seite in einem privaten Fenster.
• Optimierung greift: Deaktivieren Sie testweise die JavaScript-Optionen Ihres Optimierungs-Plugins. Erscheint das Widget dann, fehlt eine der Ausnahmen oben.
• Consent-Tool blockiert: Manche Cookie- oder Consent-Tools halten externe Skripte zurück, bis Besucher zustimmen. Prüfen Sie die Einstellungen Ihres Tools.

Nutzen Sie Elementor oder Divi, finden Sie eigene Anleitungen für Elementor und Divi.