Всплывающая форма входа для 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]

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