Всплывающая форма входа для wordpress без плагина


Всплывающая форма входа для wordpress без плагина

Форма входа штука очень нужная, но вот беда занимает место, где можно было бы дополнительно разместить порцию полезной информации. Особенно остро это ощущается на двух колоночных блогах. Когда текста мало, а прочей информации (меню, реклама и т.п.) на боковой панели много, получается очень некрасивая страница, а тут еще и эта форма входа. Можно существенно усовершенствовать эту форму входа, используя различные плагины, один из них плагин SimpleModal Login, который избавит вас от вышеперечисленных проблем.

Но недавно меня спросили, а как сделать всплывающую форму входа для wordpress без плагина? И именно в сегодняшнем видеоуроке я покажу Вам, как это сделать. Поехали…

Видеоурок: Всплывающая форма входа для wordpress без плагина

Спойлер

1. Создаем функцию с формой входа

Разработку нашей красивой всплывающей формы входа для wordperss мы начнем с создания функции отвечающую за все это дело.
Заходим в файл functions.php вашей темы и в самый низ вставляем код:

2. Выводим всплывающую форму в шаблоне

Рассмотрим на примере вставки формы в sidebar.php, открываем данный файл и в нужном месте вставте код:

Данную форму можно вписать в любое место вашего шаблона, если есть начальные знания HTML и CSS.

3. Подключаем javascript-ы

Что бы наша форма всплывала в модальном окне нам надо подключить библиотеку Jquery и javascript в файл header.php.

Проверьте, если библиотека Jquery подключена в вашем шаблоне, то данный код не надо вставлять:

Далее подключаем скрипт который и делает наше модальное окно:

4. CSS свойства

Куда же без них в наше время открываем файл style.css и втравляем нижеприведенный код:

Вот и все быстрей смотрите, что у Вас получилось. Теперь Вы знаите и умеете делать всплывающую форму входа для wordpress без плагина.

Не забываем оставлять комментарии и задавать новые вопросы нашему желтому помощнику миньену.


Понравился пост, подпишись на обновления

Понравилась статья? Получай свежие статьи первым по e-mail

[newsletter_signup_form id=0]

47 раз(а) написали о “Всплывающая форма входа для wordpress без плагина

  1. Лишние плагины для wordpress тормозят загрузку страниц. Спасибо автору за исходники формы входа — штука выходит удобная, да и такой глаз радует!

    Ответить
  2. Ой, как у вас тут все сложно. А не проще сделать какую-нибудь точку-запятую ссылкой на страницу http://ваш_сайт.ru/wp-login.php? Спрятать ее где-нибудь, и все дела, как вы считаете?

    Ответить
    • Не совсем понял в чем сложность?

      Ответить
  3. Ну, в шаблоне надо что-то там менять, если навыков нет, еще что-нибудь не то поменяешь…
    Я у себя в блоге вообще регистрацию отменила, получается, что вход нужен только для админа. А я его наизусть помню 🙂

    Ответить
  4. Здравствуйте!!! Хотелось бы узнать, а как на своём блоге Вы разместили Авторизация, с помощью плагина или кода в дизайне? Если есть видеоурок, дайте ссылку. Ещё один вопрос, юзеров кем вы назначаете по умолчанию, автором или участником. Если я ставлю автором, то моего юзера выбрасывает на страницу автор, а там пусто… если ставлю участником, то в админку. И вот ещё назрел вопрос, админку я закрыл логином и паролем, и юзеры соответственно не попадают туда, их вообще не пускает и сайт выдаёт ошибку. Как тогда защитить админку, но при этом не препятствовать юзеру писать статью.
    Ещё мне понравилось у вас в админке как пользователю, нет ничего лишнего (администраторского), как это сделать?

    Ответить
  5. Здравствуйте! Тема моего WordPress-сайта сделана программой Artisteer и немного доработана мною в ручную. Когда я вставляю код в functions.php мой сайт перестаёт функционировать (ошибка в файле функций, в следствии чего не открывается ни одна страница). Помогите, я вставлял код в самые разные места функций, ничего не получалось. Каждый раз приходится загружать файл по FTP и делать откат изменений.

    Ответить
      • Как я писал в новостях я был в отпуске и не мог ответить вам. что бы разобраться мне надо смотреть ваш шаблон. Если хотите можете прислать его мне на почту в свободное время я его посмотрю.

        Ответить
        • давайте я скину вам файл функции, а вы мне вставите туда код с соблюдением всех правил PHP, а то мои знания в HTML и CSS ну никак не помогают мне правильно вставить код

          Ответить
  6. Действительно классная форма. Вот бы ещё на joomla такую !

    Ответить
    • У меня не работала почта в связи переездом на другой хостинг. Что бы лучше разобраться в вашей проблеме мне нужен полностью ваш шаблон.

      Ответить
    • У меня ваш шаблон сразу не работает. Выдает ошибку в header.php. И еще найдите себе нормальный шаблон, а то у вас везде trial написано на шаблоне.

      Ответить
  7. Когда я в файле темы functions.php добавляю код функции, который вы дали, все ломается и выдает серверную ошибку.. Может это из-за версии WordPress? У меня стоит 3.4.2

    Ответить
    • Точно не скажу я делал эту форму на версии 3.4.1, но я думаю это не из-за версии движка. Скорей всего Вы не в то место вставляете код.

      Ответить
  8. Добрый времени суток. Игорь могли бы вы мне посоветовать как реализовать в теме в functions.php возможность изменить фон а заодно и css для стандартной формы входа? Сразу для разъясню у меня там в functions.php есть уже такая возможность как замена ВП логотипа на свой который всегда лежит в теме. То есть мне не надо менять ядро cms, хотя это для меня не проблема но как вы сами понимаете после обновления всё придется делать по новой (можно конечно копировать редактированные файлы обратно после обновы), но если там произошли большие изменения и старый файл может привести к ошибкам? Тогда надо снова ручками править код.
    Вот пример кода который реализовывает подмену стандартного логотипа в форме входа-регистрации на мой

    Ответить
    • Вот пример кода который реализовывает подмену стандартного логотипа в форме входа-регистрации на мой

      Как это сделать описано в этой статье Замена логотипа wordpress, так же там написано ка можно изменить и цвет фона.

      Ответить
  9. Спасибо большое я в вас верил 😉
    Изменил форму входа и регистрации полностью под себя, теперь не страшно, что после обновления придётся снова править ядро, тема будет автоматом менять. Спасибо

    Ответить
  10. Сделала все по инструкции. Сразу же и админка и сайт перестала работать. Версия WP 3.4.2. В чем может быть причина?

    Ответить
    • Елена скорей всего вы не в том месте вставляете код.

      Ответить
      • та же проблема! на самом деле виноват код функции, который коректно вставляется в файлы functions.php далеко не всех тем. У меня аналогичная проблема, нужно исправить открывающие и закрывающие php-теги в функции, сейчас потею, не отказался бы от помощи ^_^

        Ответить
  11. Игорь, подскажи почему после вставки функции в functions.php сайт вообще перестаёт загружаться. Уже всю голову сломал.

    Ответить
    • Как написал ниже была ошибка проверь работу сейчас.

      Ответить
  12. В коде, который надо добавить в functions.php (у вас тут 9 строка)

    выдает ошибку и скрипт не работает. Вернее весь сайт перестал работать. Где ошибка? Подскажите, пожалуйста.

    Ответить
    • Подправил код проверяйте.

      Ответить
    • Спасибо. Я тут заметила еще кое-что. Мы скрипт закрываем
      и после него еще пишем дальше код. У вас в 5 строке (скрипт, который подключаем в шапку). Это так задумано 😉 ? Если нет, то исправьте, пожалуйста. Бо если задумано — скрипт не работает.

      Ответить
      • Без этой строки не будет работать переадресация на страницу регистрации. Если это строка уже присутствует у Вас шапке шаблона, то может убрать её.

        Ответить
  13. Здравствуйте. После вставки кода в functions.php сайт слетел. После перезаписи файла на новый из бэкапа ошибка не устранилась, но поменялась немного. Что подскажите?

    Ответить
    • Значит ошибка не из-за этого кода. У вас ошибка в 42 строке и связана с БД.

      Ответить
      • Ну да. Сначала была ошибка в тысяча какой-то строке. Потом я перезаписал functions.php, и теперь эта проблема…Как ее решить?

        Ответить
  14. Здравствуйте,я просто установил плагин SimpleModal Login,Но он не работает т.е кнопка на сайте не появляется,хотя я его активировал, в виджетах его тоже нету помогите плиз(

    Ответить
    • Я не знаю что у вас с плагином, там должен быть виджет входа.

      Ответить
      • Я скачал с вашего сайта, как виджет называется? Я искал в виджетах

        Ответить
        • Что Вы скачали у меня на сайте?

          Ответить
          • Ой простите точнее скачал плагин с офф сайта wordpress

            Ответить
  15. Спасибо! Очень полезная информация

    Ответить
  16. А можно както такую форму авторизацию в виджет «запихнуть»?

    Ответить
    • Да можно, только надо немного подправить функцию. Если интересно как, по оформите этот вопрос в сообщение на форуме по wordpress в разделе Доработки и советы по улучшению

      Ответить
  17. Спасибо за пример.
    Скажите, а как в ваш пример впихнуть в капчу при авторизации вида вопрос-ответ?
    +
    Работает ли ваше решение на WP 4.1?
    И еще раз спасибо.

    Ответить
  18. Сделал все как описано и сказано в видео. Форма не работает. Окно не всплывает. В чем может быть проблема? Версия блога 4.6.1 Тема фришная. Скрипты все подключал. И еще у вас в 3 пункте про скрипты ошибка. Вы не закрыли тег скрипта. А точнее закрыли, только очень рано. Поправьте пожалуйста.

    Ответить
  19. Еще такой момент. Когда жмакаешь по кнопке регистрация то выходит ссылка в адресной строке /login/?action=register Пишет страница не найдена. В чем причина, как устранить и что должно там быть. Форма работает но опять же ошибка в коде $(‘body’).append(»); теги были на другой строке.

    Ответить
  20. Исправить надо на wp-login.php?action=register

    Ответить
  21. И еще крестик который должен закрывать окно не закрывает его. Просто добавляет ШАРП к УРЛ. И все. Попробуйте потестировать этот скрипт на теме Sarina. Может доработки какие внесли бы.

    Ответить

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

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

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.