যেভাবেঃ তৈরি করবেন সুন্দর আপনার ওয়েব সাইট বা ব্লগ এর জন্য একটি লেখক পরিচিতি বক্স

TutorialFor.Me সাইটে প্রথম একটি টিউটোরিয়াল লিখছি এবং প্রথম টিউটোরিয়াল টি আমি লিখছি এটা ভাবতেই অনেক খুশি লাগছে :) আজকে আমি আপনাদের সাথে তৈরি করবো আপনার সাইট বা ব্লগের জন্য সুন্দর একটি “লেখক পরিচিতি বক্স (Author Info Box)” এবং সেই সাথে আরোও দেখাবো সেটা কিভাবে আপনার প্রিয় ওয়ার্ডপ্রেস ব্লগে যুক্ত করবেন।

লেখক পরিচিতি বক্সঃ

জনপ্রিয় সকল ব্লগেই দেখা যায় একটি লেখার সাথে লেখক সম্বন্ধে বেশ কিছু লেখা থাকে। সেই সাথে লেখকের সাথে যোগাযোগ করার জন্য কিছু যোগাযোগ মাধ্যম ও থাকে। আজকে আমি সেই ধরনেরই একটি বক্স তৈরি করে আপনাদের উপহার দেব।

ফটোশপ এ তৈরি করে ফেলুন একটি ডিজাইনঃ

যেকোনো ডিজাইন করার আগে সেটাকে ফটোশপ বা ফায়ারওয়ার্কস জাতীয় সফটওয়্যার এ মূল ডিজাইন টা করে নেয়া উচিৎ যেমন আমি নিচের ছবির মত করে করেছি।

এবার এইচটিএমএল কনভার্ট করুনঃ

আমারা উপরের ছবিতে যেভাবে ডিজাইন করেছি আমারা সেই অনুযায়ী এখন বেশ কিছু ডিভ (DIV) ও প্রয়োজনীয় লেখা ও ছবি গুলো যুক্ত করবো। আমি যেভাবে হট্ছিএইচটিএমএল লিখেছি তা নিচে আপনাদের জন্য যুক্ত করে দিয়েছি আপনারাও আমার এই এইচটিএমএল লেখা অনুযায়ী নতুন করে লিখতে পারেন অথবা এগুলোই কপি করতে পারেন।

<!-- লেখকের পরিচিতি বক্স শুরু হল। -->
	<div class="authorbox">

		<!-- এবার আমরা মূল ডিজাইন অনুযায়ী উপরের অংশ তৈরি করবো -->
		<div class="topinfo">

			<!-- বাম দিকে লেখকের নাম লেখার জন্য -->
			<div class="left">
				<p>Author: <strong>Aminul Islam</strong></p>
			</div>

			<!-- ডান দিকে লেখকের অবস্থা দেখানোর জন্য -->
			<div class="right">
				<p>This has been <strong>394 posts</strong> and <strong>490 comments</strong> here.</p>
			</div>
		</div>
		<!-- এখানে উপরের অংশ শেষ হয়ে গেলো -->

		<!-- লেখকের ছবি দেখানোর জন্য -->
		<div class="authorimg">
			<img src="images/avatar.png">
		</div>

		<!-- লেখকের সম্পর্কে যে লেখাগুলো থাকে -->
		<div class="authorbio">
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Donec eu libero sit amet quam egestas semper.</p>
		</div>

		<!-- লেখককে অনুসরণ করার জন্য মাধ্যম (ছবি ও লিংক) -->
		<div class="followme">
			<p>Find Me in:</p> <div class="social"><a href="#facebook"><img src="images/facebook.png" title="Find Me In Facebook"></a> <a href="#twitter"><img src="images/twitter.png" title="Follow Me On Twitter"></a> <a href="#rss"><img src="images/rss.png" title="Subscribe My Feed Via RSS"></a></div>
		</div>

	</div>
	<!-- লেখক পরিচিতি বক্স শেষ হল -->

এবার আপনার ডিজাইনের মূল রূপ দেখার জন্য সিএসএস কোড লিখুনঃ

ফটোশপ বা ফায়ারওয়র্কস করা ডিজাইনের মত করতে আপনাকে সিএসএস এর ব্যবহার করতে হবে। উপরে আমারা যেভাবে এইচটিএমএল এর মাঝে যে ডিভ (DIV) ও ট্যাগ গুলো ব্যবহার করেছিলাম সেই অনুযায়ী এবার আমারা সিএসএস কোড গুলো লিখবো। নিচের আপনাদের জন্য আপনি কোড গুলো লিখে দিলাম আপনারা চাইলে নতুন করেও লিখতে পারেন অথবা নিচের গুলোও কপি করতে পারেন।

/*মূল বক্স এর মাপ, বর্ডার ও ব্যাকগ্রাউন্ড */
.authorbox {
    width:645px;
    height:180px;
    background: transparent url(../images/aubg.png) repeat-x;
    border:2px solid #818388;
    padding:10px;
}

/*উপরের অংশ যেখানে লেখকের নাম ও অবস্থা দেখাবে*/
.topinfo {
    height:20px;
    border-bottom:1px solid #818388;
    margin-bottom:10px;
}
.topinfo p {
    padding:0px;
    margin:0px;
    font-size:14px;
}
.topinfo .left {
    float:left;
}
.topinfo .right {
    float:right;
}

/*লেখকের ছবিতে বর্ডার ও মাপ দেয়া*/
.authorimg {
    height:120px;
    width:120px;
    border:3px solid #818388;
    float:left;
}

/*লেখকের সম্পর্কে যে লেখাগুলো থাকবে*/
.authorbio {
    padding-left:10px;
    float:left;
    width:509px;
    overflow: hidden;
}
.authorbio p {
    margin:0px;
    font-size:15px;
    padding-bottom:5px;
    border-bottom:1px solid #818388;
}

/*লেখককে অনুসরণ এর লিংক ও ছবি গুলো*/
.followme {
    float:right;
    padding-top:10px;
}
.followme p {
    float:left;
    margin:0px;
    font-size:18px;
    margin-right:10px;
}
.followme .social {
    float:right;
}
.followme .social img {
    float:left;
    margin-right:5px;
}

কেমন হয়েছে তা দেখুনঃ

আমরা উপরের এইচটিএমএল ও সিএসএস গুলোর ঠিক ভাবে ব্যবহার করলে আপনার ডিজাইন টা ঠিক ফটোশপ বা ফায়ারওয়ার্কস এর মূল ডিজাইনের মত হয়ে যাবে। নিচের ছবিতে দেখুন আর আপনি চাইলে সরাসরি ডেমো দেখতে পারেন।

এবার ওয়ার্ডপ্রেস থিম এর মাঝে যুক্ত করবোঃ

ওয়ার্ডপ্রেস এর মধ্যে যুক্ত করার জন্য আমাদের কে একটু পিএইচপি সম্বন্ধে ধারনা ও ওয়ার্ডপ্রেস কোডেক্স এর কিছু কোড নিয়ে কাজ করবো। তাহলেই আমাদের এই এইচএমএল এ ডিজাইন করা লেখক পরিচিতি বক্স টি আমারা ওয়ার্ডপ্রেস থিম এ সফল ভাবে যুক্ত করতে পারবো।

উপরের আমরা যে এইচটিএমএল কোড গুলো লিখেছিলাম তা এখন আমরা ওয়ার্ডপ্রেস থিম এ যুক্ত করার জন্য single.php ফাইলের মাঝে

<?php the_content(); ?>

এর নিচে উপরের এইচটিএমএল কোড গুলো কপি করে বসিয়ে দেব।

সিএসএস ফাইলগুলো ওয়ার্ডপ্রেস থিমের স্টাইলসিট এ যুক্তঃ

আমারা উপরের যে সিএসএস কোডগুলো লিখেছিলাম তা এখন ওয়ার্ডপ্রেস থিমের স্টাইলসিট এ যুক্ত করব। আমারা যে থিম এর single.php ফাইলে এইচটিএমএল কোড গুলো যুক্ত করেছিলাম সেই থিমের style.css ফাইল খুলে সেখানে সব নিচে উপরের দেয়া সিএসএস কোড গুলো যুক্ত করে দিন।

এইচটিএমএল থেকে পিএইচপি (ওয়ার্ডপ্রেস) কনভার্টঃ

এর আগে আমরা single.php ফাইলের মাঝে

<?php the_content(); ?>

এর নিচে যে এইচটিএমএল কোডগুলো বসিয়েছিলেন সেখানে এখন নিচের পিএইচপি কোড গুলো দিয়ে আগের লেখাগুলো পরিবর্তন করুন অথবা আগের এইচটিএমএল লেখাগুলো মুছে নতুন (নিচের) পিএইচপি কোড গুলো যুক্ত করুন।

<!-- লেখকের পরিচিতি বক্স শুরু হল। -->
	<div class="authorbox">

		<!-- এবার আমরা মূল ডিজাইন অনুযায়ী উপরের অংশ তৈরি করবো -->
		<div class="topinfo">

			<!-- বাম দিকে লেখকের নাম লেখার জন্য -->
			<div class="left">
				<p>Author: <strong><?php the_author_meta('display_name'); ?></strong></p>
			</div>

			<!-- ডান দিকে লেখকের অবস্থা দেখানোর জন্য -->
			<div class="right">
				<p>This has been <?php
								global $wpdb;
								$user_id = $post->post_author;  //change this if not in a std post loop
								$where = 'WHERE comment_approved = 1 AND user_id = ' . $user_id ;
								$comment_count = $wpdb->get_var(
								    "SELECT COUNT( * ) AS total
										FROM {$wpdb->comments}
										{$where}
									");
								$user = get_userdata($user_id);
								$post_count = get_usernumposts($user->ID);
															echo '<strong>' . $post_count .' Posts </strong> and <strong> ' . $comment_count . ' Comments</strong>'; ?></p>
			</div>
		</div>
		<!-- এখানে উপরের অংশ শেষ হয়ে গেলো -->

		<!-- লেখকের ছবি দেখানোর জন্য -->
		<div class="authorimg">
			<?php echo get_avatar( get_the_author_id() , 120 ); ?>
		</div>

		<!-- লেখকের সম্পর্কে যে লেখাগুলো থাকে -->
		<div class="authorbio">
			<?php the_author_description(); ?>
		</div>

		<!-- লেখককে অনুসরণ করার জন্য মাধ্যম (ছবি ও লিংক) -->
		<div class="followme">
			<!-- আমরা এখানে কাস্টম কন্টাক্ট মেথড ব্যবহার করেছি -->
			<p>Find Me in:</p> <div class="social"><a href="<?php the_author_meta('facebook'); ?>"><img src="images/facebook.png" title="Find Me In Facebook"></a> <a href="<?php the_author_meta('twitter'); ?>"><img src="images/twitter.png" title="Follow Me On Twitter"></a> <a href="<?php the_author_meta('rss'); ?>"><img src="images/rss.png" title="Subscribe My Feed Via RSS"></a></div>
		</div>

	</div>
	<!-- লেখক পরিচিতি বক্স শেষ হল -->

এবার Functions.php ফাইলে কাস্টম কন্টাক্ট মেথড যুক্তঃ

উপরে আমারা লেখকের সাথে যোগাযোগ মাধ্যম হিসেবে আমারা ফেসবুক, টুঁইটার ও আর.এস.এস ব্যবহার করেছি। তাই আমাদের সেই কাস্টম কন্টাক্ট মেথড গুলো Functions.php ফাইলের মাধ্যমে যুক্ত করব। নিচে আমি কাস্টম কন্টাক্ট মেথড যুক্ত করার জন্য কোড গুলো দিলাম আর সেই কোড গুলো আপনার থিমের Functions.php ফাইলে যুক্ত করে দিন।

//New Profile Contact Methods
function my_new_contactmethods( $contactmethods ) {
//add Facebook
$contactmethods['facebook'] = 'Facebook';
// Add Twitter
$contactmethods['twitter'] = 'Twitter';
// Add RSS
$contactmethods['rss'] = 'RSS';

return $contactmethods;
}
add_filter('user_contactmethods','my_new_contactmethods',10,1);

প্রোফাইল আপডেট করার নিয়ম

উপরের কোড গুলো সঠিক ভাবে আপনার থিমের ফাঙ্কসন.পিএইচপি ফাইলে যুক্ত হলে আপনি প্রোফাইল এডিট করার সময়ে নতুন কন্টাক্ট মেথড দেখতে পাবেন (নিচের ছবির মত)

তাহলে টিউটোরিয়াল এখানে শেষ?

হ্যাঁ এখানেই আজকের টিউটোরিয়াল শেষ! এই টিউটোরিয়াল এর সকল সোর্চ ফাইল ডাউনলোড করতে ও ডেমো দেখতে নিচের লিংক অনুসরণ করুন। কোন সমস্যা হলে মন্তব্যের ঘরে আমাকে জানান।
[Download]ডেমো | ডাউনলোড [/Download]