jQuery 팝업에서 WordPress 로그인 - jQuery Ajax 로그인을 검증하는 방법

jQuery 팝업에서 WordPress 로그인 - jQuery Ajax 로그인을 검증하는 방법

WordPress Login 폼은 웹 사이트 프런트 엔드에 있어 사용자가 wp-login에 접속하지 않고도 로그인할 수 있습니다.php 또는 "http" 또는 웹사이트를 떠납니다.

http://westendmediacentre.com/dev에서 login을 클릭하면 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>

j쿼리:

$('.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

누군가가 유효한 솔루션을 게시해 주시면 감사하겠습니다.

이것은 워드프레스의 구조에 관한 것입니다.우선 로그인 credential이 올바르거나 잘못되어도 구조가 사용자를 wp-login.php로 리다이렉트 합니다(이 때문에).
< ?php echo get_option('home'); ?>/wp-login.phpline(즉, 사용자 이름과 패스워드를 wp-password.dload에 게시하는 것)
입력한 정보가 올바른 경우 워드프레스를 다시 누르면 바로 홈페이지로 리다이렉트 됩니다.그렇지 않으면 (쉐이크 효과가 있는) 에러가 표시됩니다.이러한 액션은 모두 wp-login에서 찾을 수 있습니다.php 파일.
사용할 수 있는 옵션은 두 가지가 있습니다.

• wp-login을 해킹할 수 있습니다.php 파일처럼
  사용자가 올바른 사용자 이름/비밀번호를 입력하지 않은 경우 http://www.westendmediacentre.com/dev/으로 리다이렉트합니다.
• Ajax 검증으로 독자적인 로그인 메커니즘을 구축할 수 있습니다(즉, 데이터베이스 접속을 위한 php 파일을 준비하고 데이터베이스에서 사용자 이름과 비밀번호를 검색하여 로그인 시스템으로 결과를 반환합니다).

두 번째 방법을 선택하면 이 게시물을 제어할 수 있습니다.그것은 매우 편리합니다.

가능하면 코어 파일을 편집하지 마십시오.당신은 나중에 그것을 후회할 거예요.

만약 당신이 플러그인을 쓰고 그 플러그인이 당신의 jQuery 팝업을 처리하고 있다면, 당신은 다음과 같이 할 수 있습니다.

로그인 폼을 작성하려면 , 다음의 플러그인을 참조해 주세요.http://wordpress.org/extend/plugins/sidebar-login/

그러면 AJAX 스크립트가 투고하는 PHP 파일에 그 논리의 대부분을 갖게 됩니다.로그인에 실패하면 PHP 파일에서 반환된 데이터가 AJAX 스크립트로 전송되므로 문제 없습니다.

아래의 WordPress 플러그인을 사용하면 작업이 훨씬 쉬워집니다.

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

약간의 css로 현재 테마에 맞게 만들 수 있습니다.

튜토리얼의 이 부분이 누락되었습니다.

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

});

언급URL : https://stackoverflow.com/questions/8021309/wordpress-login-in-jquery-popup-how-to-validate-login-with-jquery-ajax