В этом уроке я проведу вас через процесс создания красивой формы «Регистрация» с использованием Fancybox , jQuery и, конечно же, WordPress. Как вы увидите, процесс действительно довольно прост.
Шаг 1. Разметка
Во-первых, давайте разместим нашу кнопку в верхней части страницы, заменив описание по умолчанию в теме.
|
1
|
<div id=»registration»><a class=»show register-button» href=»#register-form»>Register</a></div>
|
Обратите внимание, что в кнопке регистрации, href (# register-form) — это тот же идентификатор, что и в форме ниже. Мы также используем класс «.show» для вызова FancyBox с помощью jQuery.
Нам нужна наша база; давайте создадим нашу разметку. Откройте header.php и разместите следующий фрагмент кода в любом месте.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
<div style=»display:none»> <!— Registration —>
<div id=»register-form»>
<div class=»title»>
<h1>Register your Account</h1>
<span>Sign Up with us and Enjoy!
</div>
<form action=»» method=»post»>
<input type=»text» name=»» value=»Username» id=»» class=»input»/>
<input type=»text» name=»» value=»E-Mail» id=»» class=»input» />
<input type=»submit» value=»Register» id=»register» />
<hr />
<p class=»statement»>A password will be e-mailed to you.</p>
</form>
</div>
</div><!— /Registration —>
|
Обратите внимание, что я использую display: none, чтобы изначально скрыть форму.
Шаг 2. CSS
CSS довольно прост; Я просто делаю дизайн быстрой формы в PhotoShop.
Форма, за исключением стиля, выглядит следующим образом: (обратите внимание, что я удалил отображение: нет в разметке, чтобы проверить мои стили)
Давайте теперь начнем стилизацию нашей коробки.
|
1
2
3
4
5
6
7
8
|
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;
}
|
Продолжая, я теперь стилизую ввод текста, добавив немного фантазии.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
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;
}
|
Теперь я сделаю стиль кнопки, добавив состояние наведения и заменив кнопку по умолчанию изображением.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
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;
width:92px;
}
div#register-form input[type=»submit»]#register:hover {
background-position: 0 -32px;
}
|
Наконец, мы добавим некоторые общие стили.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
|
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.
Шаг 3. JQuery
Во-первых, нам нужно включить jQuery в WordPress. Чтобы добиться этого, нам нужно поместить следующий фрагмент кода перед тегом <head> в файле header.php. Помните, поскольку сам WordPress использует jQuery, мы не хотим потенциально загружать его дважды!
|
1
2
|
<?php wp_enqueue_script(«jquery»);
<?php wp_head();
|
Загрузите Fancybox и поместите его в папку WordPress. Чтобы упорядочить вещи, я создал папку «Включает».
Затем откройте файл footer.php и поместите следующее перед концом тега </ body>.
|
1
2
3
4
|
<link rel=»stylesheet» type=»text/css» href=»<?php bloginfo(‘template_url’); ?>/includes/fancybox/jquery.fancybox-1.3.1.css» media=»screen» />
<!— Javascript —>
<script type=»text/javascript» src=»<?php bloginfo(‘template_url’); ?>/includes/fancybox/jquery.mousewheel-3.0.2.pack.js»></script>
<script type=»text/javascript» src=»<?php bloginfo(‘template_url’); ?>/includes/fancybox/jquery.fancybox-1.3.1.pack.js»></script>
|
А теперь давайте вызовем метод fancybox; вставьте это после кода выше и перед закрывающим тегом тела.
|
1
2
3
4
5
6
7
|
jQuery(document).ready(function() {
jQuery(«.show»).fancybox({
‘titleShow’ : ‘false’,
‘transitionIn’ : ‘fade’,
‘transitionOut’ : ‘fade’
});
});
|
Были сделаны! Наша форма была создана; наконец, нам просто нужно передать необходимую информацию WordPress, чтобы она функционировала правильно.
Шаг 4. WordPress
Здесь нет ничего фантастического; нам нужны только два фрагмента WordPress, спрятанные в файле wp-login.php.
Первый фрагмент:
|
1
|
<?php echo site_url(‘wp-login.php?action=register’, ‘login_post’) ?>
|
И:
|
1
|
<?php do_action(‘register_form’);
|
Окончательный код должен выглядеть так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
<div style=»display:none»> <!— Registration —>
<div id=»register-form»>
<div class=»title»>
<h1>Register your Account</h1>
<span>Sign Up with us and Enjoy!
</div>
<form action=»<?php echo site_url(‘wp-login.php?action=register’, ‘login_post’) ?>» method=»post»>
<input type=»text» name=»user_login» value=»Username» id=»user_login» class=»input» />
<input type=»text» name=»user_email» value=»E-Mail» id=»user_email» class=»input» />
<?php do_action(‘register_form’);
<input type=»submit» value=»Register» id=»register» />
<hr />
<p class=»statement»>A password will be e-mailed to you.</p>
</form>
</div>
</div><!— /Registration —>
|
Обратите внимание, что действительно важно и необходимо, чтобы user_login использовался в качестве имени и идентификатора при вводе текста; То же самое верно для ввода электронной почты. Иначе это не сработает.
И с этим мы закончили!
Вывод
С помощью небольшого кода и некоторых настроек нам удалось создать великолепную «Регистрационную форму» для наших пользователей. Как вы думаете?