Crearea unui panou de logarare in WordPress
in Php, mysql si altele, Web - 24.11.2010 - Fara comentarii
WordPress este una din cele mai fiabile si folosite platforme de tip CMS din lume insa, in ciuda avantajelor pe care le ofera, are si parti negre. Spre exemplu, logarea!
Un administrator care foloseste WordPress va trebui sa introduca in bara domeniu/wp-admin pentru a accesa panoul, iar un eventual buton de logare in sidebar ar putea deranja simplii vizitatori. Cu ajutorul acestui articol, puteti introduce un buton de logare discret, care sa nu deranjeze utilizatorii si care sa va permita o navigare mai simpla in interiorul panoului de administrare.
Pentru a introduce butonasul de logare direct in header nu trebuie decat sa urmati cativa simpli pasi:
1.Localizati fisierul header.php al temei folosite – In WordPress, temele sunt stocate in directorul themes, din cadrul /wp-content.
2.Editarea header.php pasul 1 – Cu ajutorul unui editor de texte, editati fisierul header.php, adaugand inaintea urmatorul cod:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#slide-panel").slideToggle("slow");
});
});
// ]]></script>
3.Editarea header.php pasul 2 – Folosind aceeasi tehnica de editare, adaugati dupa urmatorul cod:
<div id="slide-panel"><!--SLIDE PANEL STARTS-->
< ?php if ( ! is_user_logged_in() ){ ?>
<h2>Login</h2>
<div>
<div><form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
<label for="log">Username : </label>
<input id="log" name="log" size="20" type="text" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?/>" />
<label for="pwd">Password : </label>
<input id="pwd" name="pwd" size="20" type="password" /> <input name="submit" type="submit" value="Login" /> <label for="rememberme">
<input id="rememberme" checked="checked" name="rememberme" type="checkbox" value="forever" /> Remember me</label>
<input name="redirect_to" type="hidden" value="<?php echo $_SERVER['REQUEST_URI']; ?/>" />
</form></div>
<div><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>
<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 title="Logout" href="<?php echo wp_logout_url( get_bloginfo('url') ); ?>">Logout</a></li>
</ul>
</div>
<!--loginform ends-->
< ?php }?>
</div>
<!--SLIDE PANEL ENDS-->
<div><a href="#">< ?php if ( ! is_user_logged_in() ){ ?>Login< ?php } else { ?>Logout< ?php }?></a></div>
<!--LOGIN BUTTON TEXT-->
4.Editarea style.css – In acelasi director ar trebui sa se afle si fisierul style.css. Folosind aceeasi tehnica de editare, adaugati in primul rand din style.css urmatoarele:
* {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;}
5.Vizualizati rezultatele – Pentru a vizualiza rezultatele, puteti ordona un refresh la pagina, iar daca nu sunteti multumit de cum se afiseaza in pagina, puteti sterge codurile introduse, iar totul revine la normal!
Loading ...