সবাইকে সালাম ও শুভেচ্ছা জানিয়ে আজকের এই পোস্ট আরম্ভ করতেসি।বর্তমানে আমাদের সবারি একটা না একটা ব্লগ আছে এই ব্লগটিকে সুন্দর করার জন্য আমরা কতইনা চেষ্টা করি। যেমন দরুন আমাদের ব্লগের লগিন প্যানেলটা কেমন হবে এ নিয়ে আমরা মুটামুটি সবাই একটু দুশ্চিন্তাগ্রস্ত, অবশ্য ওয়ার্ডপ্রেস ব্লগের জন্য হাজারো লগিন প্যানেলের প্লাগিন রয়েছে কিন্তু এসব প্লাগিন ব্যাবহার একটু বেশি করলে আমাদের ব্লগটির ওজন বেরে যাই ফলে ব্লগটি লোড হতে দেরি হই।
আজকে আমি আপনাদের একটি স্লাইডিং লগিন প্যানেল দেব এই লগিন প্যানেলটি আপনার ব্লগে যুক্ত করার জন্য কোন প্লাগিনের দরকার হবে না, শুদু মাত্র আপনার ব্লগের থিমটি একটু এডিট করে কিছু কোড বসাতে হবে। তাহলে চলুন দেখি কেমন করে আপনার ওয়ার্ডপ্রেস ব্লগে স্লাইডিং লগিন প্যানেল যুক্ত করতে হয়।
স্লাইডিং লগিন প্যানেলটির ডেমো দেখতে এখানে ক্লিক করুন
প্রথমে আপনার ওয়ার্ডপ্রেস ব্লগে লগিন করুন Appearance এর Editor এ ক্লিক করুন।
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>
এখন আবার <body>ট্যাগটি খুঁজে বের করুন খুঁজে পেলে <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”>User: </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=”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”> Retrogression</a> |
<a href=”<?php echo get_option(‘home’); ?>/wp-login.php?action=lostpassword”>Forget Your Password</a>
</div>
</div><!–loginform ends–>
<?php } else { ?>
<div class=”loginform”>
<h1>Control Panel</h1><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”>Add New Post</a></li> |
<li><a href=”<?php echo get_option(‘home’); ?>/wp-admin/page-new.php”>Add New Page</a></li> |
<li><a href=”<?php echo wp_logout_url( get_bloginfo(‘url’) ); ?>” title=”Logout”>Log Out</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 { ?>Log out<?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;}
.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;}
ফাইলটি আপডেট করুন।
ব্যাস আপনার কাজ শেষ এবার আপনার ব্লগটি রিলোড করে দেখুন স্লাইডিং লগিন প্যানেলটি যুক্ত হয়ে গেছে।
আশা করি এই টিউটোরিয়ালটি আপনাদের কাজে লাগবে, আপনাদের যদি এই টিউটোরিয়ালটি ভাল লেগে থাকে তহলেই আমার ভাল লাগবে। সবাই ভাল ও সুস্থ থাকুন সেই প্রত্যাশাই আজকের মত এখানেই বিদাই নিচ্ছি।
খুঁজি-খুঁজি , পেলাম ।
ধন্যবাদ –