Einleitung

In diesem Tutorial lernst du, wie du in WordPress mit Elementor eine eigene Anmeldeseite erstellst, die folgende Anforderungen erfüllt:

  1. Verhindern, dass unangemeldete Besucher die Seite sehen können.

  2. Nach Abmeldung zur eigenen Anmeldeseite weiterleiten.

  3. Fehler abfangen und bei falschen Anmeldedaten eine Meldung auf der Anmeldeseite anzeigen.

Voraussetzung

  • Grundkenntnisse in PHP und WordPress
  • Elementor (Pro) für die Erstellung der Anmeldeseite
  • Zugang zu deinem WordPress-Theme oder einem Child-Theme

Teil 1
Anmeldeseite mit Elementor erstellen

Schritt 1:Neue Seite erstellen

  1. Gehe zu Seiten > Erstellen im WordPress-Adminbereich.
  2. Gib der Seite einen Namen, z.B. Anmelden.
  3. Wähle unter Seiten-Attributen die Vorlage: Elementor Canvas aus.

Elementor Canva Seitenlayout verwenden

Schritt 2: Anmeldeformular mit Elementor erstellen

    1. Klicke auf Mit Elementor bearbeiten.
    2. Ziehe das Login Widget von Elementor auf die Seite.
    3. Stelle im Widget sicher, dass folgende Einstellungen gesetzt sind:
      • Weiterleitung nach Anmeldung: URL deiner Startseite (z.B. /startseite/)
      • Weiterleitung nach Abmeldung: URL deiner Anmeldeseite (z.B. /anmelden/)
    4. Optional: Füge ein HTML-Widget hinzu, um die Fehlermeldung anzuzeigen.
      • Gib dem HTML-Widget die ID meldung.
      • Inhalt des HTML-Widgets:

 

Anmelde Widget verwenden.

				
					<div id="meldung" style="display: none; color: red; background-color: #f8d7da; padding: 10px; margin: 10px 0; border-radius: 5px;">
    <strong>Fehler:</strong> Falsche Anmeldedaten. Bitte überprüfe Benutzername und Passwort.
</div>

Teil 2
PHP-Funktionen in der functions.php

Öffne die Datei functions.php deines aktiven Themes.

1. Unangemeldete Besucher weiterleiten

				
					function redirect_if_not_logged_in() {
    if (!is_user_logged_in() && !is_admin() && !is_page('anmelden')) {
        $login_url = site_url('/anmelden/');
        wp_redirect($login_url);
        exit;
    }
}
add_action('template_redirect', 'redirect_if_not_logged_in');

2. Nach dem Logout zur Anmeldeseite weiterleiten

				
					function redirect_after_logout() {
    $login_url = site_url('/anmelden/');
    wp_redirect($login_url);
    exit;
}
add_action('wp_logout', 'redirect_after_logout');

3. Fehlermeldung bei falschen Anmeldedaten

				
					function custom_login_failed_redirect($username) {
    $login_url = site_url('/anmelden/');
    wp_redirect($login_url . '?login=failed');
    exit;
}
add_action('wp_login_failed', 'custom_login_failed_redirect');

4. Fehleranzeige im Anmelde-Widget

				
					function show_login_error_script() {
    if (isset($_GET['login']) && $_GET['login'] === 'failed') {
        ?>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                var meldung = document.getElementById('meldung');
                if (meldung) {
                    meldung.style.display = 'block';
                }
                const cleanUrl = window.location.protocol + "//" + window.location.host + window.location.pathname;
                window.history.replaceState({}, document.title, cleanUrl);
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'show_login_error_script');

Teil 3: Testen der Anmeldeseite

  1. Besuche die URL deiner Anmeldeseite (z.B. /anmelden/).

  2. Melde dich mit korrekten Anmeldedaten an und prüfe die Weiterleitung zur Startseite.

  3. Melde dich ab und prüfe, ob du zurück zur Anmeldeseite gelangst.

  4. Gib falsche Anmeldedaten ein und überprüfe die Fehlermeldung.

Fazit

Mit dieser Lösung kannst du sicherstellen, dass deine eigene Anmeldeseite für unangemeldete Benutzer die einzige Möglichkeit zum Zugriff bietet. Bei fehlerhaften Anmeldeversuchen wird der Benutzer ebenfalls zur eigenen Seite geleitet und erhält eine verständliche Fehlermeldung. So bleibt die Benutzerführung konsistent und professionell.