Маленькая подсказка: как «с нуля» сделать необычную форму регистрации WordPress.

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

Шаг 1. Разметка

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

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

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

Нам нужна основа; давайте создадим разметку. Откройте 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 -->

Заметьте, что я пользуюсь 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;
}

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

Теперь я задаю стили кнопке, заменяя изображением кнопку по умолчанию, и добавляю к ней состояние наведенной мыши (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 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, и нам потенциально не нужно его скачивать дважды!

<?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'
			});
		});

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

Шаг 4. WordPress

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

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

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

И:

<?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 -->

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

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

Заключение

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

Автор: Ivor Padilla

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

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

E-mail: contact@webformyself.com

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

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

Подписаться

Поделиться

Метки: Javascript&Ajax, wordpress, wordpress форма регистрации