Форма входа штука очень нужная, но вот беда занимает место, где можно было бы дополнительно разместить порцию полезной информации. Особенно остро это ощущается на двух колоночных блогах. Когда текста мало, а прочей информации (меню, реклама и т.п.) на боковой панели много, получается очень некрасивая страница, а тут еще и эта форма входа. Можно существенно усовершенствовать эту форму входа, используя различные плагины, один из них плагин SimpleModal Login, который избавит вас от вышеперечисленных проблем.
Но недавно меня спросили, а как сделать всплывающую форму входа для wordpress без плагина? И именно в сегодняшнем видеоуроке я покажу Вам, как это сделать. Поехали…
Видеоурок: Всплывающая форма входа для wordpress без плагина
[spoiler name=”Необходимые данныеДля открытия – нажмите“]
1. Создаем функцию с формой входа
Разработку нашей красивой всплывающей формы входа для wordperss мы начнем с создания функции отвечающую за все это дело.
Заходим в файл functions.php вашей темы и в самый низ вставляем код:
function author_log() { ?> <? if ( !is_user_logged_in() ): ?> <a href="#" rel="popup_name" class="poplight">Вход</a> <div id="popup_name" class="popup_block"> <form action="<?php echo wp_login_url(get_permalink()); ?>" id="loginForm" action="" method="post"> <div class="field"> <label>Имя пользователя:</label> <div class="input"> <input type="text" name="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" id="login" /></div> </div> <div class="field"> <a href="<?php bloginfo('url') ?>/login/?action=lostpassword" id="forgot">Забыли пароль?</a> <label>Пароль:</label> <div class="input"> <input type="password" name="pwd" value="" id="pass" /></div> </div> <div class="submit"> <button name="submit" type="submit">Войти</button> <label> <div style="font-size: 14px;padding: 5px;"><a href="<?php bloginfo('url') ?>/login/?action=register">Регистрация</a></div> </label></div> </form> </div> <? else: ?> <a href="#" rel="popup_name" class="poplight">Ваш профиль</a> <div id="popup_name" class="popup_block"> <div id="loginForm" action="" method="post"> <div class="cont-side"> <center><?php global $current_user; get_currentuserinfo(); echo get_avatar( $current_user->user_email, '96' ); ?> <span class="name"><?php global $user_login; get_currentuserinfo(); echo $user_login; ?></span> <?php global $user_ID; if( $user_ID ) : ?> <?php if( current_user_can('level_2') or current_user_can('level_10') ) : ?> <a href="<?php bloginfo('url') ?>/wp-admin/index.php">Администрирование</a> <?php else : ?> <?php endif; ?> <?php endif; ?> <a href="<?php bloginfo('url'); ?>/author/<?php echo $current_user->user_login; ?>">Профиль</a> | <a href="<?php bloginfo('url') ?>/wp-admin/profile.php" title="изменить">Изменить</a> </center> <div class="submit"><a href="<?php echo wp_logout_url( $redirect ); ?>" title="Выйти"><button name="submit" type="submit">Выйти</button></a> <div> <div> </div> </div> <? endif?> <?php }
2. Выводим всплывающую форму в шаблоне
Рассмотрим на примере вставки формы в sidebar.php, открываем данный файл и в нужном месте вставте код:
<h3 class="widget-title"><?php function author_lt() { ?> <? if ( !is_user_logged_in() ): ?> Авторизация <? else: ?> Ваш профиль <? endif?> <?php } ?> <?php author_lt(); ?></h3> <ul><?php author_log(); ?></ul>
Данную форму можно вписать в любое место вашего шаблона, если есть начальные знания HTML и CSS.
3. Подключаем javascript-ы
Что бы наша форма всплывала в модальном окне нам надо подключить библиотеку Jquery и javascript в файл header.php.
Проверьте, если библиотека Jquery подключена в вашем шаблоне, то данный код не надо вставлять:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Далее подключаем скрипт который и делает наше модальное окно:
<script type="text/javascript"> $(document).ready(function(){ $('a.poplight[href^=#]').click(function() { var popID = $(this).attr('rel'); var popURL = $(this).attr('href'); </script> $('#' + popID).fadeIn().prepend('<a href="#" class="close"><span class="close">Х</span></a>'); $('body').append(' <div id="fade"></div> '); $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); return false; }); $('a.close, #fade').live('click', function() { $('#fade , .popup_block').fadeOut(function() { $('#fade, a.close').remove(); }); return false; }); });
4. CSS свойства
Куда же без них в наше время открываем файл style.css и втравляем нижеприведенный код:
#fade { /*--Прозрачный слой фона--*/ display: none; /*--по умолчанию скрыты--*/ background: #000; position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: .80; z-index: 9999; } .popup_block{ left: 39%; margin: 0; position: fixed; top: -5px; z-index: 99999; display: none; } .close span{ margin: 200px 0 0 327px; position: fixed; } /*--Фиксированное позиционирование для тупого IE6--*/ *html #fade { position: absolute; } *html .popup_block { position: absolute; } #loginForm { width: 290px; padding: 24px 24px 0; margin: 200px auto 0; background: #FEFEFE; border: 1px solid #CAD8DE; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.08); font: 14px/18px Arial, Tahoma, sans-serif; color: #444; } #loginForm .field { margin: 0 0 18px; } #loginForm .field label { display: block; margin: 0 0 11px; } #loginForm .field .input { border-radius: 4px; } #loginForm .field input { font: 12px Arial, Tahoma, sans-serif; color: #444; width: 262px; padding: 9px 13px; border: 1px solid #D2D9DC; border-radius: 3px; box-shadow: inset 2px 2px 6px #EBEBEB, 0 0 0 5px #F7F9FA; outline: none; } #loginForm .field input:focus { border-color: #B7D4EA; box-shadow: inset 2px 2px 6px #EBEBEB, 0 0 4px #D0E6F6, 0 0 0 5px #F2F8FC; } #forgot { float: right; font-size: 11px; color: #ababab; text-decoration: none; margin: 0; } #forgot:hover { color: #444; text-decoration: underline; } #loginForm .submit { overflow: hidden; margin: 30px -24px 0; padding: 22px 24px; background: #F0F5F7; border-top: 1px solid #DDE0E8; border-radius: 0 0 4px 4px; box-shadow: inset 0 1px #FFF, inset -1px -1px #F7FAFB, inset 1px 0 #F7FAFB; font-size: 11px; } #remember { display: block; margin: 5px 0 0; cursor: pointer; } #remember input { margin: 0 4px 0 0; vertical-align: middle; } #loginForm .submit button { float: right; padding: 6px 20px; height: 30px; border-top: 1px solid #98CCE7; border-bottom: 1px solid #7DB0CC; border-left: 1px solid #8CBFD9; border-right: 1px solid #8CBFD9; border-radius: 15px; color: #FFF; font: bold 13px Arial, Tahoma, sans-serif; box-shadow: inset 0 1px #D4EBF7, 0 1px 3px #B8BEBE; background: -moz-linear-gradient(top, #badff3 0%, #7acbed 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#badff3), color-stop(100%,#7acbed)); background: -webkit-linear-gradient(top, #badff3 0%,#7acbed 100%); background: -o-linear-gradient(top, #badff3 0%,#7acbed 100%); background: -ms-linear-gradient(top, #badff3 0%,#7acbed 100%); background: linear-gradient(top, #badff3 0%,#7acbed 100%); background-color: #9FD7F0; cursor: pointer; text-shadow: 0 -1px rgba(0,0,0,0.15); outline: none; } #loginForm .submit button::-moz-focus-inner{border:0}
Вот и все быстрей смотрите, что у Вас получилось. Теперь Вы знаите и умеете делать всплывающую форму входа для wordpress без плагина.
[/spoiler]
Не забываем оставлять комментарии и задавать новые вопросы нашему желтому помощнику миньену.
48 комментариев
Лишние плагины для wordpress тормозят загрузку страниц. Спасибо автору за исходники формы входа – штука выходит удобная, да и такой глаз радует!
Ой, как у вас тут все сложно. А не проще сделать какую-нибудь точку-запятую ссылкой на страницу http://ваш_сайт.ru/wp-login.php? Спрятать ее где-нибудь, и все дела, как вы считаете?
Не совсем понял в чем сложность?
Ну, в шаблоне надо что-то там менять, если навыков нет, еще что-нибудь не то поменяешь…
Я у себя в блоге вообще регистрацию отменила, получается, что вход нужен только для админа. А я его наизусть помню 🙂
Здравствуйте!!! Хотелось бы узнать, а как на своём блоге Вы разместили Авторизация, с помощью плагина или кода в дизайне? Если есть видеоурок, дайте ссылку. Ещё один вопрос, юзеров кем вы назначаете по умолчанию, автором или участником. Если я ставлю автором, то моего юзера выбрасывает на страницу автор, а там пусто… если ставлю участником, то в админку. И вот ещё назрел вопрос, админку я закрыл логином и паролем, и юзеры соответственно не попадают туда, их вообще не пускает и сайт выдаёт ошибку. Как тогда защитить админку, но при этом не препятствовать юзеру писать статью.
Ещё мне понравилось у вас в админке как пользователю, нет ничего лишнего (администраторского), как это сделать?
Здравствуйте! Тема моего WordPress-сайта сделана программой Artisteer и немного доработана мною в ручную. Когда я вставляю код в functions.php мой сайт перестаёт функционировать (ошибка в файле функций, в следствии чего не открывается ни одна страница). Помогите, я вставлял код в самые разные места функций, ничего не получалось. Каждый раз приходится загружать файл по FTP и делать откат изменений.
Мне помогут?
Как я писал в новостях я был в отпуске и не мог ответить вам. что бы разобраться мне надо смотреть ваш шаблон. Если хотите можете прислать его мне на почту в свободное время я его посмотрю.
давайте я скину вам файл функции, а вы мне вставите туда код с соблюдением всех правил PHP, а то мои знания в HTML и CSS ну никак не помогают мне правильно вставить код
Действительно классная форма. Вот бы ещё на joomla такую !
Я отправил вам на почту ( info@studio-gost.ru ) 2 сообщения
У меня не работала почта в связи переездом на другой хостинг. Что бы лучше разобраться в вашей проблеме мне нужен полностью ваш шаблон.
Отправил на тот же адрес
Ну что там?
У меня ваш шаблон сразу не работает. Выдает ошибку в header.php. И еще найдите себе нормальный шаблон, а то у вас везде trial написано на шаблоне.
Когда я в файле темы functions.php добавляю код функции, который вы дали, все ломается и выдает серверную ошибку.. Может это из-за версии WordPress? У меня стоит 3.4.2
Точно не скажу я делал эту форму на версии 3.4.1, но я думаю это не из-за версии движка. Скорей всего Вы не в то место вставляете код.
Добрый времени суток. Игорь могли бы вы мне посоветовать как реализовать в теме в functions.php возможность изменить фон а заодно и css для стандартной формы входа? Сразу для разъясню у меня там в functions.php есть уже такая возможность как замена ВП логотипа на свой который всегда лежит в теме. То есть мне не надо менять ядро cms, хотя это для меня не проблема но как вы сами понимаете после обновления всё придется делать по новой (можно конечно копировать редактированные файлы обратно после обновы), но если там произошли большие изменения и старый файл может привести к ошибкам? Тогда надо снова ручками править код.
Вот пример кода который реализовывает подмену стандартного логотипа в форме входа-регистрации на мойКак это сделать описано в этой статье Замена логотипа wordpress, так же там написано ка можно изменить и цвет фона.
Спасибо большое я в вас верил 😉
Изменил форму входа и регистрации полностью под себя, теперь не страшно, что после обновления придётся снова править ядро, тема будет автоматом менять. Спасибо
Рад был помочь
Сделала все по инструкции. Сразу же и админка и сайт перестала работать. Версия WP 3.4.2. В чем может быть причина?
Елена скорей всего вы не в том месте вставляете код.
та же проблема! на самом деле виноват код функции, который коректно вставляется в файлы functions.php далеко не всех тем. У меня аналогичная проблема, нужно исправить открывающие и закрывающие php-теги в функции, сейчас потею, не отказался бы от помощи ^_^
Игорь, подскажи почему после вставки функции в functions.php сайт вообще перестаёт загружаться. Уже всю голову сломал.
Как написал ниже была ошибка проверь работу сейчас.
В коде, который надо добавить в functions.php (у вас тут 9 строка)
выдает ошибку и скрипт не работает. Вернее весь сайт перестал работать. Где ошибка? Подскажите, пожалуйста.
Подправил код проверяйте.
Спасибо. Я тут заметила еще кое-что. Мы скрипт закрываем
и после него еще пишем дальше код. У вас в 5 строке (скрипт, который подключаем в шапку). Это так задумано 😉 ? Если нет, то исправьте, пожалуйста. Бо если задумано – скрипт не работает.
Без этой строки не будет работать переадресация на страницу регистрации. Если это строка уже присутствует у Вас шапке шаблона, то может убрать её.
Здравствуйте. После вставки кода в functions.php сайт слетел. После перезаписи файла на новый из бэкапа ошибка не устранилась, но поменялась немного. Что подскажите?
Значит ошибка не из-за этого кода. У вас ошибка в 42 строке и связана с БД.
Ну да. Сначала была ошибка в тысяча какой-то строке. Потом я перезаписал functions.php, и теперь эта проблема…Как ее решить?
Отличная статья ➡ 5+
Здравствуйте,я просто установил плагин SimpleModal Login,Но он не работает т.е кнопка на сайте не появляется,хотя я его активировал, в виджетах его тоже нету помогите плиз(
Я не знаю что у вас с плагином, там должен быть виджет входа.
Я скачал с вашего сайта, как виджет называется? Я искал в виджетах
Что Вы скачали у меня на сайте?
Ой простите точнее скачал плагин с офф сайта wordpress
Спасибо! Очень полезная информация
А можно както такую форму авторизацию в виджет “запихнуть”?
Да можно, только надо немного подправить функцию. Если интересно как, по оформите этот вопрос в сообщение на форуме по wordpress в разделе Доработки и советы по улучшению
Спасибо за пример.
Скажите, а как в ваш пример впихнуть в капчу при авторизации вида вопрос-ответ?
+
Работает ли ваше решение на WP 4.1?
И еще раз спасибо.
Сделал все как описано и сказано в видео. Форма не работает. Окно не всплывает. В чем может быть проблема? Версия блога 4.6.1 Тема фришная. Скрипты все подключал. И еще у вас в 3 пункте про скрипты ошибка. Вы не закрыли тег скрипта. А точнее закрыли, только очень рано. Поправьте пожалуйста.
Еще такой момент. Когда жмакаешь по кнопке регистрация то выходит ссылка в адресной строке /login/?action=register Пишет страница не найдена. В чем причина, как устранить и что должно там быть. Форма работает но опять же ошибка в коде $(‘body’).append(”); теги были на другой строке.
Исправить надо на wp-login.php?action=register
И еще крестик который должен закрывать окно не закрывает его. Просто добавляет ШАРП к УРЛ. И все. Попробуйте потестировать этот скрипт на теме Sarina. Может доработки какие внесли бы.
Большое спасибо за форму! При доработке смотрится просто супер!)