Форма регистрации на 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 и куда угодно поместите следующий фрагмент.

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

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

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

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

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

Узнать подробнее
<?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. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

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

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

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Проверка формы без перезагрузки с помощью 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