আজকে আমি যে বিষয়টি নিয়েপোষ্ট করছি তা হল ওয়ার্ডপ্রেস ব্লগে কিভাবে উপরে স্লাইডিং লগইন প্যানেল বসানো যায়। আমি জানি অনেকে তাদের ব্লগে স্লাইডিং লগইন প্যানেল বসানোর জন্য ‘প্লাগ ইন’ ব্যাবহার করে থাকেন। কিন্তু তারা অনেকে জানে না যে ‘প্লাগ ইন’ ব্যাবহার এর ফলে তাদের সাইট বা ব্লগ ধীর গতির হয়ে পড়ে। আপনাদের এই ধীর গতির সমস্যার থেকে মুক্তির জন্য এবং যারা  লগইন পেজে না ঢুকে সরাসরি লগইন করতে চান তাদের জন্য এই পোষ্টটি করা।

sliding-login-panelচিত্রঃ স্লাইডিং লগইন প্যানেল।

আমি এখানে আপনাদের কে কিছু কোড দিব যা আপনার ওয়ার্ডপ্রেস থিমে বা লেআউট এর সঠিক স্থানে বসানোর মাধ্যমে আপনি আপনার ব্লগ বা সাইটটি তে টপ স্লাইডিং লগইন প্যানেল বসাতে পারবেন এবং এর সুবিধা উপভোগ করতে পারবেন।

যারা নিজের সার্ভারে ওয়ার্ডপ্রেস ব্যবহার করেন তারাই একমাত্র এই সুবিধাটি পাবেন।

এটি jQuery ও ওয়ার্ডপ্রেস ডিফল্ট লগইন কোড এর সংমিশ্রনে তৈরী, তাই এটি তৈরী করা খুবই সহজ।

এটি ব্যবহার করার ফলে আপনাকে আর কষ্ট করে লগইন পেইজে যেতে হবে না লগইন করার জন্য এবং খুব সহজে লগ আউট করতে পারবেন। টপ স্লাইডিং লগইন প্যানেল এর চিত্র গুলো নীচে দেওয়া হল।

Login Panel02চিত্রঃ স্লাইডিং লগইন প্যানেল।

কিভাবে আপনারা এই স্লাইডিং লগইন প্যানেল আপনার ওয়ার্ডপ্রেস থিমে ব্যাবহার করবেন তা আপনাদের আমি ধাপে ধাপে বুঝিয়ে দিচ্ছি।

তাহলে চলুন শুরু করা যাকঃ

১. জাভাস্ক্রিপ্ট (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" />&nbsp;&nbsp;&nbsp;&nbsp;
<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;}

ব্যাস কাজ শেষ।

এবার আপনার থিমটি চালু করুন এবং উপোভোগ করুন আপনার থিমের স্লাইডিং লগইন প্যানেল।

কোন সমস্যা থাকলে আমাকে জানাতে পারেন।
বাংলা স্লাইডিং লগইন প্যানেল তৈরী করার জন্য আমাকে জানা তে পারেন। আর এই স্লাইডিং লগইন প্যানেল পরিবর্তন করা সহজ।

না পারলে আমাকে জানাতে পারেন কোন সমস্যা নেই।

ডেমো দেখুন এখানে।

comments

9 কমেন্টস

  1. ami thik vabe buji nai..?? atar kaj ki ??

    arekta jinish .. box er font size boro koro.. lekhaar shomoi font size khub soto thake dekha kai janah..

    comment.php te er site er option theke 20 kore daow..

  2. @ সায়েদ ভাই মন্তব্যের জন্য ধন্যবাদ। আপনার কোন মতামত, জিজ্ঞাসা বা অনুরোধ থাকলে দয়া করে প্রশ্ন উত্তর পেইজে গিয়ে করুন। আমরা আমাদের সাধ্যমত চেষ্টা করব ইনশাল্লাহ।

    বিঃদ্রঃ যদি আমাদের সাধ্যের মধ্যে করা সম্ভব তাহলে।

    আর দয়া করে বাংলায় লিখবেন। কারন সাইট টা আমরা বাংলায় করছি। আপনাদের বাংলা লিখার সুবিধার জন্য আমরা নিচে “ইউনি জয়”, “ফনেটিক” দুইটি লেখার সিষ্টেম রেখেছি দয়া করে এই গুলার সদ্‌ব্যাবহার করবেন।

    আপনি ঠিক কি বুঝেন নাই আমাকে স্পষ্ট করে বলুন। আমি সাহায্য করতে পারবো।

    –ধন্যবাদ–

  3. রলিন এবং সজিব কেমন আছো তোমরা??
    তোমাদের এই সাইট দেখে আমার খূব ভাল লাগল৷ আর ওয়র্াড প্রেস সম্পর্কে জানতে আমি খুবই আগ্রহী৷ যদি ওয়ার্ড প্রেস সম্পর্কে প্রথম থেকে মানে কি ভাবে শুরু করব তা নিয়ে যদি ধারাবাহিক একটা পর্ব করতে তাহলে আমাদের মত নাদান বালকদের জন্য খুবই ভাল হত৷

  4. নাদের ভাই… আমরা ভাল আছি । ব্লগটার ডেভেলপিং নিয়ে যদিও একটু ব্যস্ত । সাইট ভাল লেগেছে জেনে খুশি হলাম 🙂 আর ওয়ার্ডপ্রেস নিয়ে ধারাবাহিক পোস্ট সিরিজ লেখা নিয়ে আমরা চিন্তা ভাবনা করছি । খুব শ্রীঘ্রয়ই আপনাকে জানানো হবে ।

  5. ধন্যবাদ। আচ্ছা অমি জানতে ছাই যে, আমার সাইটে কিভাবে লগইন প্যানেল বসানো যাবা। জানিয়ে সাহায্য করবেন কি?? আমার সাইট http://submitlink.yolasite.com

    আবারও ধন্যবাদ।

  6. @ Nurjahan (Top) আপনার সাইট টা দেখলাম। এই পদ্ধতিতে মূলত ওয়ার্ডপ্রেস এ লগিন প্যানেল যুক্ত করা যায়। আমার যতটুকু মনে হয় আপনার সাইট টি ওয়ার্ডপ্রেসে করা নয়। যদি আপনার সাইট টি ওয়ার্ডপ্রেসে করা হত তাহলে লগইন প্যানেল বসাতে পারতেন। তবে আপনি চেষ্টা করে দেখতে পারেন।

    আসলে আমি ওয়ার্ডপ্রেস নিয়ে ঘাটা ঘাটি করি। আমি আন্তরিক ভাবে দুঃখিত আপনাকে সাহায্য করতে পারলাম না বলে।
    অবশেষে আপনার মন্তব্যের জন্য আপনাকে ধন্যবাদ।

  7. আমি একটা টেমপ্লেটে আপনার এই কোড টা ইউজ করতে ছিলাম কিন্তু হয় না। প্রব্লেম টা কি একটু দেকবেন প্লিজ। টেমপ্লেটার লিঙ্ক http://www.dezzain.com/featured/dezzain-free-wordpress-theme-zoxengen/
    এবং আমি ওয়ার্ডপ্রেস ৩.০.৪ ব্যবহার করছি

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Time limit is exhausted. Please reload the CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.