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

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

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

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

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

<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 электронной почты. Иначе ничего не будет работать.

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

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

Заключение

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

Автор: Ivor Padilla

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

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

E-mail: contact@webformyself.com

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

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

Проверка формы без перезагрузки с помощью JavaScript

Прямо сейчас посмотрите курс по организации динамической работы с формами!

Смотреть курс

Метки: , ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (23)

  1. Сергей

    Да……….я пропустил массу уроков……………..много что не понял.
    Есть список всех уроков?

  2. Юрий Рузаев

    Возможно ли для моделирования форм ипользование не «фотошоп», а другого графического редактора, например «пайт нета»? Вобще-то сам попробую, мне кажется должно получиться.

  3. игорь гольдберг

    Потрясающе интересно и на редкость понятно изложено. Спасибо!

  4. Галина Лушанова

    А мне вот ничего не понятно, хоть я и не блондинка. Более популярно можно где-нибудь прочитать? А вообще есть предложение. Отрабатывайте Ваши уроки на мне. Чем более понято будет, тем больше посетителей на блоге будет.

  5. Зоя

    Я заказала у вас курс «Киберсант-Вебмастер», жаль если всё так будет сложно описано.

    • Виктор Рог

      Да, как раз-таки, изучив курс «Киберсант-вебмастер», для Вас это будет детский сад. Поверьте:)

  6. Елена

    Сюда, как я поняла, (в форму) можно вставить и русcкие буквы?
    В место:

    и: value=»Username»
    value=»Имя»
    Я правильно поняла, будет по русски выглядеть форма заполнения?
    И я тоже заказала Ваш курс:)
    Жду с нетерпением!

    • Andrey Bernacki

      Да, совершенно верно. Value указывает тот текст который будет передан на сервер. И указание его, как атрибута тега, говорит о том, какая информация по умолчанию будет отображена в поле input с type=’text/password’. Для флажков и переключателей (input type=»checkbox | radio») уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно установить, какой пункт выбрал пользователь. Для кнопок (input type=»button | reset | submit»), устанавливает текст той надписи, которая будет отображена на кнопке.

  7. Олег

    Ребята!Все хорошо.Одно пожелание:уроки по работе с изображениями сделать так, как были сделаны уроки 1-5 (удобное видео)
    С уважением Оробей Олег.

  8. Александр

    Нашел косяк в тексте: часто пишете «перед тэгом», но не указываете перед каким именно.
    Пришлось лезть в оригинал статьи, там всё есть.
    В любом случае, спасибо за полезную и актуальную для меня информацию!

  9. Александр

    Второе, с чем столкнулся — код для footer.php не полный.
    1. пришлось править названия файлов для текущей версии
    2. код JQuery необходимо заключить в тег :

    jQuery(document).ready(function() {
    jQuery(«.show»).fancybox({
    ‘titleShow’ : ‘false’,
    ‘transitionIn’ : ‘fade’,
    ‘transitionOut’ : ‘fade’
    });
    });

    После этого всё заработало :)

  10. Александр

    из предыдущего сообщения робот выкусил тэг «script»…

  11. phelyeton

    Отличный сайт! Админ молодец! Так держать!

  12. Сергей

    Понравился урок. Полезно изучить.

  13. игорь

    c непрывычки сложно

  14. Сергей

    Подскажите, как сделать так же регистрацию и восстановление пароля?

  15. Александр

    Все красиво жаль только не работает, ошибка 504 после отправки формы

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree