2011-11-05 2 views
8

Tôi có biểu mẫu Đăng nhập WordPress hoạt động ở đầu trang web của mình, cho phép người dùng của tôi đăng nhập mà không phải truy cập wp-login.php hoặc rời khỏi "chủ đề" hoặc trang web.Đăng nhập WordPress trong jQuery Popup - Cách xác thực đăng nhập bằng jQuery Ajax?

Nếu bạn goto http://westendmediacentre.com/dev và nhấp vào đăng nhập, bạn có thể thấy rằng tôi có biểu mẫu xuất hiện trong cửa sổ bật lên jQuery. Mã của tôi cho điều này là như sau:

Mẫu Mã số:

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

này hoạt động hoàn hảo, tuy nhiên, nếu bạn cố gắng đăng nhập với một số thông tin xấu, bạn sẽ có được tái -directed đến một trang WordPress cho bạn lỗi.

Điều tôi muốn làm là có lỗi xuất hiện trong cửa sổ bật lên jQuery của mình, để khi bạn cố gắng đăng nhập bằng thông tin đăng nhập không hợp lệ, nó cung cấp thông báo lỗi phía trên hoặc dưới biểu mẫu thay vì chuyển hướng đến trang có lỗi hiển thị ở đó.

tôi đã cố gắng làm theo hướng dẫn này, tuy nhiên nó đã không làm việc đúng với mã hiện tại của tôi: http://www.tutorialstag.com/custom-wordpress-login-without-using-a-plugin.html

sẽ đánh giá cao nếu ai đó có thể gửi một giải pháp làm việc

+0

Bạn không đăng thông tin đăng nhập của mình qua Ajax. Bạn chỉ cần đăng lên login.php. Hướng dẫn được tham chiếu là cách chính xác để đăng thông tin đăng nhập bằng ajax. –

+0

Khi tôi cố gắng sử dụng hướng dẫn, trên một trang trống, tôi có thể làm cho nó hoạt động đúng. Nhưng khi tôi cố gắng tích hợp nó với mã hiện tại của tôi, tôi gặp vấn đề. Khi đăng nhập, nó tải lại toàn bộ trang trong cửa sổ bật lên jQuery của tôi trong div "results", thay vì chỉ là kết quả. Tất cả những gì tôi cần là khi có lỗi, nó nói như vậy trong kết quả div, và khi thành công của nó, để chuyển hướng đến một trang. Làm thế nào tôi có thể làm điều đó? –

+0

câu hỏi này nên truy cập http://wordpress.stackexchange.com/ –

Trả lời

1

là tất cả về wordperess' Cấu trúc này, trước hết là tất cả các bạn nên biết rằng ngay cả khi bạn cung cấp thông tin đăng nhập đúng hoặc sai cấu trúc của bạn chuyển hướng người dùng đến wp-login.php (vì)
< ?php echo get_option('home'); ?>/wp-login.php dòng (tôi có nghĩa là bạn chỉ đăng tên người dùng và mật khẩu của mình tới wp-login.php)
Và sau đó nếu thông tin được cung cấp là chính xác thì wordpress lại chuyển hướng để sử dụng r đến trang chủ ngay lập tức, nếu không hiển thị lỗi (với hiệu ứng lắc), bạn có thể tìm thấy tất cả các hành động này trong tệp wp-login.php.
Có hai tùy chọn khác nhau mà bạn có thể sử dụng.

  • Bạn có thể hack tập tin wp-login.php như
    nếu người dùng didnt cung cấp đúng tên người dùng/mật khẩu sau đó để cho anh ta chuyển hướng trở lại http://www.westendmediacentre.com/dev/
  • Bạn có thể xây dựng cơ chế đăng nhập của riêng bạn với xác thực Ajax (có nghĩa là bạn chuẩn bị tệp php để kết nối cơ sở dữ liệu và truy xuất tên người dùng và mật khẩu từ cơ sở dữ liệu và gửi lại kết quả cho Hệ thống Đăng nhập của bạn)

Nếu bạn chọn cách thứ hai, bạn có thể kiểm soát this bài đăng. Điều đó rất hữu ích.

0

KHÔNG chỉnh sửa bất kỳ tệp lõi nào nếu có thể. Bạn sẽ hối tiếc sau.

Nếu bạn đã viết một plugin và các plugin đã được xử lý jQuery popup của bạn - sau đó bạn có thể làm điều này:

Để thực hiện một hình thức đăng nhập, bạn có thể nhìn vào plugin này: http://wordpress.org/extend/plugins/sidebar-login/

Sau đó, bạn sẽ chỉ có phần lớn logic đó trong một tệp PHP mà tập lệnh AJAX của bạn sẽ đăng lên. Nếu đăng nhập thất bại, dữ liệu trả về sẽ tạo thành tập tin PHP cho kịch bản AJAX của bạn và bạn sẽ tốt.

0

bạn có thể thử bằng cách sử dụng dưới đây WordPress plugin, mà sẽ làm cho công việc của bạn dễ dàng hơn nhiều

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

với css ít bạn có thể làm cho nó phù hợp với chủ đề hiện tại của bạn

0

Bạn đang thiếu phần này của hướng dẫn

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

});