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

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

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

Форма входа штука очень нужная, но вот беда занимает место, где можно было бы дополнительно разместить порцию полезной информации. Особенно остро это ощущается на двух колоночных блогах. Когда текста мало, а прочей информации (меню, реклама и т.п.) на боковой панели много, получается очень некрасивая страница, а тут еще и эта форма входа. Можно существенно усовершенствовать эту форму входа, используя различные плагины, один из них плагин 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]

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

Новые посты

Шорткоды wordpress – добавление в HTML редактор

Гордеев Игорь

Как отключить админ-панель в WordPress для всех кроме администраторов

Гордеев Игорь

Выделяем комментарии автора в wordpress

Гордеев Игорь

48 комментариев

Miroslav 14.04.2012 / 06:02

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

Ответить
Елена 02.06.2012 / 16:17

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

Ответить
Гордеев Игорь 02.06.2012 / 19:22

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

Ответить
Елена 02.06.2012 / 21:49

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

Ответить
Сергей 11.06.2012 / 20:58

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

Ответить
Иван 17.06.2012 / 00:01

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

Ответить
Иван 02.07.2012 / 19:37

Мне помогут?

Ответить
Гордеев Игорь 04.07.2012 / 12:40

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

Ответить
Иван 04.07.2012 / 15:42

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

Ответить
intelegent 25.06.2012 / 23:34

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

Ответить
Иван 05.07.2012 / 15:10

Я отправил вам на почту ( info@studio-gost.ru ) 2 сообщения

Ответить
Гордеев Игорь 06.07.2012 / 09:36

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

Ответить
Иван 06.07.2012 / 16:19

Отправил на тот же адрес

Ответить
Иван 10.07.2012 / 01:50

Ну что там?

Ответить
Гордеев Игорь 10.07.2012 / 11:27

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

Ответить
Sergey 25.09.2012 / 17:14

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

Ответить
Гордеев Игорь 26.09.2012 / 09:57

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

Ответить
BASoftWARe 04.10.2012 / 01:25

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

Ответить
Гордеев Игорь 04.10.2012 / 11:06

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

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

Ответить
BASoftWARe 04.10.2012 / 15:25

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

Ответить
Гордеев Игорь 04.10.2012 / 15:39

Рад был помочь

Ответить
Елена 14.10.2012 / 03:19

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

Ответить
Гордеев Игорь 15.10.2012 / 10:05

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

Ответить
Иван 03.03.2013 / 22:53

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

Ответить
Сергей 21.10.2012 / 00:22

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

Ответить
Гордеев Игорь 22.10.2012 / 10:02

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

Ответить
sobora 21.10.2012 / 20:43

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

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

Ответить
Гордеев Игорь 22.10.2012 / 10:12

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

Ответить
sobora 25.10.2012 / 20:38

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

Ответить
Гордеев Игорь 26.10.2012 / 09:41

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

Ответить
Герман 08.01.2013 / 17:29

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

Ответить
Гордеев Игорь 08.01.2013 / 22:53

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

Ответить
Герман 08.01.2013 / 23:07

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

Ответить
Андрей 06.04.2013 / 02:03

Отличная статья ➡ 5+

Ответить
Админка 15.06.2013 / 02:40

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

Ответить
Гордеев Игорь 17.06.2013 / 12:14

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

Ответить
Админка 17.06.2013 / 14:53

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

Ответить
Гордеев Игорь 17.06.2013 / 14:56

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

Ответить
Админка 17.06.2013 / 15:06

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

алиса 24.02.2014 / 18:54

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

Ответить
MrVigner 08.05.2014 / 22:03

А можно както такую форму авторизацию в виджет “запихнуть”?

Ответить
Гордеев Игорь 08.05.2014 / 23:02

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

Ответить
VMelnik 04.12.2014 / 14:56

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

Ответить
Олег 15.09.2016 / 17:45

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

Ответить
Олег 15.09.2016 / 17:54

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

Ответить
Олег 15.09.2016 / 17:55

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

Ответить
Олег 15.09.2016 / 18:08

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

Ответить
Олег Холоденко 13.11.2017 / 13:19

Большое спасибо за форму! При доработке смотрится просто супер!)

Ответить

Оставить комментарий