Kommentar-Antworten funktionieren nicht wegen Cloudflare Rocket Loader

Der Antworten-Link in den WordPress-Kommentaren funktioniert nicht richtig? Der Grund dafür ist ein JavaScript Problem, welches oft von Speed-Plugins oder einem CDN ausgelöst wird.

Hier findest du die Lösung!

WordPress Kommentar-Antworten funktioniert nicht

Problem: Beim Klick auf den Antworten Link (Reply) in den WordPress-Kommentaren passiert nichts. Die Ansicht springt lediglich etwas nach unten. Scrollt man dann hinunter zum Kommentar-Formular und antwortet, wird der Kommentar nicht als Antwort eingereiht, sondern wird ganz unten eingefügt.

Erwartetes Verhalten: Beim Klick auf den Antworten Link sollte das Kommentar-Formular direkt unter dem zu antwortenden Kommentar erscheinen. Nach dem Absenden ist der neue Kommentar eingerückt unter dem übergeordneten Kommentar zu sehen.

Lösung: Cloudflare Rocket Loader Ignore

Ich habe lange nach einer Lösung gesucht und zuerst mein Caching-Plugin WP Rocket verdächtigt. Damit lag ich jedoch falsch.

Dann fiel mir ein, dass ich das Cloudflare CDN nutze und das Feature Rocket Loader aktiv habe, obwohl Probleme mit WordPress bekannt sind.

Die Optionen findest du in Cloudflare > Speed > Optimization > Rocket Loader.

Nach einigen Tests konnte ich den Rocket Loader auch schnell als Problemverursacher eingrenzen.

Rocket Loader solltest du aber aktiv haben, denn das Feature macht deine WordPress Seite deutlich schneller!

Den Rocket Loader zu deaktivieren ist also keine Option. Deshalb habe ich nach einer Problemlösung gesucht. Cloudflare selbst hat einen Hilfe-Artikel, worin beschrieben wird, wie man den Rocket Loader dazu bringen kann, bestimmte JavaScript-Files zu ignorieren. Dem Script Tag muss folgendes Attribut beigefügt werden: data-cfasync="false"

Perfekt, genau das brauche ich!

Direkt im Theme oder Child-Theme möchte ich das nicht ändern. Ich brauche also einen WordPress-Filter, der das Attibut für mich einfügt. Fündig geworden bin ich auf Stackoverflow.

Um das Problem zu lösen, füge folgenden Code in deine functions.php Datei deines Themes ein:

/**
 * Make comment reply button work with CloudFlare Rocket Loader
 * @see https://support.cloudflare.com/hc/en-us/articles/200169436-How-can-I-have-Rocket-Loader-ignore-specific-JavaScripts-
 */
add_filter( 'script_loader_tag', 'add_data_attribute', 10, 3 );
function add_data_attribute( $tag, $handle, $src ) {
  if ( 'comment-reply' !== $handle )
     return $tag;

  return str_replace( ' src', ' data-cfasync="false" src', $tag );
}

Was macht der Rocket Loader?

Der Rocket Loader verbessert die paint times (Zeit, bis was am Bildschirm zu sehen ist) für Seiten, die Javascript enthalten. Die Besucher haben ein besseres Erlebnis, wenn die Inhalte schneller geladen werden. Nicht zuletzt ist die Geschwindigkeit auch ein Faktor bei einigen Suchrankings.

Verbessert wird:

• Time to First Paint (TTFP)
• Time to First Contentful Paint (TTFCP)
• Time to First Meaningful Paint (TTFMP)
• Document Load

Der Rocket Loader verbessert die Ladezeiten durch das asynchrone Laden deiner JavaScripts, einschließlich der Scripts von Drittanbietern, sodass diese Scripte die Darstellung des Inhalts deiner Seiten nicht blockieren.

Darum sollst du den Rocket Loader aktivieren

JavaScript ist zugleich Fluch und Segen!

Ohne JavaScript würde deine Seite schneller laden. Das wollen wir doch alle, oder?

Der Rocket Loader von Cloudflare macht eine richtig gute Arbeit im Umgang mit JavaScript. Davon solltest du unbedingt Gebrauch machen, um deinen Besuchern ein gutes Benutzererlebnis zu bieten.

Falls es doch zu Problem kommt, wie mit den WordPress-Kommentar-Antworten, findet sich immer eine Lösung.

Fazit: Kommentar Antworten funktioniert nicht

WordPress-Fehler sind nervig und zeitraubend, weil viele Plugins und externe Dienste die Fehlersucher massiv erschweren. Ist der Fehler gefunden, muss immer noch eine Lösung her.

Für das WordPress-Problem, des Nichtfunktionierens des Antworten-Links, ist der Rocket Loader von Cloudflare schuld. Mit einem kurzen Snippet in der functions.php lässt sich das Problem aber einfach lösen.