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

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

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 স্ট্যাইল যুক্ত করতে হবে।

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

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

img

উপরের উদাহরণটিতে আপনি যখন গোলাপের ছবিটির উপর মাউস রাখবেন তখন গোলাপের ছবিটি উল্টে যাবে এবং এর পেছনে ছবিটির ক্যাপশন হিসেবে 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]-->

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

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

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

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

পোস্টটির মূল লেখক টিউটোহোস্ট টিম সদস্য অসিম কুমার
পোস্টটি ইতোপূর্বে এখানে প্রকাশিত

Level 0

আমি টিউটোহোস্ট। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 5 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 162 টি টিউন ও 69 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

টিউটোহোস্ট বাংলাদেশের একটি জনপ্রিয় ওয়েব হোস্টিং সেবাদানকারী প্রতিষ্ঠান। যুক্তরাস্ট্র এবং যুক্তরাজ্য ভিত্তিক দ্রুতগতির বেশ কিছু ওয়েব সারভারে গুরুত্বপূর্ণ তথ্যগুলো নিরাপদে সংরক্ষণ করা হয়। আমরা এদেশে ২৪ ঘন্টা এবং বছরে ৩৬৫ দিন অনলাইন এবং ফোন সাপোর্টের ব্যবস্থা রেখেছি। বাংলেদশসহ অনেক দেশের জনপ্রিয় ওয়েবসাইট আমাদের সারভার ব্যবহার করছে।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

Level 0

Nice Post 🙂

সহজ আছে , পড়ে ভালো লাগল!

ধন্যবাদ nasirgb এবং আরাফাত রহমান ভাই।