jQuery ile üst giriş paneli ekleyin!

Sitemde hem temayı değiştirdim (aslında eski temam ya neyse) hem de WpFuncs içinde yazdığım bir ipucu/ekleme ile destekledim. Bunu sizlerle de paylaşmak istiyorum. Sitemize güzel bir giriş ve yönetim paneli ekleyebiliriz. Bunu şık bir şekilde javascript kodlarının oldukça güzel kullanılabildiği ve gerçekten güzel görünümler katılabilen jQuery ile yapabilmekteyiz. Resim ve diğer şeyleri kullanmadan css+js ile yapılabilen birşey olduğundan sadece kopyala/yapıştır yönetmi yeterli oalcak. Hadi başlayalım…

Öncelikle düzenlemeniz gereken iki dosya var.header.php ve style.css (temanızdaki style.css dosyası tek değilse uygun olanını seçin).

Başlayalım…

Öncelikle gerekli olan javascript kodu…

Bu kodu sitenizdeki header.php içinde etiketinden önce ekleyin.

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

Gelelim HTML kodlarına :D

Bunları da header.php içinde etiketinden sonra istediğiniz bir yere ekleyin.

<div id="slide-panel">
<?php if ( ! is_user_logged_in() ){ ?>
<div class="loginregister">
<a href="<?php echo get_option('home'); ?>/wp-register.php">Kayıt Ol!</a> |
<a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">Şifremi Unuttum</a>
</div>
</div><!--Kullanıcı Girişi Biter-->
<?php } else { ?>
<div class="loginform">
<h2>Kontrol Paneli</h2><ul>
<li><a href="<?php echo get_option('home'); ?>/wp-admin/">Başlangıç</a></li> |
<li><a href="<?php echo get_option('home'); ?>/wp-admin/post-new.php">Yeni Yazı Oluştur</a></li> |
<li><a href="<?php echo get_option('home'); ?>/wp-admin/page-new.php">Yeni Sayfa Oluştur</a></li> |
<li><a href="<?php echo wp_logout_url( get_bloginfo('url') ); ?>" title="Logout">Çıkış</a></li></ul>
</div><!--giriş paneli biter-->
<?php }?>
</div><!--GİRİŞ PANELİ BİTER-->
<div class="slide"><a href="#" class="btn-slide"><?php if ( ! is_user_logged_in() ){ ?>Giriş<?php } else { ?>Çıkış<?php }?></a></div><!--Giriş Butonu Biter-->

Dosyasınızı sunucuya yollamayın :) style.css ile işimiz bitsin ondan sonra :) Ha bu arada dosyayı UTF-8 olarak kaydetmeyi unutmayın…

Evet en son aşama CSS…

Style.css dosyanızı açın ve en son satıra bir boşluk verip bu kodları ekleyin.

* {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;}

Şimdi bütün dosyaları ftp ile suncuya yolalyın ve bir Ctrl+F5 çekin bakem sitenizin anasayfasına :D

Hadi Selametle..