Accesso WordPress in jQuery Popup - Come convalidare l'accesso con jQuery Ajax?

Question

Ho il modulo di accesso WordPress che lavora nel front-end del mio sito web, per consentire ai miei utenti di accedere senza dover visitare il wp-login.php o lasciare il "tema" o il sito web.

Se si passa a http://westendmediacentre.com/dev e si fa il login, è possibile vedere che il modulo è visualizzato in un popup di jQuery. Il mio codice per questo è la seguente:

Codice del modulo:

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

Questo funziona perfettamente, tuttavia, se si prova ad accedere con alcune credenziali cattivi, si ottiene re -diretto a una pagina di WordPress che ti dà l'errore.

Quello che vorrei fare è che questi errori compaiano all'interno del mio jQuery popup, in modo che quando si tenta di accedere con cattive credenziali, viene visualizzato un messaggio di errore sopra o sotto il form, piuttosto che reindirizzare a un altro pagina con l'errore mostrato lì.

ho provato seguendo questo tutorial, ma non ha funzionato a destra con il mio codice esistente: http://www.tutorialstag.com/custom-wordpress-login-without-using-a-plugin.html

saremmo grati se qualcuno potrebbe inviare una soluzione di lavoro

Answer 1

Questa struttura è tutto wordperess', prima di tutto quello che dovresti sapere che anche se fornisci credenziali di accesso corrette o errate la tua struttura reindirizza l'utente a wp-login.php (a causa di)
< ?php echo get_option('home'); ?>/wp-login.php line (voglio dire, stai solo postando il tuo nome utente e password per wp-login.php)
E se le informazioni fornite sono corrette allora wordpress reindirizza nuovamente per usare r alla homepage immediatamente, altrimenti mostra un errore (con effetto shake), puoi trovare tutte queste azioni nel file wp-login.php.
Esistono due diverse opzioni che è possibile utilizzare.

• È possibile incidere file wp-login.php come
  se un utente non ha ancora alimentazione corretta username/password poi lasciarlo di nuovo a reindirizzare http://www.westendmediacentre.com/dev/
• Puoi costruire il proprio meccanismo di login con l'Ajax validazione (intendo a preparare un file php per la connessione al database e il nome utente il recupero e la password dal database e inviare i risultati al proprio sistema Accesso)

Se si seleziona secondo modo, è possibile controllare this post. È molto utile

Answer 2

NON modificare alcun file di base, se possibile. Te ne pentirai dopo.

Se si dovesse scrivere un plugin e il plugin stava gestendo il tuo popup jQuery - allora si potrebbe fare questo:

Per effettuare una form di login, si può guardare a questo plugin: http://wordpress.org/extend/plugins/sidebar-login/

Poi avresti solo il grosso di quella logica in un file PHP che il tuo script AJAX avrebbe pubblicato. Se il login fallisce, i dati restituiti formano il file PHP che verrebbe inviato al tuo script AJAX e tu starai bene.

Answer 3

si può provare a utilizzare il seguito plugin WordPress, che renderebbe il vostro lavoro molto più facile

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

con un po 'di CSS potete farlo corrispondere il tema corrente

Answer 4

Ti manca questa parte del tutorial

$("#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; 

});