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

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

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

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

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

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

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

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

Узнать подробнее

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

Нам нужна основа; давайте создадим разметку. Откройте header.php и куда угодно поместите следующий фрагмент.

Заметьте, что я пользуюсь display:none, чтобы вначале скрыть форму.

Шаг 2. CSS

CSS довольно прост; я всего лишь быстро моделирую форму в PhotoShop’.

Форма за исключением дизайна выглядит следующим образом: (обратите внимание, для проверки стилей я переместил display:none в разметке)

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

Далее начнем отделывать свой блок.

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

Теперь я, применив немного фантазии, назначаю стили текстовым input-ам.

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

Теперь я задаю стили кнопке, заменяя изображением кнопку по умолчанию, и добавляю к ней состояние наведенной мыши (hover).

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

Наконец, мы добавляем немного общих стилей.

Воля! Вот наша форма. Теперь давайте при помощи jQuery продвигать функциональность.

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

Шаг 3. jQuery

Сначала нужно включить jQuery в WordPress. Чтобы сделать это, мы должны поместить следующую порцию кода перед тэгом внутри файла header.php. Помните о том, что сам по себе WordPress использует jQuery, и нам потенциально не нужно его скачивать дважды!

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

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

Узнать подробнее

Скачайте Fancybox и поместите его в папку с WordPress. Чтобы еще лучше все упорядочить, я создал папку “Includes”.

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

Далее, откройте свой файл footer.php и поместите перед тэгом следующее

А теперь давайте вызовем метод fancybox; поместите это после вышеуказанного кода и перед закрывающим тэгом body.

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

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

Шаг 4. WordPress

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

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

И:

Окончательный код должен выглядеть так:

Пожалуйста, обратите внимание, что на самом деле важно и необходимо – чтобы в качестве 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

Узнать подробнее

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

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

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

Метки: , ,

Похожие статьи:

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

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

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

  1. Сергей

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

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

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

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

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

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

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

  5. Зоя

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

    • RohViktor

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

  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 class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree