X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Логин панель для Wordpress.
Jora
Jora
Topic Starter сообщение 24.11.2009, 6:52; Ответить: Jora
Сообщение #1


Участник
***

Группа: User
Сообщений: 158
Регистрация: 1.9.2009
Поблагодарили: 20 раз
Репутация:   -3  


Очень приятна панелька для авторизации пользователей на вашем блоге , которая выводится в верху вашего блога .
Демо : Логин панель

Установка проходит в 3 этапа которые я тут опишу.

Javascript Этап 1.

Открываем вашу тему и ищем файл header.php . Вставьте следующий код перед окончание тега (</ head>) :
<code><script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(”.btn-slide”).click(function(){
$(”#slide-panel”).slideToggle(”slow”);
});
});
</script>

Описаный выше скрипт вызывается из под гугл апи и инициирует эффект слайда в логин панели.

HTMLЭтап 2.

В этом же файле header.php, сразу после тело тега (< body>) , вставьте следующий код :

<div id=”slide-panel”><!–SLIDE PANEL STARTS–>
<?php if ( ! is_user_logged_in() ){ ?>
<h2>Login</h2>
<div class=”loginform”>
<div class=”formdetails”>
<form action=”<?php echo get_option(’home’); ?>/wp-login.php” method=”post”>
<label for=”log”>Username : </label><input type=”text” name=”log” id=”log” value=”<?php echo wp_specialchars(stripslashes($user_login), 1) ?>” size=”20″ />&nbsp;&nbsp;&nbsp;&nbsp;
<label for=”pwd”>Password : </label><input type=”password” name=”pwd” id=”pwd” size=”20″ />
<input type=”submit” name=”submit” value=”Login” class=”button” />
<label for=”rememberme”><input name=”rememberme” id=”rememberme” type=”checkbox” checked=”checked” value=”forever” /> Remember me</label><input type=”hidden” name=”redirect_to” value=”<?php echo $_SERVER['REQUEST_URI']; ?>” />
</form>
</div>
<div class=”loginregister”>
<a href=”<?php echo get_option(’home’); ?>/wp-register.php”>Register</a> |
<a href=”<?php echo get_option(’home’); ?>/wp-login.php?action=lostpassword”>Recover password</a>
</div>
</div><!–loginform ends–>
<?php } else { ?>
<div class=”loginform”>
<h2>Control Panel</h2><ul>
<li><a href=”<?php echo get_option(’home’); ?>/wp-admin/”>Dashboard</a></li> |
<li><a href=”<?php echo get_option(’home’); ?>/wp-admin/post-new.php”>Write new Post</a></li> |
<li><a href=”<?php echo get_option(’home’); ?>/wp-admin/page-new.php”>Write new Page</a></li> |
<li><a href=”<?php echo wp_logout_url( get_bloginfo(’url’) ); ?>” title=”Logout”>Logout</a></li></ul>
</div><!–loginform ends–>
<?php }?>
</div><!–SLIDE PANEL ENDS–>
<div class=”slide”><a href=”#” class=”btn-slide”><?php if ( ! is_user_logged_in() ){ ?>Login<?php } else { ?>Logout<?php }?></a></div><!–LOGIN BUTTON TEXT–>

Этот код будет вызывать скольжени в верхней части вашего шаблона .
CSSЭтап 3.

Ну и заключительная часть наших действий. Откройте ваш style.css файл и вставьте следующие строки в конец этого файла:

* {margin:0; padding:0; outline:0;}
#slide-panel{ background-color:#000;border-bottom-style:solid;border-bottom-width:2px;display:none;height:100px;margin:auto;}
.slide {width:950px; margin:auto;}
.btn-slide:link, .btn-slide:visited{color:#fff; float:right; display:block;font-size:14px; text-transform:uppercase; font-weight:bold;height:26px; padding:3px 0 3px 0;line-height:22px;text-align:center;text-decoration:none;width:100px; background-color:#000; font-family:Arial;}
.loginform {width:950px; margin:auto; color:#999; font-family:Arial, Helvetica, sans-serif;}
.formdetails {color:#FFF; font-size:12px;padding:5px;}
.formdetails input{border:none; padding:2px 5px 2px 5px; background-color:#EFEFEF;}
.loginregister {color:#999; padding:5px;}
.loginregister a:link, .loginregister a:visited {color:#FFF; font-size:11px; text-decoration:underline;}
.loginform h2 {padding:10px 10px 10px 0; font-size:18px; font-weight:normal; text-transform:uppercase;}
.loginform ul li {display:inline;}
.loginform ul li a:link, .loginform ul li a:visited {color:#FFF; font-size:12px; text-decoration:underline;}


Теперь попробуйте обновить страницу вашего сайта. Ву ля ля. Теперь у вас есть раздвижная панель для ваших пользователей. rolleyes.gif

Сообщение отредактировал Jora - 24.11.2009, 9:15


Поблагодарили: (1)
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) ВНИМАНИЕ: Тема имеет прикрепленные файлыПишу тексты для всех и каждого. Цены не кусаются, качество не хромает.
Единственное правило: клиент всегда доволен.
121 Hellnar 50185 Сегодня, 15:57
автор: Hellnar
Открытая тема (нет новых ответов) Чем сжимать картинки для сайта без потери качества
1st-finstep.ru - Заработок в сети и методы продвижения сайта
15 komarik_vlad 1528 Сегодня, 12:05
автор: x64
Горячая тема (нет новых ответов) Услуги по CMS Wordpress, DLE, Joomla!. Правки, ремонт, настройка.
Редактирование и правки. Низкие цены.
143 contex1 65207 Сегодня, 9:07
автор: contex1
Открытая тема (нет новых ответов) Бот для комплексной автоматической рассылки Whatsapp
Бот для комплексной автоматической рассылки Whatsapp
3 danger22 588 Сегодня, 8:30
автор: danger22
Открытая тема (нет новых ответов) Открыть валютной карты для обменника
6 fair_exchange 404 Вчера, 19:38
автор: Mistic


 



RSS Текстовая версия Сейчас: 17.12.2017, 16:13
Дизайн