ওয়ার্ডপ্রেস ব্লগের থাম্বনেইলের উপর মাউস রাখুন আর উল্টো দিকে ক্যাপশন দেখান

অনেক দিন পর ওয়ার্ডপ্রেস সম্পর্কে লেখতে বসলাম। আসেন একটু মজাদার ক্রিয়েটিভ কিছু তৈরি করার চেষ্টা করি। ওয়ার্ডপ্রেস ব্লগের হোমপেজে সাধারণত পর্যায়ক্রমিকভাবে নতুন পোস্ট সমূহ সংক্ষিপ্ত আকারে দেখানো হয়। প্রায় সকলেই এই পোস্টগুলোর সাথে পোস্ট থাম্বনেইল প্রদর্শন করতে পছন্দ করেন।পোস্ট থাম্বনেইল ইমেজের সাথে আপনি চাইলেই কিছু টেক্সট ক্যাপশনের মাধ্যমে প্রদর্শন করতে পারেন।

img

আপনার ওয়ার্ডপ্রেস ব্লগে যদি পোস্ট থাম্বনেইল উমেজ দেখানোর কোন অপশন না থাকে এবং আপনার যদি মোটামটি এইচ টি এম এল এবং সি এস এস এর ধারণা থাকে তাহলে আপনার ওয়ার্ডপ্রেস থিমের functions.php ফাইলটা ওপেন করে নিচের কোডটুকু যুক্ত করে থাম্বনেইল উমেজ যুক্ত করার ব্যবস্থা করুন । তহলে আপনি ওয়ার্ডপ্র্রেস পোস্ট তৈরি করার সময় থাম্বনেইল উমেজ যুক্ত করার অপশন পাবেন।

/*Add thumbnail images*/

if ( function_exists( ‘add_theme_support’ ) ) {
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 600, 300, true ); // default Post Thumbnail dimensions (cropped)

// additional image sizes
// delete the next line if you do not need additional image sizes
add_image_size( ‘category-thumb’, 300, 9999 ); //300 pixels wide (and unlimited height)
}

এখন আপনাকে ওয়ার্ডপ্রেস ব্লগের হোমপেজে পোস্ট সমূহ সংক্ষিপ্ত আকারে দেখানোর পাশাপাশি থাম্বনেইল উমেজটি দেখানোর জন্য index.php তে <?php the_post_thumbnail();?> যুক্ত করতে হবে এবং প্রয়োজনীয় css স্ট্যাইল যুক্ত করতে হবে।

যা হোক আমাদের আজকের মূল বিষয় এটা না আর একটু এডভান্সড। অনেকেই এ বিষয়টা জানেন। তবে এটুকু ধারণা থাকা দরকার আজকের প্রজেক্টের জন্য, তাই সংক্ষিপ্ত আকারে আলোচনা করলাম। এ প্রজেক্টটি চেষ্টা করার জন্য আপনার ওয়ার্ডপ্রেস থিম ডেভলপমেন্ট সম্পর্কিত ধারণা থাকা আবশ্যক।

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

উপরের উদাহরণটিতে আপনি যখন গোলাপের ছবিটির উপর মাউস রাখবেন তখন গোলাপের ছবিটি উল্টে যাবে এবং এর পেছনে ছবিটির ক্যাপশন হিসেবে Wow! Beautiful flower লেখাটি দেখাবে।

আপনাকে উপরের উদাহরণ প্রজেক্টের অনুরূপ তৈরি করতে হলে ওয়ার্ডপ্রেস থিমের index.php ওপেন করে যেখানে <?php the_post_thumbnail();?> ব্যবহার করে থাম্বনেইল ইমেজ যেখানে যুক্ত করা আছে, ঐ স্থানে <?php the_post_thumbnail();?>  মুছে দিয়ে নিচের কোডটুকু যুক্ত করুন। কিছু css এবং html এডিট করা লাগতে পারে, আপনার অভিজ্ঞতাকে ব্যবহার করুন।

<div class="thumb_area image_thumb">
<div class="thumb_wrap">
<div class="flip_content">
<div class="image_front">
<?php the_post_thumbnail();?>
</div>
<div class="flip_back">
<h3><?php echo get_post(get_post_thumbnail_id())->post_excerpt; ?></h3>
</div>
</div>
</div>
</div>

এখন আপনার থিমের style.css ফাইলের একেবারে শেষে নিচের কোডটুকু যুক্ত করুন।

/*========Flip thumbnail=======*/
.thumb_area {
border:5px solid #333333;
border-radius: 15px;
width: 160px;
height: 150px;
margin: 5px auto;
position: relative;
cursor: default;
}
.thumb_wrap{
position: absolute;
width: 160px;
height: 150px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;

-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

.flip_content{
display:block;
position: absolute;
width: 160px;
height: 150px;
border-radius: 50%;

-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;

}

.flip_content > div {
border-radius: 15px;
display: block;
position: absolute;
width: 100%;
height: 100%;
background-position: center center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}

.flip_content .flip_back {
-webkit-transform: rotate3d(0,1,0,180deg);
-moz-transform: rotate3d(0,1,0,180deg);
-o-transform: rotate3d(0,1,0,180deg);
-ms-transform: rotate3d(0,1,0,180deg);
transform: rotate3d(0,1,0,180deg);
background: #000;
}

.image_thumb img{
margin-left:5px;
}

.flip_content h3 {
color: #f00;
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
font-size: 14px;
margin: 0 7px;
padding: 40px 0 0 0;
height: 90px;
font-family: ‘Open Sans’, Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}

.thumb_area:hover .flip_content {
-webkit-transform: rotate3d(0,1,0,-180deg);
-moz-transform: rotate3d(0,1,0,-180deg);
-o-transform: rotate3d(0,1,0,-180deg);
-ms-transform: rotate3d(0,1,0,-180deg);
transform: rotate3d(0,1,0,-180deg);
}

এই ইফেক্টটি ইন্টারনেট এক্সপ্লোরারে কাজ করবে না । তাই থিমের header.php তে <head></head> এর মধ্যে নিচের কোডটুকু যুক্ত করুন

<!–[if lte IE 8]><style>
.flip_content .flip_back {display: none;}
</style><![endif]–>

তাহলে প্র্রজেক্টটি সম্পন্ন হবে। যখন কোন ইমেজ থাম্বনেইল ইমেজ হিসেবে যুক্ত করবেন, তখন অবশ্যই ক্যাপশন যুক্ত করবেন।

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

………………………………………………………………………………..

জ্ঞন বিজ্ঞানের সংস্পর্শে আলোকিত একটা সুন্দর সমৃদ্ধ পৃথিবীর প্রত্যাশায় আজ এখানেই শেষ করছি। সকলের জন্য শুভকামনা রইল।

1 thought on “ওয়ার্ডপ্রেস ব্লগের থাম্বনেইলের উপর মাউস রাখুন আর উল্টো দিকে ক্যাপশন দেখান”

Comments are closed.