Форма регистрации на WordPress

Дата публикации: 2010-10-23

форма регистрации

От автора: В этом уроке я продемонстрирую в деталях процесс создания красивой формы регистрации для WordPress, «Register» с использованием Fancybox, jQuery и CSS. Вы увидите, что эта процедура в действительности довольно проста.

Шаг 1. Разметка формы регистрации WordPress

Во-первых, давайте разместим кнопку наверху страницы, заменив в основе набор по умолчанию.

<div id="registration"><a class="show register-button" href="#register-form">Register</a></div>

1	<div id="registration"><a class="show register-button" href="#register-form">Register</a></div>

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

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее

форма регистрации

Нам нужна основа; давайте создадим разметку. Откройте header.php и куда угодно поместите следующий фрагмент.

<div style="display:none"> <!-- Registration -->
  <div id="register-form">
  <div class="title">
 <h1>Register your Account</h1>
 <span>Sign Up with us and Enjoy!</span>
  </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 -->

<h1>Register your Account</h1>

<span>Sign Up with us and Enjoy!</span>

</div>

<hr />

<p class="statement">A password will be e-mailed to you.</p>

</form>

</div>

</div>

Заметьте, что я пользуюсь display:none, чтобы вначале скрыть форму.

Шаг 2. CSS

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

Форма за исключением дизайна выглядит следующим образом: (обратите внимание, для проверки стилей я переместил display:none в разметке)

форма регистрации

Далее начнем отделывать свой блок.

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;
}

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;

}

форма регистрации

Теперь я, применив немного фантазии, назначаю стили текстовым 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;
}

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;

}

форма регистрации

Теперь я задаю стили кнопке, заменяя изображением кнопку по умолчанию, и добавляю к ней состояние наведенной мыши (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;
 width:92px;
}
div#register-form input[type="submit"]#register:hover {
 background-position: 0 -32px;
}

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;

}

форма регистрации

Наконец, мы добавляем немного общих стилей.

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;
}

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. Чтобы сделать это, мы должны поместить следующую порцию кода перед тэгом внутри файла header.php. Помните о том, что сам по себе WordPress использует jQuery, и нам потенциально не нужно его скачивать дважды!

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее

<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>

1 2	<?php wp_enqueue_script("jquery"); ?> <?php wp_head(); ?>

Скачайте Fancybox и поместите его в папку с WordPress. Чтобы еще лучше все упорядочить, я создал папку “Includes”.

форма регистрации

Далее, откройте свой файл footer.php и поместите перед тэгом следующее

<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; поместите это после вышеуказанного кода и перед закрывающим тэгом body.

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

jQuery(document).ready(function() {

jQuery(".show").fancybox({

'titleShow' : 'false',

'transitionIn' : 'fade',

'transitionOut' : 'fade'

});

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

форма регистрации

Шаг 4. WordPress

В этом нет ничего удивительного; нам нужны всего лишь два фрагмента WordPress, скрытых внутри файла wp-login.php.

Первый фрагмент:

<?php echo site_url('wp-login.php?action=register', 'login_post') ?>

1	<?php echo site_url('wp-login.php?action=register', 'login_post') ?>

И:

<?php do_action('register_form'); ?>

1	<?php do_action('register_form'); ?>

Окончательный код должен выглядеть так:

<div style="display:none"> <!-- Registration -->
  <div id="register-form">
  <div class="title">
 <h1>Register your Account</h1>
 <span>Sign Up with us and Enjoy!</span>
  </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 -->

<h1>Register your Account</h1>

<span>Sign Up with us and Enjoy!</span>

</div>

<form action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" method="post">

<?php do_action('register_form'); ?>

<hr />

<p class="statement">A password will be e-mailed to you.</p>

</form>

</div>

</div>

Пожалуйста, обратите внимание, что на самом деле важно и необходимо – чтобы в качестве name и ID в вашем текстовом input-е было именно user_login; то же самое верно и для input — a электронной почты. Иначе ничего не будет работать.

И на этом мы закончили!

форма регистрации

Заключение

С крохой кода и легкой корректировкой, мы смогли построить отлично выглядящую форму регистрации для WordPress без плагинов, для своих пользователей. Как вы считаете?

Автор: Ivor Padilla

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

Источник: http://net.tutsplus.com

E-mail: contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее