WordPress Theme Development – Zero to Hero : Episode 05

on

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

EPISODES:

Episode 01

Episode 02

Episode 03

Episode 04

Episode 05

ধাপ ৫: Sidebar এবং Widget এরিয়া তৈরি করা

মিয়া, হেডার-ফুটার তো বানাইলেন, এবার থিমে একটা সাইডবার (Sidebar) যুক্ত করা লাগবে। এতে আপনি বিভিন্ন উইজেট (Widget) যেমন ক্যাটাগরি, লেটেস্ট পোস্ট, সার্চ বক্স ইত্যাদি অ্যাড করতে পারবেন।

১. সাইডবার রেজিস্টার করা (functions.php)

প্রথমে থিমের functions.php ফাইলে সাইডবার রেজিস্টার করার জন্য নিচের কোড লিখেন:

<?php
// Theme support
function my_first_theme_setup() {
    add_theme_support('title-tag'); // Dynamic title tag
    add_theme_support('post-thumbnails'); // Featured images

    // Register navigation menu
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'my-first-theme'),
    ));
}
add_action('after_setup_theme', 'my_first_theme_setup');

// Enqueue styles
function my_first_theme_styles() {
    wp_enqueue_style('main-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_first_theme_styles');

// Register Sidebar
function my_first_theme_sidebar() {
    register_sidebar(array(
        'name'          => __('Primary Sidebar', 'my-first-theme'),
        'id'            => 'primary-sidebar',
        'description'   => __('This is the main sidebar for widgets', 'my-first-theme'),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ));
}
add_action('widgets_init', 'my_first_theme_sidebar');
?>

বর্ণনা:

  • register_sidebar() দিয়ে সাইডবার রেজিস্টার করা হয়।
  • before_widget, after_widget আর before_title দিয়ে HTML স্ট্রাকচার সেট করা হয়।

২. সাইডবার যোগ করা (sidebar.php)

এখন থিম ফোল্ডারে sidebar.php নামে একটা নতুন ফাইল বানান। নিচের কোড লিখেন:

<?php if (is_active_sidebar('primary-sidebar')) : ?>
    <aside id="secondary" class="sidebar">
        <?php dynamic_sidebar('primary-sidebar'); ?>
    </aside>
<?php endif; ?>

বর্ণনা:

  • is_active_sidebar() চেক করে সাইডবারে উইজেট আছে কিনা।
  • dynamic_sidebar() দিয়ে সাইডবারে উইজেট দেখায়।

৩. index.php তে সাইডবার যুক্ত করা

এখন index.php ফাইলে সাইডবার যুক্ত করেন। নিচের কোড ব্যবহার করেন:

<?php
get_header();
?>
<div class="content-area">
    <main class="main-content">
        <h1>Welcome to My WordPress Theme</h1>
        <p>This is the main content area.</p>
    </main>
    <?php get_sidebar(); ?>
</div>
<?php
get_footer();
?>

বর্ণনা:

  • get_sidebar(); দিয়ে sidebar.php ফাইল লোড করা হয়।

৪. সাইডবারের স্টাইলিং (CSS)

সাইডবারটা সুন্দর করে দেখানোর জন্য style.css ফাইলে নিচের কোড যোগ করেন:

/*
Theme Name: Toposhwini
Theme URI: https://tanverhossain.rf.gd/
Author: Tanver Hossain
Author URI: https://www.facebook.com/Tanver247
Description: This is my first custom WordPress theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Tanver-Hossain
*/

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

header h1 a {
    color: #fff;
    text-decoration: none;
}

nav .nav-menu {
    list-style: none;
    padding: 0;
}

nav .nav-menu li {
    display: inline;
    margin: 0 10px;
}

footer {
    background-color: #222;
    color: #aaa;
    padding: 20px;
    text-align: center;
}

.content-area {
    display: flex;
    flex-wrap: wrap;
}

.main-content {
    flex: 3;
    padding: 20px;
}

.sidebar {
    flex: 1;
    background-color: #f4f4f4;
    padding: 20px;
    border-left: 1px solid #ddd;
}

.widget {
    margin-bottom: 20px;
}

.widget-title {
    font-size: 18px;
    margin-bottom: 10px;
}



বর্ণনা:
  • flexbox ব্যবহার করে সাইডবার আর মেইন কন্টেন্ট এক লাইনে এনেছি।
  • সাইডবারকে একটা আলাদা ব্যাকগ্রাউন্ড আর বর্ডার দেওয়া হয়েছে।

৫. সাইডবারে উইজেট যোগ করা

এখন WordPress ড্যাশবোর্ডে যান:

  • Appearance > Widgets এ যান।
  • দেখবেন নতুন Primary Sidebar নামে একটা এরিয়া অ্যাড হইছে।
  • এখানে আপনার পছন্দ মতো উইজেট যেমন Search, Categories, Recent Posts ইত্যাদি অ্যাড করতে পারেন।

 

ফলাফল চেক করা:

১. ব্রাউজারে থিম রিফ্রেশ করেন।
২. সাইটে দেখবেন সাইডবারে অ্যাড করা উইজেটগুলো সুন্দরভাবে শো করছে।

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

Telegram IconMy Telegram

 

 

 

The post WordPress Theme Development – Zero to Hero : Episode 05 appeared first on Trickbd.com.



from Trickbd.com https://ift.tt/BcmE2vP
via IFTTT

Comments

Post a Comment