Wie man den Login-Shake-Effekt in WordPress entfernt (UPDATED)

0
158
WordPress Login-Seite ohne Shake-Effekt in schlichter Webdesign-Optik

Um den Login Shake bei WordPress zu entfernen, gibt es sowohl einfache Plugin-Lösungen als auch gezielte manuelle Codeanpassungen. Diese aktualisierte Anleitung zeigt, wie Sie den Effekt vollständig ausschalten und dabei auch technische Fallstricke vermeiden – angepasst an die WordPress-Versionen von 2025.

Zentrale Punkte

  • Shake-Effekt ist standardmäßig in WordPress aktiviert
  • Er wird über ein eingebundenes JavaScript ausgelöst
  • Entfernung möglich per Plugin oder Code
  • Richtiger Hook entscheidend für Funktion
  • Cache-Plugins oder Login-Customizer können Probleme verursachen
Removing the WordPress Login Shake Effect

Was bewirkt der Login Shake in WordPress?

Wenn Benutzer eine Kombination aus falschem Nutzernamen oder fehlerhaftem Passwort eingeben, beginnt das Login-Formular in WordPress leicht seitlich zu wackeln. Diese Animation – der sogenannte Login Shake – soll das Eingabefeld hervorheben und auf einen Fehler hinweisen. Technisch wird dieser Effekt durch das Skript „wp_shake_js“ realisiert, das beim login_footer eingebunden wird. Obwohl optisch auffällig, sorgt dieser Effekt oft für Irritation – besonders dort, wo ein reduziertes, ruhigeres Design bevorzugt wird.

Obwohl viele Nutzer verstehen, dass etwas nicht korrekt war, lässt der Effekt häufig professionelle Designs unfreiwillig verspielt wirken. Das Entfernen schafft Klarheit und steigert den Eindruck zuverlässiger Funktionalität – gerade bei Portalen mit Kundenlogin oder speziell gestalteten Startseiten. Hier ist zu beachten, dass manche Nutzer gerade beim ersten Login-Versuch verunsichert sind, wenn Animationen oder anderweitige Effekte auftreten. Bei seriösen Geschäftswebsites wird oft ein schlichter und ruhiger Anmeldeprozess bevorzugt, damit sich Kunden auf die Eingabe ihrer Daten konzentrieren können.

In bestimmten Fällen kann der Login Shake auch Performance-Fragen aufwerfen, wenn weitere Skripte eingesetzt werden, die mit dem Shake-Script kollidieren. Diese Probleme sind zwar selten, treten aber vereinzelt bei sehr komplexen WordPress-Setups auf. Daher kann es nicht nur ästhetische, sondern durchaus auch technische Vorteile haben, den Shake-Effekt zu entfernen.

Login Shake effektfrei mit WPCode Plugin

WPCode ist ein Plugin zur einfachen Verwaltung von Code-Snippets in WordPress. Es enthält vordefinierte Funktionen, darunter auch die Option zur Entfernung des Login Shake Effekts. Diese Methode ist besonders geeignet, wenn Sie keine Änderungen an Ihrem Theme vornehmen möchten.

Folgen Sie diesen Schritten:

  • Installieren Sie WPCode über das Dashboard (Plugin-Suche).
  • Gehen Sie zu „Code Snippets“ → „+ Snippet hinzufügen“.
  • Suchen Sie „Remove Login Shake Animation“.
  • Klicken Sie auf „Snippet verwenden“ und aktivieren Sie es.

Nach der Aktivierung wird der Shake-Effekt automatisch deaktiviert – ohne Änderungen am Theme oder Core. Besonders praktisch bei WPCode ist die übersichtliche Verwaltung aller Snippets an einem Ort. Entscheiden Sie sich beispielsweise später für weitere Anpassungen, können Sie neue Code-Schnipsel in derselben Oberfläche pflegen. Achten Sie jedoch darauf, das Plugin aktuell zu halten, damit Kompatibilitätsprobleme mit neuen WordPress-Versionen ausbleiben.

Alternative Methode: Shake-Effekt per Code entfernen

Wer lieber direkt mit Code arbeitet, kann den Effekt gezielt über die functions.php seines aktiven WordPress-Themes ausschalten. Diese Methode eignet sich besonders dann, wenn ohnehin ein Child-Theme genutzt wird. Dadurch bleiben Ihre Änderungen beim Update des Hauptthemes bestehen und Sie müssen nicht nach jedem Update erneut Hand anlegen.

Fügen Sie dazu folgendes Snippet am unteren Ende der Datei functions.php ein:

function wpb_remove_loginshake() {
   remove_action('login_footer', 'wp_shake_js', 12);
}
add_action('login_footer', 'wpb_remove_loginshake');

So entziehen Sie dem Login-Skript den Shake-Befehl. Achten Sie beim Abspeichern auf korrekte Syntax, um einen „White Screen“ oder Login-Fehler zu vermeiden. Eine fehlerhafte Implementation kann dazu führen, dass die gesamte Anmeldung ausfällt oder andere Funktionen beeinträchtigt werden. Für die meisten Anwender ist dieser kleine Code-Schnipsel ausreichend. Prüfen Sie bei älteren WordPress-Installationen jedoch unbedingt Ihre WordPress-Version, da hier unter Umständen noch ein anderer Hook eingesetzt wird.

Eine sorgfältige Dokumentation Ihrer Code-Anpassungen ist sinnvoll, damit Sie bei späteren Wartungsarbeiten schnell nachvollziehen können, wann und warum eine bestimmte Funktion eingebaut wurde. Gerade in Teams oder bei Agenturprojekten hilft dies, Struktur zu wahren und Supportanfragen schneller zu bearbeiten.

Die richtige Hook verwenden

Frühere WordPress-Versionen nutzten häufig login_head zur Einbindung des Effekts. Ab circa Version 5.6 ist jedoch login_footer der gültige Bereich. Unerfahrene Entwickler verwenden oft aus alten Blogbeiträgen falsche Hooks, wodurch der Effekt aktiv bleibt.

Nutzen Sie diese Übersichtstabelle mit aktuellen Hook-Empfehlungen:

WordPress-Version Empfohlener Hook Hinweis
vor 5.5 login_head Nur auf älteren Installationen
ab 5.6 login_footer Seitdem Standard
ab 6.x login_footer Empfohlen & aktuell

Überprüfen Sie vor dem Einsatz Ihres Codes automatisch, ob Sie sich tatsächlich innerhalb der richtigen Version befinden. In einem professionellen Umfeld ist es ratsam, über ein Staging-System zu verfügen, um dort vorab alle Änderungen zu testen. Das minimiert das Risiko, dass der Live-Betrieb beeinträchtigt wird.

Wo muss der Code eingefügt werden?

Bearbeiten Sie immer die functions.php Ihres aktiven Child-Themes – nicht des Hauptthemes, da Änderungen dort beim nächsten Update überschrieben werden. Falls Ihr Theme individuelle Includes verwendet (z. B. includes/custom-functions.php), können Sie den Code auch dort eintragen.

Eine Flush-Funktion für Cache ist bei eingesetzten Caching-Plugins ratsam, nachdem Sie Änderungen speichern. Prüfen Sie anschließend über den Inkognito-Modus Ihres Browsers, ob der Shake-Effekt entfernt wurde. Falls sich hier keine Änderung zeigt, können weitere Cache-Ebenen greifen oder ein anderes Plugin die Deaktivierung verhindern.

Sollten Sie sich fragen, wie Sie die Dateien für Ihr WordPress-Theme überhaupt bearbeiten können, ist ein FTP-Zugang oder File-Manager im Hosting-Backend der einfachste Weg. Alternativ können fortgeschrittene Nutzer oder Entwickler die Dateien lokal klonen, Änderungen vornehmen und wieder hochladen. Wichtig ist in jedem Fall, vorab ein Backup des Themes zu erstellen.

Kollisionen mit Plugins oder Themes vermeiden

Fehlende Wirkung liegt oft an Plugins oder Custom Themes, die eigene JavaScript-Strukturen einbinden und den Standard-Hook überschreiben. In einigen Fällen wird ein alternatives Login-Template verwendet, bei dem der Shake-Effekt erneut manuell entfernt werden muss.

Beispielsweise kann ein Sicherheitsplugin, das zusätzliche Login-Funktionen ergänzt, den Shake-Effekt in einer separaten Datei definieren. In diesem Fall reicht es nicht aus, nur das Standard-Skript zu entfernen. Stattdessen müssen Sie gezielt die betroffene Plugin-Datei analysieren und dort den entsprechenden Code blockieren oder einen zusätzlichen remove_action-Befehl setzen.

Auch Plugins zur visuellen Login-Anpassung, z. B. solche zum Ändern des Anmeldeformulars, laden ggf. eigene Shake-Scripte. In solchen Fällen hilft das vollständige Deaktivieren nicht benötigter Funktionen oder das gezielte Ansprechen zusätzlicher Hooks. Falls Sie schrittweise vorgehen wollen, deaktivieren Sie zuerst alle Plugins, die das Login betreffen. Reaktivieren Sie danach die Komponenten einzeln, während Sie jedes Mal prüfen, ob der Shake erneut auftritt.

Was tun, wenn der Effekt weiterhin sichtbar bleibt?

Bleibt der Login Shake auch nach Änderungen bestehen, überprüfen Sie folgende Punkte:

  • Wurde wirklich login_footer und nicht login_head verwendet?
  • Wurde der Zwischenspeicher geleert?
  • Verwendet das Theme eine eigene Login-Seite, z. B. mit Shortcode oder Custom Template?
  • Erzwingt ein Plugin den Shake auf anderem Weg?

Falls Sie mit Widgets und Formularen auf der Frontend-Seite arbeiten, lohnt ein Blick in den Beitrag Frontend-Anmeldeseite in WordPress einbinden, da dort abweichende Anzeigen ohne den Shake realisierbar sind. Oft werden hier alternative Handhabungen umgesetzt, sodass das Standard-Login im Hintergrund unberührt bleibt, während der anpassbare Frontend-Login von Haus aus schlichter wirkt.

Zusätzlich können Sie in der Browser-Konsole untersuchen, ob betroffene Skripte geladen werden. Öffnen Sie einfach die Entwickler-Tools (meist F12), wechseln Sie zum Reiter „Netzwerk“ oder „Sources“ und prüfen Sie, ob wp_shake_js geladen wird. Wird das Script noch geladen, existiert vermutlich ein weiteres Plugin oder Theme-Teil, der den Code zurück in den Fußbereich des Login-Formulars injiziert.

Alternative: Site-Specific Plugin für dauerhafte Lösung

Um Ihre Anpassung nicht nur updatesicher zu machen, sondern auch sauber wartbar, empfiehlt sich die Nutzung eines „site-specific Plugin“. Dabei handelt es sich um ein eigenes Plugin mit persönlichem Funktionscode, das Sie unabhängig vom Theme ändern können. Solch ein Plugin hat den großen Vorteil, dass Sie beim Theme-Wechsel oder Theme-Update Ihre Anpassungen behalten.

Die Einrichtung eines Site-Specific Plugins ist recht einfach. Legen Sie in Ihrem WordPress-Installationsverzeichnis (im Ordner wp-content/plugins) einen neuen Ordner, beispielsweise „site-custom-functions“, an. Darin erstellen Sie eine PHP-Datei – zum Beispiel site-custom-functions.php – mit folgendem Grundgerüst:

/*
Plugin Name: Site Custom Functions
Description: Enthält benutzerdefinierte Funktionen für diese Website.
Version: 1.0
Author: Ihr Name
*/

function wpb_remove_loginshake() {
   remove_action('login_footer', 'wp_shake_js', 12);
}
add_action('login_footer', 'wpb_remove_loginshake');

Anschließend aktivieren Sie dieses Plugin im WordPress-Dashboard unter „Plugins“. Nun ist das Entfernen des Login Shake Effekts dauerhaft aktiv, unabhängig davon, welches Theme Sie gerade nutzen. Für weitere eigene Funktionen fügen Sie in dieselbe Datei einfach zusätzliche Code-Snippets ein, sodass Sie alle individuellen Code-Anpassungen in einem einzigen, zentral verwalteten Plugin bündeln können.

Gerade bei Projekten, die langfristig wachsen und durch unterschiedliche Teammitglieder gepflegt werden, ist die Site-Specific-Plugin-Variante eine elegante Lösung. Sie stellt Transparenz her, hält Ihr Theme schlank und reduziert mögliche Fehlkonfigurationen im Rahmen von Theme-Updates.

Anmeldung noch sicherer gestalten

Wenn Sie schon an der optischen Optimierung arbeiten, lohnt sich auch die technische Absicherung. Passen Sie etwa Ihre Login-Formulare an oder deaktivieren Sie die Anmeldung via E-Mail, wie im Beitrag E-Mail-Login in WordPress deaktivieren beschrieben. Auch eine Login-Versuchsbegrenzung schützt zuverlässig vor Brute-Force-Angriffen.

Zudem empfiehlt es sich, die Standard-Login-URL zu ändern oder zu verstecken, sofern Ihr Sicherheitskonzept dies vorsieht. Durch Plugins, die Login-URL und Anmeldeformular anpassen, reduzieren Sie die Sichtbarkeit potenzieller Angriffsziele und können dadurch ungebetene Gäste effizienter abwehren. Ergänzend sind Zwei-Faktor-Authentifizierung (2FA) und sichere Passwörter zentrale Bausteine, um die Sicherheit Ihres Login-Bereichs dauerhaft zu erhöhen.

Vergessen Sie auch nicht den Faktor Benutzererfahrung: Neben dem Verzicht auf den Shake-Effekt können ein schlichtes Design, ein klarer Call-to-Action und leicht verständliche Fehlermeldungen dazu beitragen, dass sich Benutzer schnell zurechtfinden. Gerade in stressigen Situationen (z. B. ein Kunde hat sein Passwort vergessen) ist eine ruhige und übersichtliche Anmeldung Gold wert.

Rückblick und persönlicher Tipp

Ich entferne den Login Shake grundsätzlich bei jeder neuen WordPress-Installation – ob über WPCode oder mit einem eigenen Snippet in der functions.php. Die Anmeldung wirkt ruhiger, klarer und professioneller. Gerade bei geschäftlich eingesetzten Login-Bereichen zahlt sich diese Entscheidung optisch und funktional aus.

Ob Plugin oder Code – am Ende zählt, dass der Effekt deaktiviert und der Login ansprechend bleibt. Nehmen Sie sich die wenigen Minuten Zeit – Ihre Nutzer werden es Ihnen danken. Wenn Sie die Maßnahmen zusätzlich mit einem klaren Sicherheitskonzept und einer benutzerfreundlichen Gestaltung kombinieren, erhalten Sie einen professionellen und zuverlässigen Anmeldeprozess, der den Anforderungen einer modernen WordPress-Website gerecht wird.

author avatar
Homepage Redaktion

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein