নাম শুনেই বুঝতে পারছেন আজকের টিউনটি কি নিয়ে।
যারা নিজের সার্ভারে ওয়ার্ডপ্রেস ব্যবহার করেন তারাই একমাত্র এই সুবিধাটি পাবেন।
এটি jQuery ও ওয়ার্ডপ্রেস ডিফল্ট লগইন কোড এর সংমিশ্রনে তৈরী, তাই এটি তৈরী করা খুবই সহজ।
এটি ব্যবহার করার ফলে আপনাকে আর কষ্ট করে লগইন পেইজে যেতে হবে না লগইন করার জন্য এবং খুব সহজে লগ আউট করতে পারবেন।
স্লাইডিং লগইন প্যানেল চিত্র-১
স্লাইডিং লগইন প্যানেল চিত্র ২
ডেমো দেখুন এখানে
কিভাবে আপনারা এই স্লাইডিং লগইন প্যানেল আপনার ওয়ার্ডপ্রেস থিমে ব্যাবহার করবেন তা আপনাদের আমি ধাপে ধাপে বুঝিয়ে দিচ্ছি।
তাহলে চলুন শুরু করা যাকঃ
১. জাভাস্ক্রিপ্ট (Javascript)
প্রথমে আপনার ওয়ার্ডপ্রেস থিমের 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 এবং এটি তে গুগোল API ব্যাবহার করা হয়েছে। কারন গুগোল API আপনার স্লাইডিং লগইন প্যানেল এর ইফেক্ট এর কাজে করে।
২. এইচ টি এম এল (HTML)
একই ভাবে header.php ফাইলে নিচে আমার দেওয়া কোড গুলো কপি করে (<body>) এই ট্যাগটির পর কোড গুলো পেস্ট করুন।
<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 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" />
<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>
<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 href=”<?php echo wp_logout_url( get_bloginfo(’url’) ); ?>” title=”Logout”>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–>
উপরোক্ত কোড গুলো আপনার ওয়ার্ডপ্রেস থিমের উপরে স্লাইডিং লগইন প্যানেল কে সংযুক্ত করবে।
৩. সি এস এস (CSS)
তিন ভাগের দুই ভাগ কাজ শেষ। এটা হল শেষ ভাগ।
এবার আপনারা 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;}
0 comments:
Post a Comment