ওয়ার্ডপ্রেস থিমের উইজেট এরিয়া তৈরি করা

ওয়ার্ডপ্রেস থিম ইন্সটল করার পর আমরা wp-admin/widgets.php তে গেলে দেখি Sidebar বা Footer নামক এরিয়া। যেখানে আমরা যেকোন উইজেট রাখতে পারি। এবং পরে সাইডবার বা ফুটারে তা দেখায়। আমরা চাইলে নতুন কোন উইজেট এরিয়া তৈরি করতে পারি। যেমন আমরা চাইলে হেডার অংশে একটা উইজেট এরিয়া তৈরি করব। পরে ঐখানে কোন ইউজেট রাখলে তা হেডারে দেখাবে। বা চাইলে হোম পেইজের জন্য একটা উইজেট এরিয়া তৈরি করব। পরে ঐখানে কোন উইজেট রাখলে তা হোমপেইজে দেখাবে।

আমি যে থিমটি ব্যবহার করি, সেখানে মাত্র দুইটা উইজেট এরিয়া। কিভাবে আরো উইজেট এরিয়া তৈরি করা যায়, তাই দেখব।

উইজেট এরিয়া তৈরি করা যথেষ্ট সহজ। নিচের কোড গুলো functions.php ফাইলে যুক্ত করে দিয়ে সেভ করে উইজেটে গিয়ে দেখলে দেখতে পাবো Header নামক একটা উইজেট এরিয়া তৈরি হয়েছে।

<?php
/**
 * Register our sidebars and widgetized areas.
 *
 */
function custom_widgets_init() {

register_sidebar( array(
 'name' => 'Header',
 'id' => 'header_widget',
 'before_widget' => '<div>',
 'after_widget' => '</div>',
 'before_title' => '<h2 class="widget_title">',
 'after_title' => '</h2>',
 ) );

}

add_action( 'widgets_init', 'custom_widgets_init' );
?>

custom_home_widgets_init নামে একটা ফাংশন তৈরি করেছি। যেখানে আমরা  sidebar রেজিস্টার করেছি। আর একটা অ্যারেতে ঐ সাইডবারের ইনফরমেশন গুলো দিয়েছি। ‘name’ => ‘Header’ হচ্ছে উইজেট এরিয়ার নাম। ‘id’ => ‘header_widget’ হচ্ছে ইউনিক আইডি। যেটা দিয়ে পরে আমরা উইজেটকে কল করব।  before_widget এবং after_widget এর মধ্যে উইজেটের পূর্বে এবং পরে কোন কিছু যুক্ত করতে চাইলে তা করা হয়েছে। সাধারনত সিএসএস ক্লাস এখানে পাস করা হয়। এরপর টাইটেলের পূর্বে এবং পরে কোন কিছু যুক্ত করতে চাইলে তা পাস করা হয়েছে। এবং শেষে add_action ফাংশনে আমাদের কাস্টম উইজেটটি widgets_init এ যুক্ত করা হয়েছে।

এখন আমরা ওয়ার্ডপ্রেস এডমিনে গিয়ে উইজেটে গেলে Header নামে নতুন উইজেট দেখতে পাবো। Header এ কোন উইজেট রাখলে তা এখনো দেখাবে না। আমরা চাইলে যে কোন জায়গায় এ উইজেটটি কল করতে পারি। যেমন header.php তে। যেখানে কল করব, যেখানে নিচের কোড যুক্ত করবঃ

<?php if ( is_active_sidebar( 'header_widget' ) ) : ?>
<?php dynamic_sidebar( 'header_widget' ); ?>
<?php endif; ?>

এখন যেখানে উপরের কোড টা যুক্ত করা হয়েছে, সেখানেই উইজেটটা দেখাবে। আমরা ইচ্ছে করলে যে কোন স্টাইল যুক্ত করতে পারি। আমরা যদি দুইটা উইজেট এরিয়া তৈরি করতে চাই, তাহলে লিখতে হবেঃ

<?php
/**
 * Register our sidebars and widgetized areas.
 *
 */
function custom_widgets_init() {

register_sidebar( array(
 'name' => 'Header',
 'id' => 'header_widget',
 'before_widget' => '<div>',
 'after_widget' => '</div>',
 'before_title' => '<h2 class="widget_title">',
 'after_title' => '</h2>',
 ) );
register_sidebar( array(
 'name' => 'Home Sidebar',
 'id' => 'home_sidebar',
 'before_widget' => '<div>',
 'after_widget' => '</div>',
 'before_title' => '<h2 class="widget_title">',
 'after_title' => '</h2>',
 ) );
}
add_action( 'widgets_init', 'custom_widgets_init' );
?>

উপরে আমরা এক সাথে দুইটা উইজেট এরিয়া তৈরি করেছি। এভাবে আমরা যত গুলো ইচ্ছে তত গুলো উইজেট এরিয়া তৈরি করতে পারি। আর সে গুলো কল করে থিমের যে কোন জাগায় দেখাতে পারি। এখানে দুইটি উইজেট এরিয়া রয়েছে, প্রথমটি দেখাতে লিখবঃ

<?php if ( is_active_sidebar( 'header_widget' ) ) : ?>
<?php dynamic_sidebar( 'header_widget' ); ?>
<?php endif; ?>

দ্বিতীয়টি থিমে দেখাতে লিখবঃ

<?php if ( is_active_sidebar( 'header_widget' ) ) : ?>
<?php dynamic_sidebar( 'home_sidebar' ); ?>
<?php endif; ?>

সাইডবারের আগে কোন স্টাইল যুক্ত করতে পারি নিচের মত করেঃ

<?php if ( is_active_sidebar( 'header_widget' ) ) : ?>
<div id="home_sidebar">
<?php dynamic_sidebar( 'home_sidebar' ); ?>
</div>
<?php endif; ?>