Вход в WordPress в jQuery Popup - Как проверить вход в систему с помощью 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 (из-за)
< ?php echo get_option('home'); ?>/wp-login.php строка (я имею в виду, что вы просто публикуете свое имя пользователя и пароль в wp-login.php)
А затем, если предоставленная информация верна, WordPress снова сразу перенаправляет пользователя на домашнюю страницу, в противном случае отображается ошибка (с эффектом встряхивания ), вы можете найти все эти действия в файле wp-login.php.
Вы можете использовать две разные опции.

• Вы можете взломать файл wp-login.php, например
  если пользователь не предоставил правильное имя пользователя / пароль, то разрешите ему перенаправить обратно на http://www.westendmediacentre.com/dev/
• Вы можете создать свой собственный механизм входа с проверкой Ajax (я имею в виду, что вы готовите php-файл для подключения к базе данных, извлекаете имя пользователя и пароль из базы данных и отправляете результаты обратно в вашу систему входа в систему)

Если вы выберете второй способ, вы можете контролировать этот пост. Это очень полезно.

Answer 2

Вам не хватает этой части урока

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

вы можете попробовать использовать приведенный ниже плагин WordPress, который сделает вашу работу намного проще

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

с небольшим CSS, вы можете сделать так, чтобы он соответствовал вашей текущей теме

Answer 4

НЕ редактируйте файлы ядра, если это возможно.Вы пожалеете об этом позже.

Если вы должны были написать плагин, а плагин обрабатывал ваше всплывающее окно jQuery, то вы можете сделать это:

Чтобы создать форму входа, вы можете посмотреть наэтот плагин: http://wordpress.org/extend/plugins/sidebar-login/

Тогда у вас будет просто большая часть этой логики в файле PHP, который будет публиковать ваш AJAX-скрипт.Если вход не выполнен, возвращенные данные из PHP-файла будут отправлены в ваш AJAX-скрипт, и вы будете в порядке.