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

1552

Від автора: У цьому уроці я покажу в деталях процес створення красивої форми реєстрації для 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 і помістіть перед тегом наступне