От автора: В этом уроке я продемонстрирую в деталях процесс создания красивой формы регистрации для 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»
Изучите курс и научитесь создавать мультиязычные темы с нестандартной структурой страниц
Скачать курс
Нам нужна основа; давайте создадим разметку. Откройте 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»
Изучите курс и научитесь создавать мультиязычные темы с нестандартной структурой страниц
Скачать курс| 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.
Источник: http://net.tutsplus.com
E-mail: contact@webformyself.com
Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения
P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.
Бесплатный курс «Основы создания тем WordPress»
Изучите курс и научитесь создавать мультиязычные темы с нестандартной структурой страниц
Скачать курс
Проверка формы без перезагрузки с помощью JavaScript
Посмотрите видео по организации динамической работы с формами!
Смотреть
Да……….я пропустил массу уроков……………..много что не понял.
Есть список всех уроков?
Базовый курс:
Возможно ли для моделирования форм ипользование не «фотошоп», а другого графического редактора, например «пайт нета»? Вобще-то сам попробую, мне кажется должно получиться.
Отпишите ответ обязательно. В смысле получилось или нет.
Да, Виктор, обязательно сообщю.
Ув Юрий! Не подскажите , где поподробней о программке прочесть?
Спасибо за ответ.
Потрясающе интересно и на редкость понятно изложено. Спасибо!
А мне вот ничего не понятно, хоть я и не блондинка. Более популярно можно где-нибудь прочитать? А вообще есть предложение. Отрабатывайте Ваши уроки на мне. Чем более понято будет, тем больше посетителей на блоге будет.
Примем к сведению.
Я заказала у вас курс «Киберсант-Вебмастер», жаль если всё так будет сложно описано.
Да, как раз-таки, изучив курс «Киберсант-вебмастер», для Вас это будет детский сад. Поверьте:)
Сюда, как я поняла, (в форму) можно вставить и русcкие буквы?
В место:
и: value=»Username»
value=»Имя»
Я правильно поняла, будет по русски выглядеть форма заполнения?
И я тоже заказала Ваш курс:)
Жду с нетерпением!
Да, совершенно верно. Value указывает тот текст который будет передан на сервер. И указание его, как атрибута тега, говорит о том, какая информация по умолчанию будет отображена в поле input с type=’text/password’. Для флажков и переключателей (input type=»checkbox | radio») уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно установить, какой пункт выбрал пользователь. Для кнопок (input type=»button | reset | submit»), устанавливает текст той надписи, которая будет отображена на кнопке.
Ребята!Все хорошо.Одно пожелание:уроки по работе с изображениями сделать так, как были сделаны уроки 1-5 (удобное видео)
С уважением Оробей Олег.
Нашел косяк в тексте: часто пишете «перед тэгом», но не указываете перед каким именно.
Пришлось лезть в оригинал статьи, там всё есть.
В любом случае, спасибо за полезную и актуальную для меня информацию!
Второе, с чем столкнулся — код для footer.php не полный.
1. пришлось править названия файлов для текущей версии
2. код JQuery необходимо заключить в тег :
jQuery(document).ready(function() {
jQuery(«.show»).fancybox({
‘titleShow’ : ‘false’,
‘transitionIn’ : ‘fade’,
‘transitionOut’ : ‘fade’
});
});
После этого всё заработало
из предыдущего сообщения робот выкусил тэг «script»…
Отличный сайт! Админ молодец! Так держать!
Понравился урок. Полезно изучить.
c непрывычки сложно
Подскажите, как сделать так же регистрацию и восстановление пароля?
Все красиво жаль только не работает, ошибка 504 после отправки формы