jQueryポップアップのWordPressログイン - jQuery Ajaxでログインを検証するにはどうすればいいですか？

Question

私は、自分のウェブサイトのフロントエンドでWordPressのログインフォームを使用しているので、ユーザーはwp-login.phpにアクセスしたり、「テーマ」やウェブサイトを離れなくてもログインできます。

http://westendmediacentre.com/devに行ってログインをクリックすると、フォームがjQueryポップアップ内に表示されていることがわかります。

フォームコード：

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

これは完璧に動作しますが、いくつかの悪い資格情報を使用してログインしようとした場合、しかし、あなたが再取得、このための私のコードは次のようですあなたにエラーを与えるWordPressページに導かれます。

jQueryのポップアップ内にこれらのエラーが表示されるので、悪い認証情報でログインしようとすると、別のページにリダイレクトするのではなく、フォームの上または下にエラーメッセージが表示されます。ページにエラーが表示されます。 http://www.tutorialstag.com/custom-wordpress-login-without-using-a-plugin.html

お願い申し上げ誰かが作業溶液

Answer 1

を投稿することができれば、これは最初の、全てwordperess'構造についてです。私はこのチュートリアル以下、しかし、それは私の既存のコードで正しく動作しませんでした試みた

が

正しいか間違ったログイン資格情報を提供しても、あなたの構造はwp-login.phpにリダイレクトされることを知っておくべきです。
line（私はあなたのユーザ名とパスワードをwp-login.phpに投稿しているだけです）
そして、提供された情報が正しいならば、wordpressは再び使用にリダイレクトされますrをホームページにすぐに、そうでなければエラーを表示して（振る舞いで）、これらのすべてのアクションをwp-login.phpファイルで見つけることができます。
使用できるオプションは2つあります。ユーザーdidntの供給正しいユーザ名/パスワードは、その後、彼はあなたのことが可能

をhttp://www.westendmediacentre.com/dev/に戻ってリダイレクトさせた場合

• あなたは
  のようなWP-login.phpファイルをハックすることができます（データベース接続用のPHPファイルを用意し、データベースからユーザ名とパスワードを取得して結果をあなたのログインシステムに返すことを意味します）

2番目の方法を選択すると、 this投稿。それは非常に便利です。

Answer 2

可能であれば、コアファイルを編集しないでください。 後でそれを後悔します。あなたがプラグインを作成していたし、プラグインがあなたのjQueryのポップアップを処理していた場合

- そして、あなたがこれを行うことができます：

は、ログインフォームを作成するには、このプラグインで見ることができます： http://wordpress.org/extend/plugins/sidebar-login/

その後あなたはAJAXスクリプトが投稿するPHPファイルにそのロジックの大部分を入れるだけです。ログインが失敗した場合、PHPファイルがAJAXスクリプトに送られて返されたデータが返ってきます。あなたはそれがあなたはこの一部欠けている

Answer 3

あなたはWordPressのプラグインの下に使用して試すことができ、チュートリアルの

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

}); 

Answer 4

あなたの現在のテーマと一致することができます少しCSSで

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

はるかに簡単にあなたの仕事になるだろう