Profile Builder отличный плагин для создания форм входа, регистрации и редактирования профиля с фронт-енда. Скачать плагин можно на официальном сайте WordPress. О его работе написано множество статей и останавливаться на этом я не буду.
При работе с плагином я столкнулась с тем, что у бесплатной версии форма входа выглядит очень просто и непрезентабельно.
Поэтому я слегка доработала ее внешний вид. Вашему вниманию представляю совсем незначительные изменения, так сказать базовые. При желании вы можете доработать CSS в зависимости от дизайна вашего сайта. Форма входа для плагина Profile Builder описанная в этой статье будет выглядеть так:
Изменения
- После формы добавить небольшой javascript. Это нужно чтобы прописть атрибуты placeholder в полях формы и при этом не редактировать сам плагин.
1234<script>document.getElementById('user_login').placeholder='Логин или e-mail';document.getElementById('user_pass').placeholder='Пароль';</script>
Если форма находится на всех страницах сайта, например в шапке или сайдбаре, то лучше всего этот скрипт добавлять в шаблон footer.php. Если форма находится на отдельной странице, тогда этот скрипт нужно добавить на эту страницу после формы входа.
- Добавить приведенные ниже CSS стили в style.css. В моем примеры главное не свойства и значения стилей, а названия их классов. Зная названия, можно будет создать любые стили.
12345678910111213141516171819202122232425262728293031323334/* ФОРМЫ ВХОДА PROFILE BUILDER *//* Базовые стили формы */.wppb-user-forms {margin:0 auto;max-width:95%;box-sizing:border-box;padding:20px;border-radius:5px;background:RGBA(255,255,255,1);-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .45);box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .45);}/* Прячем ненужные label */.wppb-user-forms form p.login-username label, .wppb-user-forms form p.login-password label {display: none;}/* Стили полей ввода */.wppb-user-forms form p input.input {height:50px;width:100%!important;border-radius:3px;border:rgba(0,0,0,.3) 2px solid;box-sizing:border-box;font-family: 'Open Sans', sans-serif;font-size:18px;padding:10px;margin-bottom:30px;}/* Акцент стилей полей ввода */.wppb-user-forms form p input.input:focus {outline:none;border:rgba(24,149,215,1) 2px solid;color:rgba(24,149,215,1);}
Вот такой получился у меня вариант. Думаю, что отредактировать стили CSS не составит труда.
То что надо!
Очень удачно нашел. Именно то что надо. Умничка. Спасибо!
Спасибо!