Маленький перерыв в темах про фотографию — сегодня интересная заготовка для wordpress, которую я подсмотрел на Blog Oh! Blog — раскрывающаяся панель авторизации. Давно хотел включить возможность регистрации на сайте, чтобы потом посетители могли использовать учетные данные и на форуме. Вот как раз и вполне функциональное решение без лишних плагинов. Я перевел поля на английском, на тестовом блоге все вполне прилично заработало, думаю, что в скором времени появится и тут.

Результат можно увидеть по ссылке (откроется в новом окне). В принципе панельку можно разместить в любом месте, но в примере она появляется в самом верху страницы. У панельки есть некоторое неудобство, она открывается не поверх контента, а отодвигая его вниз, возможно есть какое-то решение, но пока во всяком случае в голову не пришло.

Итак, для работы нам понадобится файл header.php из текущей темы. В нем, перед закрывающим тэгом «head», нужно вставить следующий код:

<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>

Единственное изменение — я бы скачал файл «jquery.min.js" и положил бы к себе на сервер, мне кажется, что так получится логичнее.

Теперь в том же файл, прямо после тэга «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=»Войти» class=»button» />

<label for=»rememberme»><input name=»rememberme» id=»rememberme» type=»checkbox» checked=»checked» value=»forever» /> Запомнить</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»>Регистрация</a> |

<a href=»<?php echo get_option(‘home’); ?>/wp-login.php?action=lostpassword»>Восстановить пароль</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/»>Панель управления</a></li> |

<li><a href=»<?php echo get_option(‘home’); ?>/wp-admin/post-new.php»>Новая запись</a></li> |

<li><a href=»<?php echo get_option(‘home’); ?>/wp-admin/page-new.php»>Новая страница</a></li> |

<li><a href=»<?php echo wp_logout_url( get_bloginfo(‘url’) ); ?>» title=»Logout»>Выйти</a></li></ul>

</div><!—loginform ends—>

<?php }?>

</div><!—SLIDE PANEL ENDS—>

<div class=»slide123″><a href=»#» class=»btn-slide»><?php if ( ! is_user_logged_in() ){ ?>Войти<?php } else { ?>Выйти<?php }?></a></div><!—LOGIN BUTTON TEXT—>

Вобщем-то это и все, осталось только добавить нужные стили в 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;}

.slide123 {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;}

Единственная сложность, которая может возникнуть — неправильная работа скрипта, если у вас уже установлена аналогичная панель или слайд-шоу или что-то подобное. В моем случае все решилось переименованием повторяющихся стилей и больше никаких конфликтов не наблюдалось.

Ссылка на исходник:

статья How to Build a Top Sliding Login Panel (на английском).

Похожие записи

Robots.txt для WordPress.

• by xela
• 8 комментариев

Исправление в файле Robots.txt для WordPress

• by xela
• 21 комментарий

Приглашаю авторов на блог Xela.ru!

• by xela
• 11 комментариев