Krijoni nje Panel identifikimi per WOrdpress
Nese keni nje WordPress blog dhe keni aktivizuar regjistrimin per antaret patjeter qe ju duhet nje panel identifikimi.Une e kam fjalen pa perdorur ndonje plugin por ta vendosni direkt ne header me tutorialin qe do tregoj dhe kodet qe do ju jap.
Si demo mund te shikoni si blogun tone si dhe ne fotografi.Hajdeni fillojme pra.
Mos harroni per css mua me punon ne kete menyre ben vaki del me ndryshe tek ju por css eshte gje qe ndryshohet.Postimi origjinal eshte mare nga http://www.blogohblog.com/how-to-build-a-top-sliding-login-panel/
Fillojme kodimin ne themen e wordpress hapeni header.php dhe kete kodin qe ndodhet me poshte vendosenine mbarimin e etiketes /head>
1 2 3 4 5 6 7 8 | <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> |
Kodet HTML qe do i vendosni ne Header jane keto :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <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" />
<label for="pwd">Password : </label><input type="password" name="pwd" id="pwd" size="20" />
<input type="submit" name="submit" value="Identifikohu" 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">Regjistrohu</a> |
<a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">Harrova Fjalekalimin</a>
</div>
</div><!--loginform ends-->
<?php } else { ?>
<div class="loginform">
<h2>Paneli Kontrollit</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">Posto nje Artikull </a></li> |
<li><a href="<?php echo get_option('home'); ?>/wp-admin/page-new.php">Posto faqe te re</a></li> |
<li><a href="<?php echo wp_logout_url( get_bloginfo('url') ); ?>" title="Logout">Dalja</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--> |
Tani hapeni style.css te themes dhe vendosini kodet e me poshtme
1 2 3 4 5 6 7 8 9 10 11 12 | * {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;} |
Nje panel me te vertete i bukur dhe mund te beni ndryshime me css sic kam bere une ne blogun albcoders (nuk kam postuar ate timen)
