WordPress-Anmeldung im jQuery-Popup – Wie validiere ich die Anmeldung mit jQuery Ajax?

Ich habe das WordPress-Anmeldeformular im Frontend meiner Website, damit sich meine Benutzer anmelden können, ohne die wp-login.php besuchen oder das „Thema“ oder die Website verlassen zu müssen.

Wenn du nach … gehst http://westendmediacentre.com/dev und klicken Sie auf Anmelden. Sie können sehen, dass das Formular in einem jQuery-Popup angezeigt wird. Mein Code dafür lautet wie folgt:

Formularcode:

<div class="login-form">
      <form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
        <input type="text" name="log" id="log" value="Username<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="20" class="login-fields" onclick="this.value="";" onblur="this.value=!this.value?'Username':this.value;"/>
        <input type="password" name="pwd" id="pwd" value="Password" size="20" class="login-fields" onclick="this.value="";" onblur="this.value=!this.value?'Password':this.value;"/>
        <input type="submit" name="submit" value="Login" class="login-button" />
        <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
      </form>
</div>

jQuery:

$('.button-login').click(function() {
    $('.login-box').fadeIn('slow', function() {
    // Animation complete
    });
    $(".login-box").css({'z-index' : '10000'});
    $("#the-lights").css({'display' : 'block'});
    $("#the-lights").css({'z-index' : '1'});
    $("#the-lights").fadeTo("slow",0.7);
});
$('.login-box-close').click(function() {
    $('.login-box').fadeOut('fast', function() {
    // Animation complete
    });
    $("#the-lights").fadeTo("slow",0);
    $("#the-lights").css({'display' : 'none'});
});

Dies funktioniert perfekt, aber wenn Sie versuchen, sich mit einigen schlechten Anmeldeinformationen anzumelden, werden Sie auf eine WordPress-Seite umgeleitet, die Ihnen den Fehler gibt.

Was ich gerne tun würde, ist, dass diese Fehler in meinem jQuery-Popup angezeigt werden, sodass beim Versuch, sich mit ungültigen Anmeldeinformationen anzumelden, eine Fehlermeldung über oder unter dem Formular angezeigt wird, anstatt auf eine andere Seite mit dem Fehler umzuleiten dort gezeigt.

Ich habe versucht, diesem Tutorial zu folgen, aber es hat mit meinem vorhandenen Code nicht richtig funktioniert: http://www.tutorialstag.com/custom-wordpress-login-without-using-a-plugin.html

Würde mich freuen, wenn jemand eine funktionierende Lösung posten könnte

Hier dreht sich alles um die Struktur von Wordperess, zunächst sollten Sie wissen, dass Ihre Struktur den Benutzer auch dann zu wp-login.php umleitet, wenn Sie korrekte oder falsche Anmeldeinformationen angeben (wegen)
< ?php echo get_option('home'); ?>/wp-login.php line (ich meine, du postest nur deinen Benutzernamen und dein Passwort in wp-login.php)
Und wenn die angegebenen Informationen korrekt sind, leitet WordPress den Benutzer sofort wieder zur Homepage weiter, andernfalls zeigt es einen Fehler (mit Schütteleffekt). Sie finden alle diese Aktionen in der Datei wp-login.php.
Es gibt zwei verschiedene Optionen, die Sie verwenden können.

• Sie können die Datei wp-login.php hacken wie
  Wenn ein Benutzer nicht den richtigen Benutzernamen/das richtige Passwort angegeben hat, lassen Sie ihn zurück zu http://www.westendmediacentre.com/dev/ umleiten.
• Sie können Ihren eigenen Anmeldemechanismus mit Ajax-Validierung erstellen (d. h. Sie bereiten eine PHP-Datei für die Datenbankverbindung vor und rufen Benutzername und Passwort aus der Datenbank ab und senden die Ergebnisse an Ihr Anmeldesystem zurück).

Wenn Sie den zweiten Weg wählen, können Sie steuern Dies Post. Das ist sehr nützlich.

Bearbeiten Sie nach Möglichkeit KEINE Core-Dateien. Das wirst du später bereuen.

Wenn Sie ein Plugin schreiben würden und das Plugin Ihr jQuery-Popup handhaben würde, könnten Sie Folgendes tun:

Um ein Anmeldeformular zu erstellen, können Sie sich dieses Plugin ansehen:
http://wordpress.org/extend/plugins/sidebar-login/

Dann hätten Sie nur den Großteil dieser Logik in einer PHP-Datei, in die Ihr AJAX-Skript posten würde. Wenn die Anmeldung fehlschlägt, werden die zurückgegebenen Daten aus der PHP-Datei an Ihr AJAX-Skript gesendet, und Sie wären gut.

Sie können versuchen, das untenstehende WordPress-Plugin zu verwenden, was Ihre Arbeit erheblich erleichtern würde

http://wordpress.org/extend/plugins/simplemodal-login/

Mit ein wenig CSS können Sie es an Ihr aktuelles Thema anpassen

Sie verpassen diesen Teil des Tutorials

$("#submitbtn").click(function() {

    $('#result').html('<img src="https://stackoverflow.com/questions/8021309/<?php bloginfo("
    template_url '); ?>/images/loader.gif" class="loader" />').fadeIn();
    var input_data = $('#wp_login_form').serialize();
    $.ajax({
        type: "POST",
        url: "<?php echo "
        http: //" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",  
        data: input_data,
        success: function(msg) {
            $('.loader').remove();
            $(' 
<div>').html(msg).appendTo('div#result').hide().fadeIn('slow');
        }
    });
    return false;

});