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