WordPress-এ শূন্য থেকে Minimal Block Theme: theme.json v3, Header ও Footer

ব্লক থিম বানাতে জটিল PHP বা বিল্ড টুল আবশ্যক নয়। ফাইল, ব্লক মার্কআপ এবং theme.json দিয়েই একটি ছোট, সম্পাদনাযোগ্য থিম তৈরি করা যায়। এই গাইডের baseline WordPress 6.6+; version 3 schema-কে 6.6-এর সমর্থন হিসেবে ধরা হয়েছে, সর্বশেষ সংস্করণের দাবি হিসেবে নয়। কাজের আগে staging সাইট ও ব্যাকআপ রাখুন।

ফোল্ডার কাঠামো

wp-content/themes/minimal-bangla/-এ নিচের ফাইল রাখুন। templates/index.html থাকাই একটি block theme শনাক্তের ন্যূনতম শর্ত।

minimal-bangla/
├── style.css
├── theme.json
├── templates/index.html
└── parts/{header.html,footer.html}

style.css পরিচয়

সব CSS এখানে না রেখেও থিম তালিকায় পরিচয় দেখাতে header লিখুন:

/*
Theme Name: Minimal Bangla
Author: Your Name
Description: A small learning block theme.
Version: 1.0.0
Text Domain: minimal-bangla
*/

রঙ, spacing ও typography-এর মূল নিয়ন্ত্রণ theme.json-এ রাখলে Site Editor-এ পরিবর্তন করা যায়।

theme.json v3

Official reference অনুযায়ী version 3 WordPress 6.6 বা পরে কাজ করে। নিচে ছোট, পরিচিত সেটিং এবং দুইটি নিবন্ধিত template part আছে:

{
  "$schema": "https://schemas.wp.org/wp/6.6/theme.json",
  "version": 3,
  "settings": {
    "appearanceTools": true,
    "layout": { "contentSize": "720px", "wideSize": "1100px" },
    "color": { "palette": [
      { "slug": "ink", "color": "#202124", "name": "Ink" },
      { "slug": "paper", "color": "#fffdf8", "name": "Paper" },
      { "slug": "accent", "color": "#146c5b", "name": "Accent" }
    ] },
    "typography": { "dropCap": false }
  },
  "styles": {
    "color": { "background": "var(--wp--preset--color--paper)", "text": "var(--wp--preset--color--ink)" },
    "spacing": { "blockGap": "1.4rem" },
    "typography": { "lineHeight": "1.7" }
  },
  "templateParts": [
    { "name": "header", "title": "Header", "area": "header" },
    { "name": "footer", "title": "Footer", "area": "footer" }
  ]
}

$schema editor validation-এ সাহায্য করে। 6.6-এর নিচে version 3 বৈশিষ্ট্য পরীক্ষিত নাও হতে পারে; তাই production-এর আগে target WordPress-এই যাচাই করুন।

Header ও Footer parts

parts/header.html-এ কেবল block markup রাখুন:

<!-- wp:group {"align":"wide","layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide">
<!-- wp:site-title /-->
<!-- wp:navigation /-->
</div>
<!-- /wp:group -->

parts/footer.html এমন হতে পারে:

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">সাদামাটা ও সম্পাদনাযোগ্য।</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

templates/index.html

Parts নিজে থেকে লোড হয় না; slug-সহ Template Part block লাগবে। Query Loop-এ পোস্টের title, excerpt ও pagination রাখুন:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- wp:query {"query":{"perPage":10,"inherit":true}} -->
<div class="wp-block-query">
<!-- wp:post-template -->
<!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-excerpt /-->
<!-- /wp:post-template -->
<!-- wp:query-pagination /-->
</div>
<!-- /wp:query -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

সক্রিয় ও যাচাই

Appearance → Themes থেকে থিম সক্রিয় করুন, তারপর Appearance → Editor-এ template খুলুন। Home, মোবাইল প্রস্থ, pagination এবং keyboard navigation পরীক্ষা করুন। Editor-এ পুরনো নকশা দেখালে database-এ saved template আপনার ফাইলকে override করতে পারে। staging-এ saved version সরিয়ে বা পুনরায় কপি করে যাচাই করুন। পরে single.html, page.html ও pattern যোগ করা যাবে। contrast, heading order, backup এবং rollback কপি অবশ্যই পরীক্ষা করুন।

সাধারণ ভুল ও সমাধান

JSON-এ comma বাদ গেলে থিম নাও লোড হতে পারে; তাই একটি JSON validator বা editor schema ব্যবহার করুন। Block comment-এর opening ও closing অংশ জোড়া না থাকলে Editor markup অস্বাভাবিক দেখাতে পারে। Query Loop-এ inherit সত্য রাখলে বর্তমান archive query অনুসরণ করে; home page-এ ফল না এলে Reading Settings, published post এবং permalink পরীক্ষা করুন। Navigation block-এ menu না থাকলে Site Editor থেকে menu নির্বাচন করুন—এটি কোডের ত্রুটি নয়।

একসঙ্গে theme.json ও Editor-এর saved style বদলালে কোনটি কার্যকর হচ্ছে বুঝতে অসুবিধা হয়। প্রথমে ফাইলের baseline রাখুন, তারপর Editor-এ একবারে একটি পরিবর্তন করুন। Git বা অন্তত তারিখ-সহ zip backup রাখলে rollback সহজ। Accessibility-এর জন্য শুধু রঙের উপর নির্ভর করবেন না, focus state এবং heading-এর ক্রম দেখুন। ছোট থিমের উদ্দেশ্য দ্রুত শুরু করা; production design-এ typography, language attribute, responsive spacing এবং error template আলাদা করে যোগ করুন।

আরও একটি বাস্তব পরামর্শ হলো, প্রথমে কেবল এই ন্যূনতম ফাইল দিয়ে থিম চালু করে browser inspector দেখুন। তারপর একবারে একটি color বা spacing পরিবর্তন করুন। এতে theme.json-এর ভুল এবং block markup-এর ভুল আলাদা করে ধরা যায়। Child theme বা plugin-এর style যদি একই selector বদলায়, computed style দেখে উৎস শনাক্ত করুন। কোনো third-party block যোগ করলে তার fallback output ও translation-ও পরীক্ষা করুন।

থিম বিতরণের আগে text domain, license এবং readme যোগ করা ভালো। WordPress 6.6 baseline লিখে রাখুন, কারণ ব্যবহারকারী পুরনো core চালালে version 3 না-ও বুঝতে পারে। Template-এর নাম WordPress hierarchy-র সঙ্গে সামঞ্জস্যপূর্ণ রাখুন এবং database-এ saved customization ফাইলের সঙ্গে আলাদা—এই বিষয়টি changelog-এ জানান।

এই ধাপে পাওয়া কাঠামোটি ইচ্ছাকৃতভাবে ছোট, তাই নতুন বৈশিষ্ট্য যোগ করার আগে baseline কপি করে রাখুন এবং প্রতিটি পরিবর্তন staging-এ যাচাই করুন।

Official sources

• theme.json v3 reference
• Templates handbook
• Template Parts handbook

শূন্য থেকে Minimal Classic WordPress Theme বানানোর সহজ গাইড

নিজের হাতে একটি classic WordPress theme বানানো শেখার সবচেয়ে ভালো উপায় হলো ছোট রাখা। এখানে আমরা block theme নয়, template-ভিত্তিক একটি ন্যূনতম theme বানাব। লক্ষ্য সুন্দর ডিজাইন নয়; বরং WordPress কীভাবে header, loop, asset এবং footer জোড়া দেয় তা বোঝা। কাজের আগে staging সাইটে পরীক্ষা করুন এবং বর্তমান theme-এর backup রাখুন।

ফোল্ডার তৈরি

wp-content/themes/shobuj-minimal/ নামে ফোল্ডার বানান। Classic theme চিনতে WordPress-এর জন্য style.css দরকার; শিরোনামের comment-এ অন্তত Theme Name থাকতে হবে। পাশাপাশি functions.php, index.php, header.php এবং footer.php রাখব।

style.css: পরিচয় এবং নকশা

ফাইলের প্রথম comment-এ theme metadata দিন। নিচের CSS ইচ্ছাকৃতভাবে সাধারণ; পরে নিজের রং ও layout যোগ করতে পারবেন।

/**
 * Theme Name: Shobuj Minimal
 * Description: A tiny classic theme for learning.
 * Version: 1.0
 * Author: Your Name
 * Text Domain: shobuj-minimal
 */

body { margin: 0; font: 16px/1.6 system-ui, sans-serif; color: #222; }
.site-header, .site-footer { padding: 1rem; background: #173b2a; color: #fff; }
.site-main { max-width: 760px; margin: 2rem auto; padding: 0 1rem; }
a { color: #075e45; }

functions.php: asset ও feature

CSS সরাসরি template-এ বসানোর বদলে enqueue করা WordPress-এর স্বাভাবিক পদ্ধতি। after_setup_theme-এ title tag, featured image এবং menu support যোগ করছি।

<?php
/** Load the theme stylesheet. */
function shobuj_minimal_assets() {
    wp_enqueue_style(
        'shobuj-minimal',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get('Version')
    );
}
add_action('wp_enqueue_scripts', 'shobuj_minimal_assets');

function shobuj_minimal_setup() {
    add_theme_support('title-tag');
    add_theme_support('post-thumbnails');
    register_nav_menus(array('primary' => __('Primary Menu', 'shobuj-minimal')));
}
add_action('after_setup_theme', 'shobuj_minimal_setup');

header.php: hook ভুলবেন না

language_attributes() ও charset accessibility এবং আন্তর্জাতিকীকরণে সহায়ক। wp_head() closing head-এর আগে, আর opening body-র পরেই wp_body_open() রাখুন। Plugin-এর scripts, styles, analytics বা accessibility tooling এই hook ব্যবহার করতে পারে।

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<header class="site-header"><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></header>

index.php: নিরাপদ Loop

Loop-এ have_posts() দিয়ে ফল আছে কি না দেখা হয়, তারপর the_post() global post প্রস্তুত করে। শিরোনামের URL-এ esc_url(), তারিখে esc_html() ব্যবহার করেছি। Content দেখানোর জন্য the_excerpt() ব্যবহার করলে WordPress-এর তৈরি excerpt যথাযথ থাকে।

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <h2><a href="<?php echo esc_url(get_permalink()); ?>"><?php the_title(); ?></a></h2>
                <p><?php echo esc_html(get_the_date()); ?></p>
                <?php the_excerpt(); ?>
            </article>
        <?php endwhile; ?>
        <?php the_posts_pagination(); ?>
    <?php else : ?>
        <p><?php esc_html_e('কোনও লেখা পাওয়া যায়নি।', 'shobuj-minimal'); ?></p>
    <?php endif; ?>
</main>

<?php get_footer(); ?>

footer.php এবং পরীক্ষা

footer-এর closing body-এর ঠিক আগে wp_footer() থাকা আবশ্যক।

<footer class="site-footer"><p><?php echo esc_html(get_bloginfo('name')); ?></p></footer>
<?php wp_footer(); ?>
</body>
</html>

এখন Appearance থেকে theme activate করুন। Home page, কোনও post, search, empty result এবং mobile width দেখুন। Menu না দেখালেও প্রথম ধাপে সমস্যা নয়; পরের ধাপে wp_nav_menu() বসাতে পারবেন। PHP syntax error হলে staging-এর error log দেখুন, live site-এ অন্ধভাবে paste করবেন না।

দৈনন্দিন workflow

প্রথমে requirements লিখে নিন: site title কোথায়, navigation কতটি, post excerpt কতটা এবং typography কী হবে। তারপর HTML structure স্থির করে CSS দিন। Template-এ business logic না রেখে ছোট helper functions রাখলে theme maintain করা সহজ হয়। WordPress-এর template hierarchy পরে শিখলে home, single এবং archive আলাদা ফাইল করতে পারবেন; শুরুতে index.php fallback হিসেবে যথেষ্ট।

Loop-এর ভেতরে বড় raw HTML বা user-provided attribute সরাসরি বসাবেন না। URL, class, text এবং HTML-এর জন্য প্রসঙ্গভেদে আলাদা escaping দরকার। এই অভ্যাস ভবিষ্যতের theme-এ নিরাপত্তা সমস্যা কমায়। Accessibility-এর জন্য heading ক্রম ঠিক রাখুন, link text অর্থপূর্ণ করুন এবং keyboard-এ menu চালানো যায় কি না দেখুন।

শেষে একটি ছোট checklist রাখুন: theme activate, front page, search, pagination, 404, logged-out visitor এবং mobile viewport। PHP warning দেখা গেলে debug log-এ কারণ খুঁজুন, কিন্তু debug display live-এ চালু রাখবেন না। এই minimal theme ইচ্ছাকৃতভাবে comments, sidebar বা customizer যোগ করেনি—সেগুলি আলাদা feature হিসেবে একবারে একটিই যোগ করুন।

ছোট কিন্তু জরুরি যাচাই

কোড বসানোর পরে শুধু editor-এ সবুজ দেখালেই শেষ নয়। আলাদা browser-এ logged-out অবস্থায় page খুলুন, keyboard দিয়ে link ও control চালান, এবং mobile width-এ horizontal scroll হচ্ছে কি না দেখুন। PHP ও WordPress version-এর compatibility নোট করুন। staging-এ error log দেখে warning থাকলে সমাধান করুন; live সাইটে অযথা debug output দেখাবেন না। Backup ফেরত আনার পদ্ধতিও আগে পরীক্ষা করে রাখুন। কোনও third-party plugin একই hook বা class ব্যবহার করছে কি না দেখলে prefix বদলান। ছোট পরিবর্তন একবারে deploy করলে সমস্যা হলে কোন অংশ rollback করতে হবে তা স্পষ্ট থাকে। এই নিয়মগুলি theme, shortcode এবং CPT—তিন ক্ষেত্রেই প্রযোজ্য।

নোট লিখে রাখুন কোন file কোথায় রাখা হয়েছে এবং কোন shortcode বা URL পরীক্ষা করা হয়েছে। এতে ভবিষ্যতের update-এ ভুল কমে এবং অন্য developer দ্রুত দায়িত্ব নিতে পারেন। এই অভ্যাসটি রাখুন।

আরও পড়ুন

• Main stylesheet
• Theme plugin API hooks
• The Loop

সতর্কতা: লাইভ সাইটে বদলানোর আগে staging কপি, পূর্ণ backup এবং rollback পরিকল্পনা রাখুন। কোডটি নিজের WordPress/PHP সংস্করণে পরীক্ষা করুন।