WordPress Zaloguj się w jQuery Popup - Jak sprawdzić logowanie w jQuery Ajax?

Question

Mam formularz logowania WordPress działający na froncie mojej witryny, aby umożliwić moim użytkownikom logowanie bez konieczności odwiedzania wp-login.php lub pozostawienia "tematu" lub strony internetowej.

Jeśli masz http://westendmediacentre.com/dev i kliknij login, możesz zobaczyć, że mam formularz pojawiający się w oknie popup jQuery. Mój kod to w następujący sposób:

kodu formularza:

<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'}); 
}); 

Działa to doskonale, jednak przy próbie logowania z niektórych złych poświadczeń, można dostać się ponownie - jest przekierowywany na stronę WordPress, dając ci błąd.

Co chciałbym zrobić, to te błędy pojawiają się w moim okienku popup jQuery, więc gdy spróbujesz zalogować się ze złymi danymi uwierzytelniającymi, pojawi się komunikat o błędzie powyżej lub pod formularzem, zamiast przekierowania do innego stronę z wyświetlonym tam błędem.

Próbowałem po ten poradnik, ale to nie działa w porządku z moim istniejącego kodu: http://www.tutorialstag.com/custom-wordpress-login-without-using-a-plugin.html

Czy wdzięczni, gdyby ktoś mógł dodawać roztwór roboczy

Answer 1

To wszystko o wordperess' Struktura, przede wszystko, co powinieneś wiedzieć, nawet jeśli podasz prawidłowe lub błędne dane logowania, struktura przekierowuje użytkownika do linii wp-login.php (z powodu)
< ?php echo get_option('home'); ?>/wp-login.php (to znaczy, że właśnie publikujesz swoją nazwę użytkownika i hasło do wp-login.php)
A jeśli podane informacje są poprawne, wordpress ponownie przekierowuje do użycia r na stronę główną natychmiast, w przeciwnym razie pokazuje błąd (z efektem shake), możesz znaleźć wszystkie te działania w pliku wp-login.php.
Dostępne są dwie różne opcje.

• można siekać pliku wp-login.php jak
  jeśli zrobił użytkownik dostawa poprawny login/hasło to niech przekierowanie z powrotem do http://www.westendmediacentre.com/dev/
• Ty możliwe, skonstruuj swój własny mechanizm logowania z walidacją Ajax (tzn. przygotuj plik php do połączenia z bazą danych i pobierz nazwę użytkownika oraz hasło z bazy danych i odeślij wyniki do systemu logowania)

Jeśli wybierzesz drugi sposób, możesz kontrolować this post. To bardzo przydatne.

Answer 2

NIE edytuj podstawowych plików, jeśli to możliwe. Pożałujesz tego później.

Jeśli było napisać wtyczki i wtyczka obsługiwał swój popup jQuery - to można to zrobić:

Aby złożyć formularz logowania, można spojrzeć na ten plugin: http://wordpress.org/extend/plugins/sidebar-login/

Następnie po prostu miałbyś większość tej logiki w pliku PHP, który opublikowałby twój skrypt AJAX. Jeśli logowanie nie powiodło się, zwrócone dane z pliku PHP zostaną przesłane do twojego skryptu AJAX i będziesz dobry.

Answer 3

można spróbować użyć poniższy plugin WordPress, które czynią pracę znacznie łatwiej

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

z odrobiną css można je dopasować aktualna motyw

Answer 4

Brakuje ta część z tutoriala

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

    $('#result').html('<img src="<?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; 

});