От автора: В этом уроке я продемонстрирую в деталях процесс создания красивой формы регистрации для WordPress, «Register» с использованием Fancybox, jQuery и CSS. Вы увидите, что эта процедура в действительности довольно проста.
Шаг 1. Разметка формы регистрации WordPress
Во-первых, давайте разместим кнопку наверху страницы, заменив в основе набор по умолчанию.
|
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 и куда угодно поместите следующий фрагмент.
|
1 2 3 4 5 6 7 8 9 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!</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 в разметке)
Далее начнем отделывать свой блок.
|
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; } |
Теперь я, применив немного фантазии, назначаю стили текстовым input-ам.
|
1 2 3 4 5 6 7 8 9 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; } |
Теперь я задаю стили кнопке, заменяя изображением кнопку по умолчанию, и добавляю к ней состояние наведенной мыши (hover).
|
1 2 3 4 5 6 7 8 9 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; } |
Наконец, мы добавляем немного общих стилей.
|
1 2 3 4 5 6 7 8 9 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. Чтобы сделать это, мы должны поместить следующую порцию кода перед тэгом
внутри файла header.php. Помните о том, что сам по себе WordPress использует jQuery, и нам потенциально не нужно его скачивать дважды!
Бесплатный курс «Создание тем на WordPress. Быстрый старт»
Изучите курс и узнайте, как создавать уникальные темы на WordPress с нестандартной структурой страниц
Скачать курс|
1 2 |
<?php wp_enqueue_script("jquery"); ?> <?php wp_head(); ?> |
Скачайте Fancybox и поместите его в папку с WordPress. Чтобы еще лучше все упорядочить, я создал папку “Includes”.
Далее, откройте свой файл footer.php и поместите перед тэгом следующее
|
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; поместите это после вышеуказанного кода и перед закрывающим тэгом body.
|
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'); ?> |
Окончательный код должен выглядеть так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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.
Источник: //net.tutsplus.com
E-mail: contact@webformyself.com
Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения
P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.
Бесплатный курс «Создание тем на WordPress. Быстрый старт»
Изучите курс и узнайте, как создавать уникальные темы на WordPress с нестандартной структурой страниц
Скачать курс
Проверка формы без перезагрузки с помощью JavaScript
Посмотрите видео по организации динамической работы с формами!
Смотреть
Комментарии (23)