Форма реєстрації на WordPress

116

Від автора: У цьому уроці я покажу в деталях процес створення красивої форми реєстрації для WordPress, «Register» з використанням Fancybox, jQuery, CSS. Ви побачите, що ця процедура насправді досить проста.

Крок 1. Розмітка форми реєстрації WordPress

По-перше, давайте розмістимо кнопку вгорі сторінки, замінивши в основі набір за умовчанням.

Register

Зверніть увагу, що гіперпосилання href (#register-form) кнопці реєстрації має той же ID, що і форму нижче. Також ми користуємося класом “.show» для виклику FancyBox за допомогою jQuery.

Форма реєстрації на WordPress

Нам потрібна основа; давайте створимо розмітку. Відкрийте header.php і куди завгодно помістіть наступний фрагмент.

Register your Account

Sign Up with us and Enjoy!

A password will be e-mailed to you.

Зауважте, що я користуюся display:none, щоб спочатку сховати форму.

Крок 2. CSS

CSS досить простий; я всього лише швидко моделюю форму в PhotoShop’.

Форма за винятком дизайну виглядає наступним чином: (зверніть увагу, для перевірки стилів я перемістив display:none у розмітці)

Форма реєстрації на WordPress

Далі почнемо обробляти свій блок.

div#register-form {
width: 400px;
overflow: hidden;
height: 230px;
position: relative;
background: #f9f9f9 url(images/secure.png) no-repeat 260px 40px;
font-family: Helvetica Neue, Helvetica, Arial !important;
}

Форма реєстрації на WordPress

Тепер я, застосувавши трохи фантазії, призначаю стилі текстовим input-ам.

div#register-form input[type=»text»] {
display: block;
border: 1px solid #ccc;
margin: 5px 20px;
padding: 9px 4px;
-moz-border-radius: 4px;
-webkit-border-radius:4px;
width: 200px;
font-family: Helvetica Neue, Helvetica, Arial !important;
}
div#register-form input[type=»text»]:hover {
border-color: #b1b1b1;
}
div#register-form input[type=»text»]:focus {
-moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
}

Форма реєстрації на WordPress

Тепер я ставлю стилі кнопці, замінюючи зображенням кнопку за замовчуванням, і додаю до неї стан наведеної миші (hover).

div#register-form input[type=»submit»]#register {
background: url(images/register.jpg) no-repeat;
border: 0;
clear: both;
cursor: pointer;
height: 31px;
overflow: hidden;
position: relative;
left:295px;
text-indent: -9999px;
top:42px;
ширина:92px;
}
div#register-form input[type=»submit»]#register:hover {
background-position: 0 -32px;
}

Форма реєстрації на WordPress

Нарешті, ми додаємо трохи загальних стилів.

div#register-form span {
display: block;
margin-bottom: 22px;
}
div#register-form div.title {margin-left:15px}
div#register-form div.title h1,
div#register-form div.title span {text-shadow:1px 1px 0px #fff}
div#register-form div.title h1 {
margin:7px 0;
}
p.statement {
position:absolute;
bottom:-2px;
left:10px;
font-size:.9em;
color:#6d6d6d;
text-shadow:1px 1px 0px #fff;
}

Воля! Ось наша форма. Тепер давайте за допомогою jQuery просувати функціональність.

Форма реєстрації на WordPress

Крок 3. jQuery

Спочатку потрібно включити jQuery в WordPress. Щоб зробити це, ми повинні помістити наступну порцію коду перед тегом всередині файлу header.php. Пам’ятайте про те, що сам по собі WordPress використовує jQuery, і нам потенційно не потрібно завантажувати двічі!

Скачайте Fancybox і помістіть його в папку з WordPress. Аби ще краще все упорядкувати, я створив папку «Includes».

Форма реєстрації на WordPress

Далі, відкрийте файл footer.php і помістіть перед тегом наступне


А тепер давайте викличемо метод fancybox; помістіть це після вищевказаного коду і перед закриваючим тегом body.

jQuery(document).ready(function() {
jQuery(".show").fancybox({
'titleShow' : 'false',
'transitionIn' : 'fade',
'transitionOut' : 'fade'
});
});

Ми закінчили! Наша форма створена; на закінчення нам потрібно всього лише передати необхідну інформацію WordPress, щоб вона нормально працювала.

Форма реєстрації на WordPress

Крок 4. WordPress

У цьому немає нічого дивного; нам потрібні всього лише два фрагменти WordPress, прихованих всередині файлу wp-login.php.

Перший фрагмент:

І:

Остаточний код повинен виглядати так:

Register your Account

Sign Up with us and Enjoy!

A password will be e-mailed to you.

Будь ласка, зверніть увагу, що насправді важливо і необхідно, щоб в якості name ID у вашому текстовому input-е було саме user_login; те ж саме вірно і для input — a електронної пошти. Інакше нічого не буде працювати.

І на цьому ми закінчили!

Форма реєстрації на WordPress

Висновок

З крихіткою коду і легкої коригуванням, ми змогли побудувати відмінно виглядає форму реєстрації для WordPress без плагінів, для своїх користувачів. Як ви вважаєте?

Переклад і редакція: Ріг Віктор і Андрій Бернацький. Команда webformyself.

E-mail: [email protected]

Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування

P. S. Хочете опублікувати цікавий тематичний матеріал і заробити? Якщо відповідь «Так», то тисніть сюди.