Всплывающая форма авторизации на ajax без плагинов [готовое решение]

Готовые решения4 комментария

В данной статье мы сделаем для сайта на wp всплывающую  форму авторизации с использованием технологии ajax.

Ajax будем использовать для проверки вводимых данных пользователем, то есть без перезагрузки страницы мы будем определять правильность ввода логина и пароля и выдавать соответствующие сообщения пользователю.

Как это будет выглядеть:

ajax_forma

Первое что мы сделаем, это сделаем это создадим новый .php файл в папке с вашим шаблоном. Этот файл будет содержать html разметку нашей формы.

Создаем файл header-login.php (в корневой папке вашего шаблона).

Вставим следующий код в файл и сохраним:

 

В данном файле мы выведем html код формы авторизации, если пользователь не авторизован.

.masck .none — данный блок служит для затемнением фона, когда всплывает окно (по умолчанию скрыт класс .none).

.login_box_center .none — блок с формой (по умолчанию скрыт класс .none).

 

Следующим действием подключим данный файл к файлу header.php. Для этого сразу после открывающегося тега <body> пропишите следующий код:

 

Теперь нам нужно прописать стили для нашей формы, для этого в файл style.css добавите следующие стили(стили можете прописать свои, главное оставить классы none .login_box_center и .masck .none)

 

Добавим ссылку при нажатии на которую будет всплывать наша форма.

 

Вы можете разместить ее в любом месте, или даже вообще не использовать ссылку, а например картинку, главное добавить к элементу id=»login-ajax»

Теперь нам нужно прописать код js для того что бы наша форма открывалась и скрывалась(скрывалась по нажатию ссылки «Закрыть»).

Для этого создадим .js файл в корневой попки вашей темы, назовем его ajax_form.js.

Подключим js файл к нашему шаблону, для этого в файле functions.php пропишите следующий код:

 

Добавим следующий код открытия и закрытия формы:

 

И так у нас есть форма которая открывается и закрывается. Теперь можно делать проверку на правильность ввода данных в нашу форму. Для этого нам нужно в файле ajax_form.js дописать после комментария следующий код:

 

Теперь наша форма может послать запрос на проверку данных, осталось прописать саму проверку на php для этого в файл functions.php добавьте следующую функцию:

 

Вот и все! Форма готова!

Если у вас возникли трудности или вопросы, можете задать их в комментариях.


4 комментария

  • Seosko 18.05.2015

    Очень отличное и простое решение, давно искал подробную инфу по реализации регистрации и авторизации, спс.

  • Дмитрий 12.01.2016

    Было бы здорово еще ссылку на пример работающего скрипта, и архив для скачивания. А то многие скрипты мучаешься, собираешь, а запустить не можешь. Время жалко. А скрипт наверное прикольный у вас.

    • trubine 13.01.2016

      По моему все расписано что куда копировать, если есть вопросы — задавайте.
      По примеру, не могу предоставить так как на своих сайтах — нет, а предоставить сайт заказчика — так же не могу(ему это не понравится).

      • Дмитрий 13.01.2016

        Я не смог его собрать. Согласен, что програмюга из меня не ахти. Но если бы было хотя-бы расписано полностью по файлам, то было бы проще.

Добавить комментарий

Войти с помощью: