আপনার ওয়ার্ডপ্রেস থিমে যুক্ত করুন ইমেজ স্লাইডার

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

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

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

একবার দেখে নেয়া যাক আমাদের ইমেজ স্লাইডারটি।

প্রথম ধাপ

সর্বপ্রথমে এখান থেকে slider-demo.zip ফাইলটা ডাউনলোড করে এক্সট্রাক্ট করুন। এর পর images ফোল্ডারের মধ্যেকার ইমেজ গুলো কপি করে আপনার ওয়ার্ডপ্রেস থিম ফোল্ডারের images ফোল্ডারের মধ্যে পেস্ট করুন।এবং js ফোলইারের ফাইল দুইটা কপি করে আপনার ওয়ার্ডপ্রেস থিমে যদি কোন js ফোল্ডার থাকে তাহলে তার মধ্যে রাখুন আর না থাকলে ফোল্ডার সহ কপি করুন। এখন আপনার ওয়ার্ডপ্রেস থিমের functions.php ফাইলে নিচের কোডটুকু যুক্ত করতে হবে।

[sourcecode language=”js”]

// in the function below, I am using my blm prefix. If you have one of your own, you might want to use it.
// Don’t forget that it’s used twice. Make sure to change both instances.

function blm_init_method() {
/* Enqueue custom Javascript here using wp_enqueue_script().
http://codex.wordpress.org/Function_Reference/wp_enqueue_script*/

wp_enqueue_script( ‘jquery’ );
wp_enqueue_script( ‘easing’, get_template_directory_uri().’/js/jquery.easing.js’, array( ‘jquery’ ), ‘1.3’ );
wp_enqueue_script( ‘slides’, get_template_directory_uri().’/js/slides.min.jquery.js’, array( ‘jquery’, ‘easing’ ) );

}
add_action(‘wp_enqueue_scripts’, ‘blm_init_method’);

[/sourcecode]

দ্বিতীয় ধাপ

এখন আপনার ওয়ার্ডপ্রেস থিম ফোল্ডারের header.php ফাইলটার </head> এর ঠিক আগে নিচের কোডটুকু কপি পেস্ট করে যুক্ত করুন।

[sourcecode language=”js”]
<script>
// In order to use WordPress’s built-in Jquery, you need to use jQuery and can’t use $
//http://codex.wordpress.org/Function_Reference/wp_enqueue_script

jQuery(document).ready(function($){
$(‘#slides’).slides({
preload: true,
preloadImage: ‘<?php echo get_template_directory_uri(); ?>/images/loading.gif’,
play: 5000, // change this to make it go faster or slower
pause: 2500, //change this to pause more or less
hoverPause: true

});
});
</script>
[/sourcecode]

তৃতীয় ধাপ

এখন আসল কাজটা আপনাকে করতে হবে আপনি আপনার ওয়ার্ডপ্রেস থিমে কোন পেজে কোথায় ইমেজ স্লাইডারটি যুক্ত করবেন সে স্থানে নিচের কোড টুকু যুক্ত করতে হবে। সাধারণত index.php ফাইলে <?php get_header(); ?> এর ঠিক পরেই যুক্ত করা হয়।

[sourcecode language=”js”]

<div id="slider">
<div id="slides">
<div id="pre"><a href="#" class="prev"><img src="<?php bloginfo(‘template_directory’)?>/images/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a></div>
<div class="slides_container">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();

$args = array(
‘post_type’ => ‘attachment’,
‘numberposts’ => -1,
‘orderby’=> ‘menu_order’,
‘order’ => ‘ASC’,
‘post_mime_type’ => ‘image’,
‘post_status’ => null,
‘post_parent’ => $post->ID
);

$attachments = get_posts( $args );
if ( $attachments ) {
foreach ( $attachments as $attachment ) {
echo wp_get_attachment_image($attachment->ID , ‘full’ );
}
}
endwhile; endif; ?>

</div>
<div id="next"><a href="#" class="next"><img src="<?php bloginfo(‘template_directory’)?>/images/arrow-next.png" width="24" height="43" alt="Arrow Next"></a></div>

</div>

</div>
[/sourcecode]

চতুর্থ ধাপ

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

[sourcecode language=”css”]
#slider{width:530px;
padding:5px;
height:200px;
margin:20px 0px 15px 40px;
border:#e5e5e5 1px solid;}

.slides_container {

width:530px;
height:200px;
overflow:hidden;
position:relative;
display:none;
}

#pre{float:left;
margin-left:-30px;
margin-top:75px;}
#next{float:right;
margin-right:-30px;
margin-top:-120px;}

.pagination {
margin:26px auto 0;
width:100px;
}
.pagination li {
float:left;
margin:0 1px;
list-style:none;
}
.pagination li a {
display:block;
width:12px;
height:0;
padding-top:12px;
background-image:url(images/pagination.png);
background-position:0 0;
float:left;
overflow:hidden;
}
.pagination li.current a {
background-position:0 -12px;
}

.slides_container img {
width:530px;
height:200px;
}

[/sourcecode]

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

ট্রাবলশুটিং টেকনিক (সবার জন্য নয়)

যদি কোন সমস্যা হয়। তাহলে আর এ কটা কাজ করতে পারেন ট্রাবল শুটিং এর জন্য। slider-demo যে ফাইলটা ডাউনলোড করেছেন। সেটা নিজেই একটা ওয়ার্ডপ্রেসের থিমের মত সেটাপ দেয়া যায়। অর্থাৎ একটা বেসিক ওয়ার্ডপ্রেস থিমে যে ফাইলগুলো থাকা দরকার তার সবই আছে। একবার ওয়ার্ডপ্রেসের থিমের মত সেটাপ দিয়ে দেখেন স্লাইডার প্রদর্শিত হচ্ছে। এর পর একটু বুদ্ধি খাটিয়ে style.css ফাইলটা এডিট করে প্রয়োজনীয় কাজ সেরে ফেলতে পারেন।আশা করি প্রয়োজন হবে না তারপরও বললাম। কারণ আমাকে এটাই করতে হয়েছিলো।

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

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